In short
Line height is the distance from the baseline of one line of text to the next, set in CSS with the line-height property. For body text on screens, 1.5 to 1.6 times the font size is the comfortable range and the WCAG recommendation; headings work tighter at 1.1 to 1.3; small UI text sits around 1.3 to 1.4. Set it as a unitless number so it scales with the font size, and adjust for line length, x-height and font size: longer lines and larger x-heights want more, large display text wants less.
What it is
Line height, called leading in typesetting after the strips of lead once placed between lines of metal type, is the vertical distance between consecutive lines of text. In CSS it is the line-height property, and the browser distributes any space beyond the font's own height equally above and below each line.
It is a whitespace setting, and like most whitespace, it does more than it appears to. Too little, and lines crowd each other, the eye loses its place at the end of a line, and dense text reads as a wall. Too much, and lines drift apart, the paragraph loses cohesion, and the eye has to travel to find the next line. The right amount makes the return sweep from the end of one line to the start of the next effortless, which is the whole mechanism of comfortable reading.
The ranges that work
| Text | Line height | Notes |
|---|---|---|
| Body text, 16–20px | 1.5–1.6 | WCAG recommends at least 1.5 for readability; most well-set sites sit here |
| Long-form reading, wide measure | 1.6–1.7 | Longer lines need more space for the return sweep |
| Headings | 1.1–1.3 | Large type needs less; multi-line headings with 1.5 look gappy |
| Display text, very large | 1.0–1.1 | Often tighter than the font's default |
| UI labels, buttons, small text | 1.3–1.4 | Single lines; the value mostly sets the element's height |
| Captions, footnotes | 1.4–1.5 | Small text benefits from a little more air |
The browser default, normal, resolves to roughly 1.2 for most fonts, which is why unstyled body text feels cramped. The most common improvement a site can make to its typography is setting body line height to 1.5 or 1.6, and it is a one-line change.
Unitless, not pixels
Set line-height: 1.5, not line-height: 24px or 150%. A unitless value is a multiplier of the element's own font size, and it is inherited as a multiplier, so every child element with a different font size gets a proportionate line height. A pixel or percentage value is computed once on the parent and inherited as a fixed number, so a larger heading inside inherits a line height meant for smaller text and overlaps itself. This is one of the older CSS gotchas and it still catches people.
Fixed values have a place: within a component where the height must be exact, such as a button or an input, where line-height is doing layout work rather than typographic work.
What shifts the ideal
Line length. Longer lines need more line height, because the eye's return sweep is longer and more likely to land on the wrong line. At 45 characters per line, 1.4 can be fine; at 80, 1.6 or more. The two settings should be tuned together, and the type scale that sets sizes should set line heights alongside.
x-height. Fonts with a large x-height, where the lowercase letters are tall relative to the capitals, look bigger and denser at the same size and want more line height. Fonts with small x-heights can sit tighter.
Font size. As text gets larger, proportionate line height gets looser in absolute terms and starts to look gappy; large headings want a smaller multiplier. As text gets smaller, a slightly larger multiplier helps.
Language and script. Scripts with ascenders, descenders and diacritics that extend further, and languages with long compound words, benefit from more space.
Dark mode. Light text on dark backgrounds tends to look heavier and slightly larger; a touch more line height often helps.
Accessibility
WCAG 1.4.12 requires that content remain usable when a user overrides line height to at least 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 and word spacing to 0.16. In practice that means not fixing container heights around text, so that when someone increases spacing, nothing overflows or is clipped. Setting body text to 1.5 by default meets the spirit of the guideline and serves readers with dyslexia and low vision, for whom line spacing is one of the largest legibility factors.
How to tune it
Set a paragraph at the intended body size and measure, at 1.5. Read it. Try 1.6 and 1.4. The right value is the one where you stop noticing the lines and start noticing the content. Then check headings at each size in the scale and tighten until multi-line headings hold together. Do the same for the smallest text. Record the values as tokens next to the sizes, so the relationship survives the next redesign.
If a site's text feels off and nobody can say why, line height is the first thing to check and the cheapest to fix. If you would like a typography pass that sets sizes, measures and line heights as a system, book a call.
Common questions
What is the best line height for body text?
Between 1.5 and 1.6 times the font size for body text on screens, which is also the level WCAG recommends for readability. Longer lines and fonts with large x-heights lean toward 1.6 or a little more; shorter lines can sit at 1.5. The browser default of about 1.2 is too tight for paragraphs.
What line height should headings have?
Tighter than body text: around 1.1 to 1.3 for most headings, and 1.0 to 1.1 for very large display text. Large type at a body-text multiplier looks gappy, especially when the heading wraps to two lines. Set the value per size in the type scale rather than inheriting the body value.
Should line-height be unitless or in pixels?
Unitless for text, so it scales with each element's font size and is inherited as a proportion rather than a fixed number; this prevents larger headings inheriting a line height meant for small text and overlapping. Fixed pixel values are appropriate inside components such as buttons and inputs where the exact height matters.
Does line height affect accessibility?
Significantly. Line spacing is one of the largest legibility factors for readers with dyslexia and low vision, and WCAG 1.4.12 requires that content remain usable when a user sets line height to at least 1.5 times the font size. Setting body text at 1.5 or more by default, and avoiding fixed container heights around text, meets the requirement.
What is the difference between line height and leading?
Leading is the traditional typesetting term for the space between lines, named after the lead strips inserted between lines of metal type, and it originally described only the added space. Line height in CSS is the total distance from one baseline to the next, including the font's own height. They describe the same concept with a different baseline of measurement.
