Vertikaler Rhythmus

Vertical rhythm is a typographic principle where all text elements align to a consistent baseline grid — a repeating unit derived from the body text line-height. Like music rhythm, it creates a visual regularity that makes pages feel organized and comfortable to read, even when readers can't consciously articulate why.

The concept comes from print typography, where a baseline grid was a physical tool. On the web, perfect baseline grid alignment is rarely achieved in practice, but pursuing vertical rhythm — even loosely — produces measurably better-feeling layouts.

Establishing the base unit:

:root {
  --base-font-size: 1rem;     /* 16px */
  --base-line-height: 1.5;    /* 24px */
  --rhythm-unit: calc(var(--base-font-size) * var(--base-line-height)); /* 24px */
}

body {
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
}

Spacing all elements in multiples of the rhythm unit:

p, ul, ol, blockquote {
  margin-block: var(--rhythm-unit); /* 24px top and bottom */
}

/* Headings: size up, but maintain rhythm */
h2 {
  font-size: 1.75rem;   /* 28px */
  line-height: 1.286;   /* 28px × 1.286 = 36px = 1.5 × 24px rhythm */
  margin-top: calc(var(--rhythm-unit) * 2);   /* 48px above */
  margin-bottom: var(--rhythm-unit);           /* 24px below */
}

h3 {
  font-size: 1.375rem;  /* 22px */
  line-height: 1.091;   /* 22px × 1.091 = 24px — stays on grid */
  margin-top: calc(var(--rhythm-unit) * 1.5);
  margin-bottom: calc(var(--rhythm-unit) * 0.5);
}

The key insight is that heading line-height must be adjusted so that the total line box height is a multiple of the rhythm unit. If the rhythm unit is 24px and a heading is 28px, you need a line-height that brings the line box to 36px (1.5× rhythm) or 48px (2× rhythm).

Practical approach — loose rhythm:

Strict mathematical baseline grid alignment breaks the moment you add images, borders, or variable content. Most production systems use "loose vertical rhythm" — spacing in multiples of the rhythm unit for margins and padding, without guaranteeing exact baseline alignment:

:root { --space: 1.5rem; } /* = line-height × base size */

section { padding-block: calc(var(--space) * 3); }
h2 { margin-bottom: var(--space); }
p + p { margin-top: var(--space); }

This creates visual regularity without the fragility of strict baseline alignment. Fonts with consistent metrics across weights help — Source Serif 4 and Source Sans 3 are designed with metric compatibility, making them easier to use in rhythm-based systems.