베이스라인 그리드와 수직 리듬
텍스트 행간과 그리드를 정렬하여 페이지 전체에 '호흡'을 만드는 기법.
수평 그리드(컬럼)만 신경 쓰고 수직 그리드(행간)를 무시하면 텍스트가 들쭉날쭉하게 보인다. 베이스라인 그리드를 적용하면 다단 레이아웃에서도 텍스트가 수평으로 정렬되어 프로페셔널한 인상을 준다.
베이스라인 그리드(Baseline Grid)는 인쇄 디자인에서 온 개념이다. 텍스트의 기준선(baseline)을 일정한 간격으로 정렬하는 보이지 않는 수평선 모음이다. 잡지를 펼쳤을 때 왼쪽 단과 오른쪽 단의 텍스트 줄이 정확히 같은 높이에 있는 것이 바로 베이스라인 그리드 덕분이다.
수직 리듬(Vertical Rhythm)이란, 텍스트의 행간(line-height)과 요소 간 간격(margin/padding)을 모두 같은 기본 단위의 배수로 맞추는 것이다. 기본 단위가 8px이면, 행간은 24px(8x3), 문단 간격은 16px(8x2), 섹션 간격은 32px(8x4)처럼 설정한다.
| 요소 | 폰트 크기 | 행간(line-height) | 8px 그리드 정렬 |
|---|---|---|---|
| 본문 | 16px | 24px (1.5) | 24 = 8 x 3 |
| 소제목 | 20px | 32px (1.6) | 32 = 8 x 4 |
| 대제목 | 32px | 40px (1.25) | 40 = 8 x 5 |
| 캡션 | 12px | 16px (1.33) | 16 = 8 x 2 |
웹에서 완벽한 베이스라인 정렬은 인쇄만큼 쉽지 않다. CSS의 `line-height`는 텍스트 위아래로 균등하게 공간을 배분하기 때문에 baseline이 정확히 그리드에 안착하지 않을 수 있다. 하지만 행간과 간격을 8px 배수로 통일하는 것만으로도 수직 리듬의 80%는 달성된다.
수직 리듬의 시각적 효과 — ① 페이지 전체에 호흡감이 생긴다 — 빽빽하지도, 허전하지도 않은 리듬 ② 다단 레이아웃에서 좌우 텍스트가 수평 정렬되어 깔끔하다 ③ 스크롤할 때 예측 가능한 간격이 반복되어 시각적 안정감을 준다 ④ 디자이너와 개발자가 '행간 얼마, 간격 얼마'를 숫자 하나로 소통할 수 있다