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 plate
Reach for this when
- Setting up spacing tokens.
- Designing long-form or documentation layouts.
- Long-form or content-heavy pages that read as uneven without any single element being wrong.
Common mistakes
- Chasing a strict baseline grid at high cost for little perceptual gain.
- Ad hoc margins that break the interval pattern.
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.
Keeping a vertical rhythm that survives real content
Do
- Derive every vertical space from one scale, so repeated patterns fall on the same intervals.
- Let headings take space from above rather than adding it below.
- Collapse adjacent margins deliberately rather than discovering the collapse later.
Do not
- Chase a strict baseline grid in an interface with mixed components and images.
- Set a one-off margin to fix a single case, which is how rhythm decays.
- Expect rhythm to survive if line heights are set per component.
In practice
- i.
Article rhythm
Long-form contentConsistent 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.
- ii.
The article that lost its rhythm at the image
Where it breaksText spaced on a consistent interval, then a figure with its own margins, and everything below sits half a step out. Images and embeds are where vertical rhythm is usually lost, and where a rule for them pays.
Local chart
FND·017 · Region II · Grid D2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
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.
- Design TokensSYS·001 · Design system
- Line HeightFND·034 · UI foundation
- ProportionFND·013 · UI foundation
- RepetitionFND·010 · UI foundation
- Spacing SystemsFND·042 · UI foundation
- Typographic HierarchyFND·032 · UI foundation
- WhitespaceFND·015 · UI foundation