CSS 타이포그래피 2026 — text-box-trim·text-wrap:balance로 줄맞춤 끝내기

나는 이 문제 때문에 매번 마이너스 마진을 썼다. 제목 아래 24px 간격을 맞추려고 margin-bottom: 20px에 margin-top: -4px 같은 걸 넣었다. 폰트를 바꾸면 그 숫자가 전부 틀어졌다. 근본 원인을 알고 나서야 이 값들이 왜 폰트마다 달라지는지 이해했다.

하프 리딩 — 여백은 어디서 왔나

행 높이(line-height)가 글꼴의 콘텐츠 영역보다 크면, 그 차이를 위아래로 절반씩 나눠 배분한다. 이것이 하프 리딩이다. line-height: 1.5인 24px 텍스트라면 행 상자는 36px이고, 글자가 차지하지 않는 여분이 위아래 각각 들어간다.

/* 문제 상황 */
h2 {
  font-size: 32px;
  line-height: 1.3;     /* 행 상자 41.6px */
  margin-bottom: 16px;  /* 시각적으로는 16px보다 커 보인다 */
}

/* 기존 우회법 — 폰트 바꾸면 다시 조정해야 한다 */
h2 { margin-bottom: 16px; margin-top: -6px; }

/* 2026년 방식 — 시각적 경계 기준으로 잘라낸다 */
h2 {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;   /* 위는 대문자 높이, 아래는 베이스라인 기준 */
  margin-bottom: 16px;             /* 이제 진짜 16px로 보인다 */
}

줄바꿈 — balance와 pretty

제목이 두 줄로 넘어갈 때 마지막 줄에 단어 하나만 남는 경우가 있다. 보기 싫고, 읽기도 나쁘다. text-wrap이 이 문제를 다룬다.

/* 제목: 줄 길이를 고르게 */
h1, h2, h3, .card-title {
  text-wrap: balance;
}

/* 본문: 마지막 줄에 단어 하나만 남는 것 방지 */
p, li {
  text-wrap: pretty;
}

/* 주의: balance 는 계산 비용 때문에 브라우저가 줄 수를 제한한다.
   긴 본문 전체에 balance 를 거는 것은 의미가 없다. */

한글은 단어 단위 줄바꿈 규칙이 라틴과 달라서, word-break: keep-all과 함께 쓸 때 결과가 좋다. 어절 중간에서 끊기지 않게 하고, 그 위에 균형 잡힌 줄바꿈을 얹는 조합이다.

/* 한글 제목 조합 */
.title-ko {
  word-break: keep-all;     /* 어절 단위 유지 */
  text-wrap: balance;       /* 줄 길이 균형 */
  overflow-wrap: anywhere;  /* 아주 긴 단어(URL 등)는 예외적으로 끊기 */
}

폰트 폴백 시 레이아웃 흔들림 줄이기

웹폰트가 로드되기 전에는 대체 폰트로 표시되고, 로드된 뒤 교체되면서 레이아웃이 흔들린다(CLS). 두 폰트의 metric이 다르기 때문이다. size-adjust와 관련 디스크립터로 대체 폰트를 실제 폰트에 맞춰 보정할 수 있다.

/* 실제 웹폰트 */
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* 대체 폰트를 실제 폰트 metric 에 맞춰 보정 */
@font-face {
  font-family: 'Pretendard Fallback';
  src: local('Apple SD Gothic Neo'), local('Malgun Gothic');
  size-adjust: 100%;          /* 글자 크기 비율 보정 */
  ascent-override: 92%;       /* 위 여백 보정 */
  descent-override: 24%;      /* 아래 여백 보정 */
  line-gap-override: 0%;
}

body {
  font-family: 'Pretendard', 'Pretendard Fallback', sans-serif;
}

보정 값은 폰트마다 다르므로 실측이 필요하다. 개발자 도구에서 두 폰트로 같은 문단을 렌더링해 높이를 비교하며 맞춘다. 수고스럽지만 한 번 해 두면 폰트 교체 시 레이아웃 점프가 거의 사라진다.

읽기 좋은 본문을 위한 기본값

/* 표에서 숫자가 흔들리지 않게 */
.data-table td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 본문 기본 골격 */
.prose {
  max-width: 65ch;
  line-height: 1.8;
  font-size: 1rem;
  word-break: keep-all;
  text-wrap: pretty;
}
.prose h2 { line-height: 1.3; text-wrap: balance; text-box-trim: trim-both; }
.prose p + p { margin-top: 1.25em; }

점진적 적용 전략

새 기능은 지원 브라우저에서만 동작하면 되는 성격이라 적용이 쉽다. 지원하지 않는 브라우저에서는 기존과 똑같이 보일 뿐, 깨지지 않는다. 다만 text-box-trim처럼 여백 계산이 달라지는 속성은 마이너스 마진 같은 기존 우회 코드와 충돌할 수 있으니, 도입할 때 그 우회 코드를 함께 제거해야 한다.

/* 지원 여부에 따라 분기하고 싶다면 */
@supports (text-box-trim: trim-both) {
  h2 { text-box-trim: trim-both; text-box-edge: cap alphabetic; margin-top: 0; }
}
@supports not (text-box-trim: trim-both) {
  h2 { margin-top: -6px; }   /* 기존 우회 유지 */
}

자주 묻는 질문

text-box-trim은 무엇을 해결하나요?

행 높이 때문에 텍스트 위아래에 생기는 하프 리딩 여백을 제거해, 글자의 시각적 경계를 기준으로 간격을 잡을 수 있게 합니다. 디자인 시안의 간격 값과 구현 결과가 어긋나는 문제를 마이너스 마진 없이 해결합니다.

text-wrap의 balance와 pretty는 어떻게 다른가요?

balance는 여러 줄의 길이를 고르게 나눠 제목처럼 짧은 텍스트에 적합하고, pretty는 마지막 줄에 단어 하나만 남는 상황을 줄이는 데 초점이 있어 긴 본문에 적합합니다. balance는 계산 비용 때문에 적용 줄 수에 제한이 있습니다.

한글에서도 잘 동작하나요?

text-wrap은 word-break: keep-all과 함께 쓰면 어절 단위 유지와 줄 균형을 동시에 얻을 수 있어 효과적입니다. text-box-edge의 cap 기준은 대문자 개념에 기반하므로, 한글 폰트에서는 실제 렌더링을 눈으로 확인해 값을 조정하는 것이 좋습니다.

웹폰트 교체 시 레이아웃이 흔들리는 문제는 어떻게 줄이나요?

대체 폰트를 @font-face로 정의하고 size-adjust, ascent-override, descent-override로 실제 폰트의 metric에 맞춰 보정하세요. 값은 폰트마다 다르므로 같은 문단을 두 폰트로 렌더링해 높이를 비교하며 실측해야 합니다.

지원하지 않는 브라우저에서는 어떻게 되나요?

해당 속성이 무시되어 기존과 동일하게 표시되며 레이아웃이 깨지지는 않습니다. 다만 마이너스 마진 같은 기존 우회 코드가 남아 있으면 지원 브라우저에서 간격이 과하게 좁아질 수 있으니, @supports로 분기하거나 우회 코드를 함께 정리하세요.

본문 한 줄 길이는 어떻게 정하나요?

읽기 편한 범위는 대략 45~75자이며 CSS에서는 max-width를 ch 단위로 지정하면 폰트 크기 변화에 따라 함께 조정됩니다. 한글은 글자 폭이 넓어 같은 ch 값에서도 라틴보다 짧게 보이므로 실제 화면에서 확인해 조정하세요.