TaskSet body line-height to 1.6, h1 to 1.15. Add some body text and an h1 so the difference is visible.
line-height rhythm: the number that fixes 80% of bad type
75 XP6 min
Theory
Unitless line-height is the modern default
body { line-height: 1.5; } /* unitless β multiplier of element's font-size */For each element, computed line-height = font-size Γ 1.5. As font-size changes (responsive), line-height stays proportional. Always use unitless for body.
The numbers that work
| Use case | line-height |
| Body paragraphs | 1.5 β 1.7 |
| Large hero headlines | 1.1 β 1.25 |
| Display type / numerals | 1.0 (tight) |
| Form inputs / buttons | 1.0 β 1.2 |
| Code blocks | 1.4 β 1.6 |
Below 1.4 on body text feels cramped. Above 1.8 feels loose / disconnected. Stay in the 1.5-1.7 sweet spot.
Why headings need TIGHTER line-height
A 48px hero headline at line-height 1.5 becomes 72px tall lines β feels like a wall. Tighten to 1.1-1.25 so a 2-3 line headline feels like one visual unit.
h1, h2 { line-height: 1.15; }
body { line-height: 1.6; }NEVER set line-height in px
/* DON'T */
body { line-height: 24px; } /* breaks when font-size changes */
/* DO */
body { line-height: 1.5; } /* scales with font-size */The unitless number is the gift CSS gave us in 1998 and ignored for 20 years. Use it.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.