행간 배율 역산하는 법, CPL부터 구해야 이유가 보인다

"행간은 1.5~1.75 사이가 적당하다"는 말을 한 번쯤 읽어봤을 거다. 틀린 말은 아닌데, 막상 16px 폰트로 600px 컨테이너를 작업하는 상황에선 그 범위가 어디에 해당하는지 알기 어렵다. 같은 1.5 배율인데도 좁은 컬럼에선 넉넉해 보이고 넓은 영역에선 답답하게 읽히는 게 이 때문이다.

핵심은 폰트 크기 하나만 보지 않는 것이다. 한 줄에 몇 글자가 들어가느냐가 함께 결정돼야 행간의 적정 배율도 좁혀진다. CPL(Characters Per Line)을 먼저 구하고, 그 구간에 따라 배율을 찾고, 한글 특성에 맞게 보정하는 순서다. 이 흐름을 직접 계산해보면 어떤 컨테이너 사이즈에서도 시작점을 빠르게 잡을 수 있다.

1단계, 내 컨테이너의 CPL 구하기

CPL이란 본문 한 줄에 들어가는 글자 수다. 행간과 CPL은 생각보다 직접적으로 연결돼 있다. 줄이 길면 눈이 다음 줄 시작점으로 이동할 때 실수하기 쉬워지고, 행간이 좁으면 그 오류가 더 잦아진다.

계산식은 간단하다.

CPL ≈ 컨테이너 너비(px) ÷ 폰트 크기(px)

여기서 "컨테이너 너비"는 padding을 뺀 실제 텍스트 영역이다. 자기 숫자를 넣어보자.

• 자신의 컨테이너 너비(px)를 확인한다
• 사용 중인 본문 폰트 크기(px)를 확인한다
• 두 값을 나눈다

예시로 계산하면 600 ÷ 16 = 37.5, 한 줄에 약 37~38글자다.

한글은 영문과 달리 모든 글자가 정방형 em-box를 거의 꽉 채운다. 영문 소문자는 평균 너비가 em의 절반 수준이라 같은 공식을 쓰면 CPL이 두 배 가까이 나오지만, 한글에서는 이 공식이 실제 글자 수와 잘 맞는다. 더 정확하게 확인하고 싶다면 브라우저 개발자 도구에서 실제 문장을 단락에 넣고 한 줄을 직접 세는 방법이 가장 확실하다.

2단계, CPL 구간으로 배율 범위 좁히기

CPL이 나왔으면 그 숫자가 어느 구간에 떨어지는지 확인한다. 아래 기준은 타이포그래피 자료(pimpmytype.com)와 W3C WCAG 1.4.12 접근성 기준을 참고했다.

• CPL 20 이하 (좁은 단): 영문 기준 배율 1.3~1.4
• CPL 21~35 (좁은 본문): 영문 기준 배율 1.4~1.5
• CPL 36~55 (표준 본문): 영문 기준 배율 1.5~1.6
• CPL 56~75 (넓은 본문): 영문 기준 배율 1.6~1.7
• CPL 75 초과: 배율 1.7 이상, 레이아웃 재검토 권장

줄이 길수록 배율을 올리고, 짧을수록 낮춘다는 원리다. CPL 37 예시는 36~55 구간에 해당하니 시작 범위가 1.5~1.6이다. WCAG 2.1 기준(SC 1.4.12)은 웹 접근성을 위해 line-height를 폰트 크기의 최소 1.5배 이상으로 요구한다. 어떤 CPL 구간이든 이 최솟값 아래로는 내려가지 않는 게 원칙이다.

3단계, em-box 특성에 맞춰 보정값 빼기

영문 타이포그래피 가이드는 라틴 폰트를 기준으로 만들어졌다. 영문 소문자에는 어센더(d, b의 위쪽 획)와 디센더(p, g의 아래쪽 획)가 있어 행간이 좁으면 위아래 줄의 획이 시각적으로 맞닿아 보인다. 그래서 영문은 상대적으로 넓은 행간이 필요하다.

한글은 초성·중성·종성이 정방형 em-box 안에 고르게 배분된다. 박스를 크게 벗어나는 획이 없어서 영문 기준을 그대로 쓰면 행간이 과잉되는 경우가 생긴다.

보정 공식은 이렇다.

내 배율 = (2단계 영문 기준 배율) - 0.1 ~ 0.15

2단계에서 나온 범위의 하단 값에 이 보정을 적용한다. 단, 결과가 1.5 아래로 내려가면 1.5로 고정한다.

CPL 37 예시에 그대로 넣어보면: 영문 기준 하단 1.5에서 0.1을 빼면 1.4, WCAG 최솟값 1.5를 지켜야 하므로 실질적인 시작점은 1.5다. 상단인 1.6에서 보정하면 1.5가 나오니 이 예시는 1.5로 수렴한다.

4단계, CSS에 쓰고 눈으로 검토하기

배율이 정해졌으면 CSS에는 단위 없는 숫자로 쓰는 게 기본이다.

body {
  font-size: 16px;
  line-height: 1.5;
}

em이나 px으로 쓰면 자식 요소에 상속될 때 문제가 생긴다. line-height: 24px로 고정하면 자식 요소의 폰트 크기가 달라져도 줄 높이가 24px에 묶인다. 반면 단위 없는 1.5는 자식이 각자 자신의 폰트 크기를 기준으로 계산하기 때문에 계층 전체에서 비율이 유지된다.

수치를 적용한 뒤에는 브라우저에서 실제 본문 단락 3~4개를 렌더링해 확인한다. 줄을 놓치지 않고 다음 줄 시작점을 자연스럽게 찾을 수 있으면 적합하다. 단락이 여러 조각으로 쪼개진 것처럼 느슨하게 보이면 0.05씩 줄여가며 다시 본다.

폰트마다 기본 행간 메트릭이 다르기 때문에, 폰트를 바꿀 때는 같은 배율이라도 실제 공백이 달라 보일 수 있다. 본문용 폰트를 아직 고르는 단계라면 폰트비 AI 폰트 찾기에서 조건을 입력해 후보를 추려보자. 폰트를 먼저 확정하고 행간을 맞추는 쪽이 훨씬 수월하다 🙂

반응형일 때, 너비가 바뀌면 처음부터 다시

반응형 레이아웃에서는 화면 너비가 바뀌면 CPL도 달라지니 1단계부터 다시 계산해야 한다.

모바일 너비 380px에 16px 폰트라면 CPL = 380 ÷ 16 = 23.75, 약 24다. CPL 24는 21~35 구간이니 영문 기준 1.4~1.5, 보정 후 1.35~1.45가 나온다. WCAG 최솟값 1.5를 지켜야 하므로 모바일에서도 1.5를 유지하거나, 폰트 크기를 조금 줄여 CPL을 높이는 방향을 검토하면 된다.

브레이크포인트마다 CPL이 크게 달라진다면 미디어쿼리로 line-height를 분기하는 것도 방법이다. 다만 대부분의 경우 1.5를 유지하는 것만으로 WCAG 기준을 충족하면서 가독성을 잡을 수 있다.

---

정리하면 계산 순서는 네 단계다.

1. 컨테이너 너비 ÷ 폰트 크기로 CPL을 구한다
2. CPL 구간에서 영문 기준 배율 범위를 확인한다
3. em-box 보정(−0.1~0.15)을 적용하되 1.5 아래로는 내리지 않는다
4. CSS에 단위 없는 숫자로 넣고 브라우저에서 눈으로 검토한다

폰트를 교체하거나 레이아웃이 바뀔 때마다 같은 순서를 다시 밟으면 된다.