line-height 때문에 생기는 글자 위아래 여백을 text-box: trim-both cap alphabetic 으로 잘라내기 — 한글은 위로 0.1em 넘친다

디자인 시안에서는 버튼 글자 위아래 여백이 12px인데, 화면에 올리면 그보다 훨씬 넓게 뜬다. 카드 맨 위 제목도 카드 테두리에서 시안보다 한참 떨어져 있다. 원인은 line-height다. line-height: 1.6이면 글자 크기의 0.6배만큼이 줄 간격으로 붙는데, 그 절반씩이 글자 위와 아래에 붙는다(반쪽 줄 간격, half-leading). 시안 도구는 보통 글자 모양을 기준으로 간격을 재고, 브라우저는 이 줄 상자를 기준으로 재니 둘이 어긋난다.

그래서 지금까지는 손으로 메웠다. 제목에 margin-top: -0.3em을 주거나, 버튼 padding을 시안보다 작게 잡아 눈으로 맞추는 식이다. 글꼴이 바뀌거나 line-height가 바뀌면 그 숫자를 다시 맞춰야 한다.

CSS text-box는 이 위아래 여백을 글자 모양 기준으로 잘라내는 속성이다. 크롬 133, 사파리 18.2에 이어 2026년 8월 파이어폭스 154가 지원하면서 web.dev가 Baseline Newly available로 소개했다. 그런데 기준이 되는 값이 라틴 문자의 대문자 높이라서, 한글에 걸면 어떻게 되는지는 따로 재 봐야 했다.

한 줄로 쓰는 법

.btn,
.card-title {
  text-box: trim-both cap alphabetic;
}

text-box는 두 속성을 합친 단축 속성이다.

• text-box-trim — 어느 쪽을 자를지. trim-both(위아래), trim-start(첫 줄 위만), trim-end(마지막 줄 아래만), none.
• text-box-edge — 어디까지 자를지. 위쪽은 cap(대문자 높이)·ex(소문자 x 높이)·text(글꼴의 위쪽 경계), 아래쪽은 alphabetic(기준선)·text(글꼴의 아래쪽 경계).

cap alphabetic은 "위는 대문자 꼭대기, 아래는 기준선에 맞춰 잘라라"는 뜻이다. 영문 대문자 H라면 상자 위아래가 글자에 딱 붙는다.

오른쪽을 보면 상자가 대문자 H의 꼭대기와 기준선 사이로 줄었다. g와 p의 꼬리가 기준선 아래로 내려가는 것은 정상이다. 그런데 한글도 상자 위로 조금 삐져나와 있다.

한글은 대문자 높이보다 크다

한글 글자는 라틴 대문자보다 키가 크고, 기준선보다 조금 아래까지 내려온다. 그러니 cap alphabetic으로 자르면 한글은 상자 밖으로 약간 넘친다. 얼마나 넘치는지 세 서체로 쟀다. 40px, line-height: 1.6, 크롬 154와 사파리 27에서 한글을 그리고 상자 경계와 실제 글자 픽셀 사이 거리를 셌다. 음수는 글자가 상자 밖으로 나온 만큼이다.

위로는 글자 크기의 0.08~0.11배, 아래로는 0.05~0.06배쯤 넘친다. 16px 본문 크기라면 위로 1~2px, 아래로 1px 정도다. 버튼 정도 크기에서는 눈에 거의 안 띄지만, 40px이 넘는 제목에서는 위로 4~5px이라 바로 위 요소와 가까워 보일 수 있다.

두 가지가 따라 나온다.

• 잘라낸 요소에 overflow: hidden을 걸지 말 것. 넘친 부분이 잘려서 한글 윗부분이 깎인다. 말줄임(text-overflow: ellipsis)을 쓰려고 overflow: hidden을 거는 버튼·카드 제목에서 흔히 겹친다.
• 큰 제목은 위쪽 간격을 0.1em쯤 더 준다. 상자 기준으로는 시안 간격과 같아도, 한글 글자 기준으로는 그만큼 가깝다.

버튼은 padding 숫자가 그대로 여백이 된다

16px 버튼에 padding: 12px 20px을 주고, 버튼 테두리에서 글자 픽셀까지 거리를 쟀다(크롬 154).

기본 상태에서는 padding 12px을 줬는데 글자까지 거리가 17~21px이다. 반쪽 줄 간격이 더해진 탓이다. 잘라내면 11~12px로, padding에 적은 숫자가 거의 그대로 여백이 된다. 위아래 1px 차이는 앞에서 본 한글 넘침 때문이다.

위아래 균형도 좋아진다. Apple SD Gothic Neo는 기본 상태에서 글자가 위로 2px 치우쳐 있었는데, 잘라낸 뒤에는 0.5px로 줄었다. 반대로 말하면 버튼 높이가 52px에서 37px로 줄어든다. 기존 버튼에 그냥 걸면 버튼이 납작해지니, 원래 높이를 유지하려면 padding을 다시 잡아야 한다.

