Line-height is the vertical gap from one line of text to the next, and picking a good one is most of what makes a block of text feel easy to read. Too tight and the lines collide; too loose and the words float apart and the eye loses its place. The “correct” value is not a constant — it depends on the font size, the length of each line (the measure), and whether you are setting body copy, a headline, or display type. This calculator applies the standard typographic heuristics to give you a sensible starting point.
Type a font size, pick a use case, and tell the calculator either how many characters are on each line or how wide the column is in pixels. The recommended unitless line-height and its pixel equivalent both update immediately, and a sample block shows what it actually looks like.
The formula
The calculator uses a simple per-use-case base value plus a measure-dependent adjustment:
Where the base value is:
- Body (1.5) — the workhorse, used for paragraphs.
- Small (1.45) — captions, fine print, small UI labels.
- Heading (1.15) — H1 through H4, and larger titles.
- Display (1.1) — very large type, hero text, poster-sized headlines.
And the adjustment factor $f$ is:
- 0.007 for body and small text — leading scales aggressively with line length because the eye has to track back to the start of the next line more often.
- 0.002 for headings and display type — leading barely moves, because large type has fewer lines and the leading matters less to reading rhythm.
The 66 character value is the traditional typographic sweet spot — the “most comfortable” measure that typographers have been advocating since metal type. Shorter measures need less leading (to avoid the text looking sparse); longer measures need more (to give the eye a clear vertical path). The result is clamped to the range $[1.0, 2.2]$ so extreme inputs can’t produce unusable suggestions.
Example: body text on a narrow column
A 16 px body text column 40 characters wide (a tight single-column blog post on a phone) wants approximately $1.5 + 0.007 \cdot (40 - 66) = 1.318$ for line-height. The calculator gives you that value unitless plus the pixel equivalent of about 21 px. Notice how the ratio is below 1.5 — short columns look cramped with 1.5 leading because the eye never has very far to track back, and the extra whitespace just fragments the paragraph.
Example: body text on a wide column
The same 16 px body text on a 90-character column (a generous desktop layout) wants $1.5 + 0.007 \cdot (90 - 66) = 1.668$, or about 26.7 px. Wider columns need more leading because the eye has further to go when tracking back to the start of the next line. At 1.5, wide columns look slightly crowded; at 1.66, they breathe properly.
Example: a display headline
A 72 px display headline at a 40-character width uses the display base of 1.1 with the tiny 0.002 factor: $1.1 + 0.002 \cdot (40 - 66) = 1.048$, which clamps to 1.1. Display type at 72 px with a line-height of 1.1 gives you roughly 79 px between baselines, which feels right for large type — the leading keeps pace with the size without making the headline look airy. If you’re still picking the display size itself, the type scale calculator gives you a modular hierarchy and the golden ratio typography calculator gives you a φ-based one.
Unitless vs pixel line-height
CSS accepts both, but unitless is almost always what you want:
/* Good — scales with inherited font-size */
body { font-size: 16px; line-height: 1.5; }
h1 { font-size: 32px; /* inherits line-height: 1.5 → 48px */ }
/* Also works but doesn't scale */
body { font-size: 16px; line-height: 24px; }
h1 { font-size: 32px; /* still inherits 24px line-height! */ }With a pixel line-height on the parent, every descendant inherits the same pixel value, regardless of its own font size. Unitless line-height is relative — each descendant multiplies its own font size by the inherited number. Unitless inherits the intention (“1.5× the font size”); pixels inherit the absolute value (“always 24 px”), which is rarely what you want. Use unitless by default and only reach for pixels when you know exactly why.
What this tool does not do
It does not account for specific font metrics — the x-height, ascender height, and descender depth of your actual font influence perceived line-height significantly, and a 1.5 line-height in Georgia looks different from a 1.5 line-height in Helvetica. For pixel-perfect typography, measure your chosen font and adjust by eye from the calculator’s starting point.
It also does not handle multi-column layouts where different columns have different measures, or mixed-typeface runs where each font wants its own leading. For those, treat each run as its own calculation.