Vertical Rhythm: A Formula for Consistent Spacing

Why it exists

To solve the problem of inconsistent, visually noisy layouts. Without a system, designers often use intuitive but arbitrary spacing, leading to text where paragraphs, headings, and lists feel disconnected and hard to read, turning the content into an indistinguishable block.

The mental model

Think of vertical rhythm as a musical beat for your page layout. Instead of guessing at spacing, you establish a single, foundational spacing unit—like a quarter note—and use it and its multiples consistently for every element on the page. This creates a predictable, harmonious flow that makes content comfortable to read.

How it works

The system is built from the body text's line height. First, establish a comfortable line height for your main text, typically around 1.6 times the font size. Second, calculate your base spacing unit by dividing this line height value (in pixels) by 1.5. Third, apply this base unit as the space between paragraphs, between a paragraph and a list or image, and directly after headings. Fourth, to create separation for new sections, use a larger multiple (e.g., 3x the base unit) for the space before a heading. For headings themselves, use a tighter line height, around 1.2, to keep multi-line headings cohesive.

When to use it

Apply this system in any content-heavy layout, such as blogs, articles, documentation, or marketing pages. It is especially critical in design systems to enforce consistency across many pages and components built by different teams. It ensures a baseline of quality and readability.

When not to use it

While the principles are broadly applicable, a rigid mathematical system might be overkill for highly artistic or sparse layouts where the "rules" are intentionally broken for effect. It's primarily for structured, readable content, not abstract digital art.

One canonical example

For body text with a font size of 16px and a line-height multiplier of 1.6, the calculated line height is 25.6px. Your base spacing unit is 25.6px / 1.5, which is ~17px. Therefore: space between paragraphs is 17px; space after a heading is 17px; space before a heading is 3 * 17px = 51px. All vertical space is now a multiple of a single, calculated value.