디자인 아틀라스
EN
Aa 타이포그래피

수직 리듬

Vertical rhythm

제목·본문·여백이 하나의 기준 단위(보통 리딩 값)의 배수로 움직여서, 페이지 전체 세로 흐름에 규칙적인 박자가 생기는 것.

다른 이름: 버티컬 리듬Baseline grid
···
html
<div class="stage">
  <div class="grid" id="grid">
    <h3>Vertical Rhythm</h3>
    <p>모든 텍스트의 baseline이 같은 격자에 맞춰집니다.</p>
    <p>제목·본문·여백이 기준 단위의 배수로 움직입니다.</p>
  </div>
  <div class="readout">baseline unit: <span id="unit">28px</span> · grid <span id="state">on</span></div>
</div>
css
.grid{width:min(92%,500px);background-image:repeating-linear-gradient(to bottom, color-mix(in srgb, var(--accent) 32%, transparent) 0 1px, transparent 1px 28px);transition:background-image .3s}
h3{margin:0;font:800 18px/28px system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;color:var(--fg)}
p{margin:0;font-size:12px;line-height:28px;font-family:-apple-system,system-ui,"Apple SD Gothic Neo",sans-serif;color:var(--fg)}
.readout{margin-top:14px;font:11px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}
js
const grid = document.getElementById('grid');
const state = document.getElementById('state');
const on = 'repeating-linear-gradient(to bottom, color-mix(in srgb, var(--accent) 32%, transparent) 0 1px, transparent 1px 28px)';
let visible = true;
setInterval(function(){
  visible = !visible;
  grid.style.backgroundImage = visible ? on : 'none';
  state.textContent = visible ? 'on' : 'off';
}, 1800);

본문 `line-height`가 예를 들어 28px이라면, 그 위아래 제목의 `margin`·`line-height`, 섹션 사이 여백도 28px의 배수(28, 56, 84…)로 맞춥니다. 그러면 서로 다른 요소들의 베이스라인이 보이지 않는 같은 격자 위에 놓여, 페이지를 스크롤할 때 리듬이 어긋나지 않습니다.

인쇄 조판에서 내려온 개념으로, 웹에서는 폰트마다 실제 렌더링 높이(폰트 메트릭)가 미묘하게 달라 완벽하게 맞추기 까다롭습니다. 실무에서는 `8px` 같은 기본 스페이싱 단위 위에 `line-height`를 그 배수로 세팅하는 정도로 근사해서 씁니다.

디자인 시스템의 스페이싱 토큰(4px, 8px, 16px, 24px…)과 타이포 스케일을 같은 기준 단위로 맞춰두면, 타이포와 레이아웃 스페이싱이 서로 어긋나지 않습니다.

언제 쓰나

디자인 시스템에서 스페이싱 토큰과 타입 스케일을 같이 설계할 때 기준으로 삼으세요. 완벽한 픽셀 정합보다는 "대체로 어긋나지 않는" 수준이면 충분합니다.