Baselines, line boxes and visible space
Adobe’s typography reference describes leading as the distance from one text baseline to the next. A baseline is a positioning reference; descenders extend below it. The visible empty gap between two rows of ink is a different measurement.
CSS line-height sets a line-box dimension in horizontal writing. Mixed fonts, inline objects and other content can complicate a simple one-number prediction of every visible gap.
Read the multiplier
In this comparison, line-height is unitless. At a 30px font size, a value of 1.8 gives a nominal 54px line height for the simple text sample. The reference uses 1.4. Those are comparison settings, not a universal layout rule.
MDN explains why unitless values can avoid inheritance surprises: the number can be applied relative to the affected element’s own font size.
Use a paragraph that actually wraps
Enter a few sentences so both columns show multiple lines. Compare descenders, capitals and a line with punctuation. A short single-line title cannot reveal the reading rhythm of a longer paragraph.
Consider the final width and size together. More line spacing cannot compensate for every problem caused by an extremely wide or very narrow column.
Separate spacing from typeface history
The sample families have different proportions: inspect Lora, Montserrat and Lobster in their source profiles. Equal point sizes do not guarantee equal apparent heights.
For horizontal spacing, use the tracking comparison. For size units, use the font-size converter.
Your questions, answered.
Is line-height the same as the visible height of a letter?
No. It controls line-box layout. Letter ink, ascenders and descenders are separate features.
Does the reference setting mean 1.4 is always best?
No. It is a fixed comparison point. Judge the actual text, font, width and reading conditions.
Can I copy the example CSS?
Yes. The comparison provides a copy button. Load the selected font separately and adapt the rule to your own layout.
Sources & background
Sources supporting this page’s explanations. Practical examples are our editorial suggestions.