Understanding line-height
The unitless multiplier that decides if text breathes.
Why 1.5 is the sweet spot, how unitless beats px, and the line-height every browser gets wrong if you don't set it.
What line-height actually is.
The distance between baselines of consecutive lines of text. CSS lets you set it as a number (1.5), a length (24px), a percentage (150%), or a keyword (normal). The number form is unitless and inherits as the multiplier; the others inherit as the computed length, which is almost always the wrong behaviour for nested elements with different font sizes.
The 1.5 sweet spot.
Body copy reads best at line-height 1.4-1.7. Below 1.3 the lines crowd together and the eye loses its place when wrapping. Above 1.8 the lines feel disconnected and reading slows. 1.5 is the conventional safe choice for paragraphs of typical 16-18 px body text. Headlines want tighter — 1.0-1.2 — because larger type has more visual mass per line. Code blocks want looser — 1.5-1.7 — because monospaced characters lack the rhythm that proportional fonts get from x-height variation.
Unitless wins for inheritance.
line-height: 1.5 on body, then an h1 with font-size 32 px inside, inherits 1.5 × 32 = 48 px line-height. line-height: 24px on body (the same visual result for body text) would force the h1 to also use 24 px, which is smaller than the h1's font and produces overlapping descenders. Always use the unitless form unless you specifically need a fixed line box.
A worked spacing.
Body 16 px at line-height 1.5: each line takes 24 px. A 320-px paragraph with 6 lines of text fills 144 px of vertical space. Push to 1.7 and it grows to 163 px, a 13 % increase — meaningful when you're laying out a column to a fixed depth. The half-leading (extra space above and below each line) is split equally above and below the text. CSS gives no built-in way to pull that off — accept the default.
Body 16 px × 1.5
font-size × line-height
Computed line box for body copy.
16 × 1.5 = 24 px per line ; 6 lines = 144 px
= Comfortable paragraph spacing
The browser default isn't a number.
line-height: normal is the initial value, and the spec lets browsers pick their own multiplier — usually 1.0-1.2 depending on the font's intrinsic metrics. The number changes between fonts. For consistent rendering across font-families and across browsers, set an explicit unitless line-height on the body element and forget the default exists.
Vertical rhythm is overrated.
Designers fond of baseline grids try to snap every element to a fixed 24-px or 32-px rhythm. It looks crisp on a static document. It breaks the moment images, embeds, or web fonts with different metrics arrive — and on the web all three are guaranteed. A consistent line-height across paragraph text plus sensible margin scale is enough; the baseline grid is mostly a print-design holdover.