Why Line Height Matters for Online Reading (and What the Right Amount Is)
Line height — the vertical space between lines of text — has a measurable effect on reading speed, comprehension, and eye fatigue. Here's what the research says, and how to adjust it for any website.
Line height — also called leading, after the strips of lead typesetters once placed between rows of movable type — is one of those typographic variables most people never consciously notice. You notice its absence: text that feels cramped, that makes your eyes work harder to track from the end of one line to the beginning of the next, that leaves you re-reading the same line twice by accident. But when line height is right, it disappears into the background, letting the words themselves carry your attention.
What counts as “right” is less straightforward than you might expect.
What line height actually controls
Line height is the vertical distance from one text baseline (the invisible line letters sit on) to the next. In CSS it’s set as a unitless multiplier of the font size — line-height: 1.6 on 16px text produces 25.6px of space between baselines. Most web body text lands somewhere between 1.4 and 1.6, though you’ll find everything from 1.2 (cramped) to 2.0 (very open) across different sites.
The value controls two things simultaneously: how much breathing room each line has above and below, and how far apart the lines of a paragraph are from each other visually. Increase it and paragraphs open up; decrease it and they compress.
Why too-tight line height causes fatigue
When line height is too small, the text feels dense and the white space between lines disappears. Tracking from the end of a long line back to the beginning of the next requires a precise horizontal saccade — the jumping eye movement your visual system makes as you read. When lines are packed closely, the visual difference between adjacent lines is smaller, and your eyes are more likely to land on the wrong line and re-read it.
Research on reading and typography consistently finds that slightly more line space reduces this regression rate — the frequency with which you go back and re-read something not for comprehension but because your eyes got lost. For long-form reading, that means less fatigue and better retention of what you’ve read, even if the mechanism sounds mechanical.
Why too-loose line height causes different problems
More isn’t always better. When line height is very large — 2.5 or above — the visual gap between lines can undermine your sense that those lines belong together as sentences and paragraphs. You lose the gestalt: the way tightly grouped text reads as a unit, where a heading or paragraph break is immediately clear because the gap changes.
At extreme values, reading long-form text with very loose leading can actually slow you down, because the spacing makes it harder for your peripheral vision to pre-process the next line while your fovea finishes the current one. Readers report it feeling slightly effortful, even when they can’t articulate why.
Accessibility baselines
The Web Content Accessibility Guidelines (WCAG 2.1) address line height under Success Criterion 1.4.12 (Text Spacing). The minimum recommendation for body text is 1.5 times the font size. This is a floor, not an ideal — for users with dyslexia, low vision, or some cognitive accessibility needs, values between 1.7 and 2.0 often work substantially better.
The practical problem is that most websites don’t meet this recommendation by default. Many opt for 1.4 or even 1.3 — either for stylistic reasons or because the designer tested the text on a high-resolution display at close range, where the compression is less apparent than on a typical laptop or phone screen.
Finding the right value for you
The “right” line height isn’t a single number because it depends on:
- Font size: Larger text needs less relative line height; smaller text needs more.
- Line length (measure): Longer lines need more line height to make tracking back to the left margin manageable. Short column text can work with tighter leading.
- Font style: Sans-serif faces with low x-height often need less leading than serif faces with taller ascenders and descenders.
- Your vision: If you wear glasses, read at an unusual distance, or have any print disability, your comfort zone will differ from an average reader.
A useful starting point for most body text on most screens is 1.6 to 1.7. From there, adjust based on how the specific text you’re reading feels.
How to adjust line height on any website
Most browsers let you override page CSS with an extension, which means you can change line height on any website you read without waiting for the site to update its stylesheets.
With ReadEase installed:
- Open the extension popup on any page.
- Go to the Typography panel.
- Use the Line Height slider to adjust the value in real time. The page updates immediately, so you can find your comfort zone without needing to know any CSS.
The setting persists as a per-site default — so if you find that one dense news site is always too tight and a particular documentation site is always too loose, you can set each one independently and ReadEase will remember them across visits.
Combining line height with other typography settings
Line height doesn’t work in isolation. The settings that interact most strongly with it are:
- Font size: Increasing font size often lets you reduce line height slightly while keeping the same visual spaciousness.
- Line length: Constraining the measure (maximum width of a text block) reduces the distance your eyes travel per line, which means you can get away with slightly tighter leading before regressions become a problem.
- Letter spacing: Extra letter spacing opens up individual words, which can compensate slightly for tighter line spacing — though only up to a point.
ReadEase exposes all of these independently, so you can tune the combination rather than treating line height as a single isolated knob.