Line height for body text: set by measure and x-height, tighter for headings
Most web body text reads well with a line height between about 1.4 and 1.7, and 1.5 to 1.6 is a sensible starting point. Go higher for long lines and typefaces with a large x-height, lower for short lines and small, tight faces. Headings need much less, often 1.0 to 1.2, because their large size already creates space between lines.
What line height does
Line height (leading, in print, from the strips of lead typesetters placed between lines of metal type) is the vertical distance from one line of text to the next. It gives the eye a clear channel to follow along a line and back to the start of the next. Too little and lines feel crowded, ascenders and descenders nearly touch, and readers drift to the wrong line. Too much and the paragraph falls apart into separate strips, which also makes it harder to keep your place.
Choosing a value: three factors
- Line length
- Longer lines need more space between them, because the return sweep to the next line is longer. A 75-character measure might want 1.6; a 45-character phone column reads well at 1.45 to 1.5. See ideal line length for web.
- x-height
- Faces with a large x-height (the height of lowercase letters such as x) look bigger at the same font size and fill more of each line, so they need more leading. Small-x-height faces, often older-style serifs, can sit tighter.
- Size
- Small text such as captions often needs relatively more line height; very large text needs relatively less.
| Text role | Typical line height | Why |
|---|---|---|
| Body paragraphs | 1.5 to 1.7 | Comfortable tracking across a full measure |
| Lede or large intro text | 1.35 to 1.5 | Bigger size, usually shorter lines |
| Section headings (h2) | 1.05 to 1.25 | Large size; multi-line headings should read as one unit |
| Display headlines | 0.9 to 1.05 | Very large; tight leading looks deliberate |
| Buttons and labels | 1.1 to 1.3 | Usually one line; vertical padding does the spacing |
| Captions and small print | 1.4 to 1.6 | Small text needs room to stay legible |
Leading for headings
Headings that inherit body line height look loose: a 48px heading at 1.6 has almost 29px of extra space between its lines, so a two-line heading reads like two separate headings. Tighten it to around 1.05 to 1.15. At display sizes, 90px or more, values under 1.0 are common, but check descenders and accented capitals: letters such as “g” on one line can collide with an “É” on the next. Negative letter-spacing on large headings and tight leading usually go together.
Write it unitless
In CSS, set line-height: 1.6 rather than 1.6em or 26px. MDN's line-height reference recommends unitless values because they're inherited as a ratio: every child element computes its own line height from its own font size. With em or px, a child with larger text inherits the parent's fixed spacing, and lines overlap. Unitless values also scale correctly when people zoom or change their default text size.
What accessibility asks for
WCAG has two relevant criteria. At level AA, Text Spacing requires that nothing breaks when a user overrides spacing to a line height of 1.5 times the font size, paragraph spacing of 2 times, letter spacing of 0.12 times and word spacing of 0.16 times. That's about resilience: avoid fixed-height boxes that clip text when lines get taller. At level AAA, Visual Presentation asks for line spacing of at least 1.5 within paragraphs and paragraph spacing at least 1.5 times larger than the line spacing. Setting body text at 1.5 or more by default meets the spirit of both.
- Don't set fixed
heighton cards, buttons or text boxes; usemin-heightand padding. - Test by applying a text-spacing bookmarklet or user stylesheet and checking nothing is cut off.
- Keep paragraph spacing clearly larger than line spacing, so paragraphs read as units.
Line height in Anticode
Anticode's design systems set line height per text role, with unitless values. Body text is 1.6 in all seven systems, at sizes from 16.5px (Technical) to 19.5px (Luxury). Section headings are 1.05, pull quotes 1.2 and buttons 1.2. Hero headlines vary by system, matching each one's character: Brutalist's condensed capitals sit tightest at 0.9, Swiss at 0.95, Luxury at 0.98, Editorial and Playful at 1.0, and Technical and Organic at 1.02.
Buttons, inputs and time slots use minimum heights rather than fixed heights, so text that grows under a user's spacing settings doesn't get clipped. The Critic also checks that body text is at least 16px.
Questions people ask
Is 1.5 a good line height for body text?
Yes, it's a sound default. Increase towards 1.6 or 1.7 for long lines or large x-height faces, and test with your real font.
Should line height be unitless in CSS?
Yes. Unitless values are inherited as a ratio, so each element's spacing follows its own font size and zoom works correctly.
What line height should headings use?
Usually 1.05 to 1.2 for section headings and as tight as 0.9 to 1.0 for very large display text, checking that letters don't collide.
Sources
- line-height, MDN Web Docs, checked
- Understanding SC 1.4.12: Text Spacing, W3C, checked
- Understanding SC 1.4.8: Visual Presentation, W3C, checked