Optimal Line Height for Body Text — Readability Best Practices

Finding the Right Line Height

Line height (leading) is the vertical distance between baselines of consecutive lines. Getting it right is critical for readability, yet many developers default to arbitrary values without understanding the underlying principles.

The General Rule

For body text at 16px, a line-height between 1.5 and 1.8 is optimal for most fonts. But the ideal value depends on three factors:

1. Font size: Larger text needs less line height (1.2-1.4 for headings)
2. Line length: Longer lines need more line height
3. Font characteristics: Fonts with tall x-heights need more line height

Font-Specific Recommendations

/* Merriweather: tall x-height, needs more space */
.merriweather { line-height: 1.8; }

/* Inter: moderate x-height */
.inter { line-height: 1.6; }

/* Lato: compact x-height */
.lato { line-height: 1.5; }

Line Height by Context

Context	Line Height	Why
Headings	1.1-1.3	Tight for visual cohesion
Body text	1.5-1.8	Comfortable reading
Captions	1.4-1.5	Compact but readable
Code blocks	1.5-1.6	Scannable vertically
UI labels	1.0-1.2	Space-efficient

The Line Length Connection

For every 10 characters beyond the ideal 60-75 character line length, increase line height by 0.05. If your paragraphs span 90 characters, use 1.7 instead of 1.6.