Skip to content
UX Atlas
UI foundationCraft conventionIntermediate

Rhythm

Repeating spacing intervals create a pulse that makes long pages feel ordered.

Definition

Rhythm is the pattern created by repeating intervals of space and size. Vertical rhythm specifically refers to consistent spacing between blocks of text, often based on a baseline unit derived from the body line height.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Vertical rhythm in practice
  3. Establishing rhythm
  4. In practice
  5. Continue from here

Vertical rhythm in practice

A strict baseline grid, where every text baseline lands on a fixed interval, is difficult to maintain on the web because line heights, images and components rarely divide evenly. Most teams use a softer version: all vertical spacing comes from a single scale, and heading margins are set so the total block height stays on the scale.

The perceptible benefit comes from consistency of intervals, not from every baseline aligning. Aim for the first and accept the second where it falls out naturally.

Establishing rhythm

  • Pick a base unit, commonly 4px or 8px, and derive every vertical value from it.
  • Set heading spacing so the space above is roughly twice the space below, binding headings to their content.
  • Keep paragraph spacing consistent throughout a document.
  • Give repeating list items and cards identical vertical padding.
  • Allow deliberate breaks in rhythm to mark major transitions, which only reads as intentional if the rhythm is otherwise strict.

In practice

Article rhythm

Long-form content

Consistent intervals between paragraphs, headings and figures make a long article feel navigable. Irregular intervals make the same content feel disorganised even when it is well written.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Related concept

Connected closely enough to change how you apply this.