수직 리듬과 행간·행폭
line-height 1.5 규칙, 최적 행폭 45~75자 — 읽기 편안한 텍스트 레이아웃의 과학.
글자 크기를 잘 잡아도 줄 간격이 답답하거나 한 줄이 너무 길면 읽기 힘들다. 수직 리듬은 텍스트의 '호흡'을 만들어 장시간 읽어도 피로하지 않은 화면을 설계하는 기술이다.
행간(Line Height)은 한 줄의 베이스라인에서 다음 줄의 베이스라인까지의 거리다. CSS에서는 `line-height`로 설정하며, 글자 크기의 배수로 표현한다. 본문 텍스트의 최적 행간은 1.4~1.6배이며, 1.5배가 가장 보편적인 기본값이다.
| 요소 | 권장 범위 | 근거 |
|---|---|---|
| 본문 행간 | 1.4 ~ 1.6 | 너무 좁으면 답답, 너무 넓으면 줄 추적 어려움 |
| 제목 행간 | 1.1 ~ 1.3 | 제목은 짧으므로 촘촘해도 가독성 유지 |
| 최적 행폭 | 45 ~ 75자 (한글 22~38자) | 80자 이상이면 눈이 다음 줄 시작점을 놓침 |
| 문단 간격 | 행간의 0.5 ~ 1배 | 문단 구분이 명확하되 과하지 않게 |
행폭(Measure)은 한 줄에 들어가는 글자 수다. 로버트 브링허스트의 고전 《타이포그래피의 원리》에서는 45~75자(영문 기준)를 이상적 행폭으로 제시한다. 한글은 글자당 폭이 넓으므로 22~38자 정도가 적절하다. CSS에서는 `max-width: 65ch`처럼 ch 단위로 제한하면 서체에 상관없이 일관된 행폭을 유지할 수 있다.
수직 리듬(Vertical Rhythm)이란 페이지의 모든 텍스트 요소가 동일한 기준선 격자(Baseline Grid) 위에 정렬되는 것이다. 행간을 24px로 정했다면, 제목·본문·캡션·여백 모두 24px의 배수로 간격을 맞춘다. 마치 모눈종이 위에 글을 쓰는 것처럼, 보이지 않는 격자가 화면 전체에 질서를 부여한다.
빠른 점검법 — 현재 프로젝트의 본문 텍스트를 10줄 이상 읽어보자. (1) 줄이 답답하게 붙어 있으면 line-height를 올린다. (2) 한 줄이 화면 끝까지 이어지면 max-width를 65ch로 제한한다. (3) 제목과 본문 사이 간격이 들쑥날쑥하면 spacing을 행간의 배수로 통일한다. 이 세 가지만 잡아도 읽기 편안함이 극적으로 개선된다.