Vertical rhythm: the baseline grid debate, settled pragmatically

Print designers hand-align text to a baseline grid; web teams argue about whether to bother. Here is the pragmatic version that keeps the benefits without the ritual.

What rhythm actually buys

Consistent vertical spacing makes pages feel composed instead of assembled. The mechanism: every vertical dimension (line-height, margins, paddings) is a multiple of a base unit (traditionally the body line-height). Eyes detect the regularity as "this looks designed."

The strict-grid era and why it died

Perfect baseline alignment (every line of every paragraph on the same invisible grid) requires the old hacks: fixed line-heights everywhere, line-height: 24px with 12px bodies, translation hacks to snap headings. The cost: rem units broke, user font-size preferences broke, and maintenance was misery. Strict grids died because they fought the platform.

The pragmatic rhythm that survived

  1. Pick a base unit from the type scale (e.g., 4px or the body line-height).
  2. Make all spacing tokens multiples of it - which your design tokens should be anyway (4px scale).
  3. Match line-height to the scale: body 24px = 6 units; h2 32px line-height = 8 units.
  4. Margins between blocks: multiples of the unit, with a deliberate jump (paragraph = 1 unit, section = 2-3 units).

Result: 90% of the visual benefit, none of the hacks. When someone proposes pixel-perfect baseline alignment in 2026, ask how they handle dynamic content and user zoom.

Where rhythm visibly breaks

  • Mixed components: a card's internal spacing not on the scale makes the whole grid feel off
  • Line-height as a unit: margin: 1.5 (unitless line-height as margin) is a category error that quietly accumulates drift
  • Localization: German and Japanese text reflow differently; strict vertical positions break while unit-based spacing survives

The verification habit

Rhythm bugs are visible in screenshots: sections that "almost" align. Typography audits catch a related silent failure here - when the rendered font differs from the token (a substitution changes metrics), every computed rhythm shifts slightly. Verify what renders: on-device screenshot identification (Typeye - runs fully local) names the actual typeface in seconds.

Rhythm is a token discipline now, not a grid ritual. Put the scale in the tokens and the spacing multiples follow for free.