Guide
Line Height Guide
Set line height (leading) for readable web text. Learn the 1.5–1.65 body default, when tight or loose line-height fails, and CSS patterns for headings vs body copy.
Line height (leading) controls vertical space between lines. It does not change what text says — it changes how hard the brain works to read it. Most developers inherit line-height: 1.5 from a reset and never adjust it, then wonder why long-form content feels wrong.
For body copy on the web, the practical range is 1.5 to 1.65. Below 1.5, multiline paragraphs feel cramped, especially on mobile. Above 1.75, lines disconnect and paragraphs lose unity.
Tight vs loose leading
At 1.2, descenders collide with ascenders and the block reads like a wall. At 1.6, each line is distinct without floating apart. Tight leading increases saccade error — the eye overshoots or undershoots the next line.
- Body text: line-height 1.5 to 1.65; never below 1.5 for reading text
- Headings: tighter values (1.1–1.3) are acceptable for single lines
- Do not use one global line-height for headings and paragraphs
Leading interacts with line length
Shorter lines tolerate slightly tighter leading; very wide lines need comfortable leading so the return saccade can find the next line. Fix measure first, then tune line-height for your font and content.
Interactive lessons
Related guides
Glossary
Frequently asked questions
- What is the best line height for body text on the web?
- 1.5 to 1.65 is the recommended range for body copy. 1.5 is a safe default; 1.6 often feels more comfortable for long paragraphs.
- What is the difference between leading and line height?
- Leading is the typographic term; line-height is the CSS property. Both refer to vertical spacing between lines of text.
- Should headings and body share the same line-height?
- No. Headings are often single-line and can use tighter line-height. Body text in multiline paragraphs needs more leading for readability.