Line-height is the single most impactful CSS property for text readability, yet it is routinely set by guesswork. This calculator converts any CSS line-height unit to all the others, reveals the underlying leading and half-leading in pixels, checks the ratio against WCAG and typographic guidelines, and suggests an ideal ratio for your column width — all in real time, entirely in your browser.
How line-height works
A CSS line box is the vertical container for one line of text. Its height is determined by the
line-height property, which CSS allows you to express in five ways:
- unitless (e.g.
1.5) — multiplied by the element font size at the point of inheritance - px (e.g.
24px) — a fixed pixel height - em (e.g.
1.5em) — relative to the current element’s font size (resolves to px before inheritance) - rem (e.g.
1.5rem) — relative to the root element’s font size - % (e.g.
150%) — percentage of the current font size (also resolves to px before inheritance)
The core formula is:
line box (px) = unitless ratio (times) font size (px)
All other units collapse to this once resolved. Knowing the pixel line box lets you derive leading — the extra vertical space beyond the cap-height — and half-leading, the portion the browser inserts above and below each line.
Leading and half-leading explained
Metal-type compositors inserted thin strips of lead between lines of moveable type to add vertical spacing. In CSS the equivalent is:
leading (px) = line box (px) (minus) cap-height (px)
Cap-height is the height of a capital letter, approximately 72% of the font size for most Latin typefaces (the exact value varies by face, but 72% is the accepted practical approximation used by browser rendering engines and CSS working group notes). The browser then splits the leading symmetrically:
half-leading (px) = leading (px) / 2
Half the leading appears above the first character on the line; half appears below the last.
This is why a line box with line-height: 1 and a positive font-size still renders with
a small gap — the half-leading from the descenders of the line above and the ascenders of
the line below are already baked in.
Worked example
Suppose a paragraph with font-size: 18px and line-height: 1.6:
| Quantity | Calculation | Result |
|---|---|---|
| Line box | 18 (times) 1.6 | 28.8 px |
| Cap-height (approx) | 18 (times) 0.72 | 12.96 px |
| Leading | 28.8 (minus) 12.96 | 15.84 px |
| Half-leading | 15.84 / 2 | 7.92 px |
Now convert line-height: 1.6 to rem (root font size 16px):
28.8 px / 16 = 1.8 rem. You can use that value in a design token or Figma spacing variable.
WCAG guidance
WCAG 2.1 SC 1.4.12 (Text Spacing, Level AA) states that users must be able to increase line-height to at least 1.5 times the font size without loss of content or functionality. This means your layout must not break when users or browser extensions push the line-height to 1.5; it does not mean 1.5 is the only acceptable default.
WCAG 1.4.8 (Visual Presentation, Level AAA) recommends line spacing of at least 1.5 within paragraphs as the default. For headings the same criterion recommends tighter spacing, typically 1.1–1.3, because heading size already introduces visual hierarchy.
The Bringhurst measure rule
Robert Bringhurst’s The Elements of Typographic Style establishes that an ideal line length for body text is 45–75 characters (the “measure”). Lines outside this range need compensating line-height adjustments:
- Narrow columns (under 45 chars/line) → reduce leading to avoid excessive whitespace
- Wide columns (over 75 chars/line) → increase leading so the eye can track back to the line start without losing its place
The calculator implements a linear approximation of this rule: a base ratio of 1.45 plus 0.003 per character above 65, clamped between 1.1 and 2.0.