Spacing & rhythm
The vertical flow most developers never adjust
Right typeface, right size, right measure, still feels wrong. The problem is spacing.
Paragraph separation
A new paragraph needs either a blank line or a first-line indent. Never both.
Books use indents. Websites use line breaks. Web readers skim rather than read sequentially, so line breaks work better on screen.
Line breaks (web default)
One line of space.
Indents (longform / editorial)
The first paragraph never gets an indent. Use p + p.
Letterspacing: the default rule
For body text: leave it alone. The type designer already set the spacing.
When to add letterspacing
- Uppercase text. Capitals need extra air. Add 0.05–0.15 em.
- Tiny text (10px and below). A hint of tracking helps legibility.
- Large display headlines. At 72px, body spacing feels too open. Tighten with
letter-spacing: -0.02em.
When not to add letterspacing
- Body text in mixed case. Don't.
- Monospaced fonts. Tracking breaks the grid.
- Connected scripts (handwriting, Arabic, Devanagari). Tracking breaks the joins.
- Justified text to fill a line.
Subhead proximity
Aim for a 3:1 to 5:1 ratio of top margin to bottom margin on subheads. Equal spacing is the most common spacing error in first drafts.
Vertical rhythm
Set line-height first, then derive paragraph spacing from it. A paragraph margin of one line-height produces even vertical rhythm. Baseline-grid alignment is impractical on the web. Prioritise consistent feel over mathematical purity.
Padding and margins
- Column gutters. Wide enough that the eye doesn't jump to the adjacent column.
- Outer margins. At least 16px of horizontal padding on mobile.
- Thumb space. Interactive text needs enough padding to be tappable.
Two to four sentences per paragraph. Shorter paragraphs invite scanning. Longer ones stall it.