Typography & text
Line height math (body)
Body text needs a line-height near 1.5x its size. Tighter and the eye loses its place on the return sweep; looser and the paragraph reads as separate stripes.
Size: 16px / Line-height: 24px
Size: 16px / Line-height: 18px
How to apply it
- 1
Set body text line-height to roughly 1.5x size: 16px text gets 24px line-height.
- 2
Never compress below 1.2x for paragraph-length copy.
- 3
Test with real multi-line paragraphs, not single lines.
- 4
Adjust slightly narrower for wide columns, slightly looser for narrow ones.
Why it works
During reading, the eye jumps in saccades along a line then sweeps back down-left to find the next line. That return sweep needs enough vertical gap to land on the correct row without ambiguity. A ratio near 1.5x, 24px leading for 16px text, gives that gap without severing the visual connection between lines.
What breaks
Cramped body text at 18px leading on 16px type causes readers to lose their place on the return sweep, re-reading lines or skipping them. Paragraphs feel dense and tiring past a few lines.
Review questions
- 1
Is body line-height roughly 1.5x the font size?
- 2
Can you track from the end of one line to the start of the next without losing your place?
- 3
Does dense paragraph text avoid feeling cramped?