Line Height
The vertical space allocated for each line of text, controlling readability and rhythm.
Plain English
Line height is the gap between lines of text. Too tight and lines of text blur into each other, straining the eye as it tries to find the next line. Too loose and the paragraph feels disconnected — the text floats rather than reading as a block. The right line height makes reading effortless. Short headlines can be tight (1.1–1.2). Body paragraphs need more room (1.5–1.6).
Technical
The line-height CSS property sets the height of each line box. Unitless values (e.g. 1.5) are preferred over px or em because they scale proportionally with the element's font-size — a child element inheriting a unitless value recalculates from its own font-size, preventing cramping. The leading is distributed equally above and below the text: (line-height - font-size) / 2.
Live Demo
leading-none — suffocating
Designers make choices about spacing that directly affect how users feel when they read content. The wrong line-height makes text feel suffocating.
leading-relaxed — easy to read
Designers make choices about spacing that directly affect how users feel when they read content. The wrong line-height makes text feel suffocating.
Line-height of 1.5–1.7× the font size is optimal for body text.
Usage
✓ Good usage
Set body copy to line-height: 1.6 and headlines to 1.15 — this tightens headings for visual impact while making paragraphs easy to scan.
✗ Bad usage
Using line-height: 1 on body text forces lines to touch — ascenders and descenders from adjacent lines overlap, making it nearly unreadable.
Recommended values
- 1.0–1.1 — display headlines (60px+), tight tracking preferred
- 1.2–1.3 — large headings (36–48px)
- 1.4–1.5 — subheadings, UI labels
- 1.5–1.6 — body copy (optimal for long-form reading)
- 1.7–1.8 — small text (12–14px) where extra leading aids scanning
Common mistakes
- Using px values for line-height — unitless numbers scale correctly when font-size changes.
- Using the same line-height for headlines and body text — headlines need tighter leading.
- Ignoring line-height on small text — tiny text needs more leading, not less.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Set body text to line-height: 1.6, headings to 1.15, and UI labels (14px and below) to 1.4.