브라우저마다 다르던 세로 위치가 같아진다

재다가 하나 더 보였다. 같은 Apple SD Gothic Neo 40px인데, 기본 상태에서 크롬은 글자 위 11.5px·아래 17.5px로 위에 붙여 그리고, 사파리는 위아래 14.5px씩 가운데에 그린다. 브라우저가 글꼴 정보에서 줄 상자를 계산하는 방식이 다르기 때문이다.

cap alphabetic으로 자르면 두 브라우저 결과가 픽셀 단위로 같았다. 세 서체 모두 그랬다. 기준이 "글꼴이 말하는 줄 높이"에서 "대문자 높이와 기준선"으로 바뀌기 때문이다. 크롬에서 맞춘 버튼이 사파리에서 1~2px 위아래로 틀어지던 일이 있었다면 이것으로 같이 풀린다.

한글용 기준값 ideographic 은 아직 쓸 수 없다

명세에는 CJK 문자를 위한 기준값이 따로 있다. ideographic(표의 문자 상자)과 ideographic-ink(표의 문자 잉크 경계)다. 이름만 보면 한글에는 이쪽이 맞을 것 같다.

크롬은 CSS.supports('text-box', 'trim-both ideographic')이 false이고, 선언해도 아무 일도 일어나지 않는다. 사파리는 값을 받아들이지만, 세 서체 모두 text(글꼴의 위아래 경계)로 자른 것과 결과가 같았다. 한글 글자 위아래에 40px 기준 6~13px씩 여백이 남는다. 지금 한글에 실제로 쓸 수 있는 것은 cap alphabetic이고, 넘치는 0.1em은 감안하고 쓰는 수밖에 없다.

여러 줄일 때와 한쪽만 자를 때

잘리는 것은 첫 줄의 위쪽과 마지막 줄의 아래쪽뿐이다. 40px 두 줄짜리 블록은 128px에서 92px로, 한 줄일 때와 똑같이 36px 줄었다. 줄과 줄 사이 간격은 그대로 남는다. 본문 문단의 줄 간격은 건드리지 않고 문단 바깥 여백만 정리된다는 뜻이다.

한쪽만 자를 수도 있다. 같은 40px 한 줄에서 trim-start는 위쪽 16px만, trim-end는 아래쪽 20px만 줄었다. 제목 아래 본문과의 간격은 그대로 두고 카드 위 테두리와의 간격만 맞추고 싶을 때 쓴다.

.card-title {
  text-box: trim-start cap alphabetic;
}

지원하지 않는 브라우저

지원하지 않는 브라우저는 선언을 무시하고 기존 줄 상자로 그린다. 깨지지는 않지만, 잘라낸 것을 전제로 padding을 줄여 두었다면 그 브라우저에서는 여백이 시안보다 커진다. 차이가 신경 쓰이면 padding을 @supports 안에서 나눠 준다.

.btn {
  padding: 8px 20px;          /* 줄 상자 기준 */
}

@supports (text-box: trim-both cap alphabetic) {
  .btn {
    text-box: trim-both cap alphabetic;
    padding: 12px 20px;       /* 글자 기준 */
  }
}

지원 현황은 출처마다 표시가 다르다. web.dev는 2026년 8월 28일 글에서 파이어폭스 154 지원과 함께 Baseline Newly available이라고 밝혔다. 반면 이 글을 쓰는 시점에 webstatus.dev는 아직 파이어폭스를 반영하지 않아 Limited로 표시한다. 파이어폭스는 이번에 직접 재지 못했다.

정리

• text-box: trim-both cap alphabetic은 line-height 때문에 생기는 글자 위아래 여백을 잘라, padding과 margin에 적은 숫자가 글자에서부터의 거리가 되게 한다.
• 한글은 대문자 높이보다 커서 위로 약 0.1em, 아래로 약 0.05em 상자 밖으로 넘친다. 잘라낸 요소에 overflow: hidden을 걸면 한글 윗부분이 깎인다.
• 기존 버튼에 걸면 높이가 줄어든다(16px, padding 12px 기준 52px → 37px). padding을 다시 잡을 것.
• 잘라내면 크롬과 사파리의 글자 세로 위치가 같아진다.
• CJK용 ideographic은 크롬에서 무시되고 사파리에서는 text와 같아, 아직 한글에 쓸 수 없다.

측정 환경: macOS, 크롬 154(헤드리스·화면), 사파리 27.0.1. 서체 Apple SD Gothic Neo, Noto Sans KR(Google Fonts), Pretendard 1.3.9. 파이어폭스는 재지 못했다.