The CSS line-height property
The CSS line-height property sets how tall each line of text is, which controls the spacing between lines. Use a unitless number like line-height: 1.5 — it scales with the font size and inherits cleanly. Around 1.5 to 1.6 is comfortable for body text; headings can go tighter, near 1.1 to 1.2.
Overview
line-height controls the vertical space each line of text takes up, and with it the gaps between lines in a paragraph. Get it right and a block of text feels open and easy to read; set it too tight and the lines crowd together, too loose and they drift apart.
The key recommendation is to use a unitless number — line-height: 1.5 rather than 24px or 150%. A unitless value is a multiplier of the element's own font size, and it inherits as that multiplier rather than as a fixed computed length. That distinction matters: a child with a bigger font keeps proportional spacing, whereas an inherited fixed length can leave large text cramped.
As a rough guide, body copy reads well between 1.5 and 1.6, while large headings can tighten to around 1.1 or 1.2 because they rarely wrap to many lines. line-height is also one of the values folded into the font shorthand, written after the size with a slash, as in font: 16px/1.5 system-ui.
Syntax
selector {
line-height: 1.5;
}
/* part of the font shorthand */
p {
font: 16px/1.6 system-ui, sans-serif;
}Values
The line-height property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
unitless number |
A multiplier of the font size, e.g. 1.5. The recommended form. |
length |
A fixed line height such as 24px (does not scale with font size — avoid). |
percentage |
A percentage of the font size, e.g. 150% (computes to a fixed length when inherited). |
normal |
The browser default, roughly 1.2 depending on the font. |
Example
<style>
div { font-family: system-ui, sans-serif; font-size: 15px; max-width: 320px; margin: 0 auto 12px; padding: 12px; background: #f5f7fb; border-radius: 8px; }
.tight { line-height: 1.1; }
.roomy { line-height: 1.7; }
</style>
<div class="tight">line-height 1.1 — the lines sit close together, which feels cramped for a paragraph like this one.</div>
<div class="roomy">line-height 1.7 — the same text with room to breathe, which is easier to read line after line.</div>Best practices
- Use a unitless number like
1.5so the line height scales with the font size and inherits correctly. - Give body text room — around 1.5 to 1.6 — and tighten headings toward 1.1 to 1.2 where lines rarely wrap.
- Avoid fixed lengths (
line-height: 24px); they do not adapt when the font size changes and can crowd larger text. - Set a sensible line height once on
<body>and let it inherit, overriding only headings and special cases.
Accessibility
Line spacing has a measurable effect on readability, and the WCAG guidance reflects it: for blocks of text, a line height of at least 1.5 is the recommended target. Generous spacing helps readers with dyslexia and low vision track from one line to the next, and it makes any long passage less tiring for everyone.
Because users may increase line spacing through their own settings or a reading tool, build with relative, unitless values so the text reflows gracefully when they do. Fixed line heights can cause lines to overlap once a reader bumps up the spacing, which is exactly the failure the guideline is there to prevent.
Frequently asked questions
What is a good line-height for body text?
Why should line-height be unitless?
How do I add space between lines of text in CSS?
line-height, e.g. line-height: 1.8. It controls the height of each line and therefore the gaps between them.