Design Atlas
한국어
Aa Typography

Vertical rhythm

수직 리듬

Headings, body text, and spacing all moving in multiples of one base unit (usually the leading value), giving the whole page a regular vertical beat.

Also known as: 버티컬 리듬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);

If body `line-height` is 28px, headings above and below it — their `margin`, their own `line-height` — and section spacing all become multiples of 28px (28, 56, 84…). Different elements' baselines then land on the same invisible grid, so the rhythm doesn't break as the page scrolls.

The idea comes from print typesetting. On the web, each font's actual rendered metrics differ slightly, making a perfect match hard — in practice, teams approximate it by basing `line-height` values on a base spacing unit like `8px`.

Keeping a design system's spacing tokens (4px, 8px, 16px, 24px…) and its type scale on the same base unit keeps typography and layout spacing from drifting apart.

When to use

Use it as the baseline when designing spacing tokens and a type scale together. Aim for "mostly doesn't drift," not pixel-perfect alignment — that's enough in practice.