디자인 시안에서는 멀쩡하던 본문이 실제 화면에서 유난히 답답해 보이는 경험이 있으실 겁니다. 폰트를 바꿔도, 색을 연하게 해도 잘 나아지지 않습니다. 원인이 대체로 한 곳에 있습니다 — 행간입니다.
대부분의 CSS 프레임워크와 테마가 본문 행간으로 1.5 안팎을 씁니다. 이 값이 틀린 값은 아닙니다. 다만 라틴 알파벳을 기준으로 정해진 값이고, 한글은 그 기준에서 두 가지가 다릅니다.
한글 글자 하나에 들어 있는 것
첫째, 획 밀도입니다. 라틴 알파벳은 글자 하나가 획 몇 개로 이루어집니다. 반면 한글은 초성 · 중성 · 종성이라는 자모 두세 개가 글자 한 칸 안에 조립됩니다. 같은 폰트 크기라면 같은 넓이 안에 훨씬 많은 선이 들어간다는 뜻이고, 글자 안쪽의 흰 공간이 그만큼 줄어듭니다. 눈이 글자를 구분하는 데 쓰는 여백이 줄었으니, 바깥 여백인 행간이 그만큼 더 필요합니다.
둘째, 받침입니다. 라틴 소문자는 대부분 x-height 안에서 끝나고 g · p · y 정도만 아래로 내려갑니다. 한글은 받침이 있는 글자와 없는 글자가 섞여 한 줄 안에서 글자의 실제 높이가 계속 달라집니다. 결과적으로 한 줄이 차지하는 세로 폭이 라틴보다 크고, 같은 행간에서 윗줄의 받침과 아랫줄의 글자가 더 가까워 보입니다.
어디에 어떤 값을 주나
출발점으로 삼을 만한 값은 이렇습니다. 장문 본문은 1.7 이상, 아티클처럼 오래 읽는 화면이면 1.8~1.9까지 올려도 좋습니다. 제목은 1.35 안팎입니다 — 흔한 기본값 1.2는 라틴 대문자 기준이라 두 줄짜리 한글 제목에서 행이 붙어 보입니다. 반대로 버튼 · 배지 · 표의 짧은 라벨은 한 줄이므로 1.2~1.3으로 낮춰야 요소 높이가 불필요하게 커지지 않습니다.
:root {
--leading-tight: 1.35; /* 제목 */
--leading-normal: 1.7; /* 본문 */
--leading-relaxed: 1.9; /* 장문 아티클 */
}
body { line-height: var(--leading-normal); }
h1, h2, h3, h4 { line-height: var(--leading-tight); }
.button, .badge { line-height: 1.25; }
article p { line-height: var(--leading-relaxed); }값에 단위를 붙이지 않는 것이 중요합니다. line-height: 1.7은 각 요소가 자기 글자 크기에 곱해서 쓰는 비율로 상속되지만, line-height: 27px처럼 단위를 붙이면 계산된 픽셀값이 그대로 상속됩니다. 그러면 본문 안의 작은 캡션이나 큰 인용문에서 행간이 어긋나고, 그 원인을 찾기가 대단히 번거롭습니다.
행간만 올린다고 끝나지 않습니다
행간은 혼자 작동하지 않습니다. 함께 봐야 할 것이 셋 있습니다.
한 줄의 길이가 첫 번째입니다. 줄이 길수록 눈이 다음 줄의 시작을 찾기 어려워지므로 더 큰 행간이 필요합니다. 거꾸로 줄이 짧으면 1.7도 과해 보입니다. 이 관계는 연재 마지막 회차에서 측정폭과 함께 다룹니다.
자간이 두 번째입니다. 한글 본문에 letter-spacing을 음수로 주는 습관이 꽤 퍼져 있는데, 이미 획이 촘촘한 글자를 더 붙이는 일이라 본문에서는 대체로 손해입니다. 자간을 조이는 것은 큰 제목처럼 글자가 커서 사이가 벌어져 보이는 곳에만 쓰는 편이 좋습니다.
본문 색이 세 번째입니다. 연한 회색 본문은 시안에서 세련돼 보이지만, 대비가 낮아지면 같은 행간에서도 글줄이 뭉개져 보입니다. 대비를 충분히 확보한 뒤에 행간을 판단하세요.
테마 기본값을 어디까지 덮어써야 하는지는 테마 · 플러그인 아카이브에 더 정리돼 있고, 운영 중인 사이트의 타이포그래피 · 성능 · 접근성 점수를 한 번에 손보고 싶다면 최적화 지원 사업에 그 작업이 포함됩니다.
다음 회차
행간을 정했으면 그 행간이 곱해질 글자 크기가 남습니다. 다음 회차는 본문 16px이 왜 기준선인지, 그리고 한글에서 그 기준선을 언제 올려야 하는지를 다룹니다.