Line Height

You copied a design system's line-height: 1.2 onto body paragraphs. The typeface has a tall x-height. Every line feels stacked on the one below it.

The Principle

LeadingLeading is the vertical space between lines of type. Named after lead strips in letterpress printing, it maps directly to CSS line-height, the ratio or length between baselines., called line-heightThe CSS property that sets vertical space between lines, as a unitless ratio or length. in CSS, is the distance between consecutive baselinesThe invisible line letters sit on. Consecutive baselines define leading distance.. It works with measureIn typography, measure is the width of a text column: how many characters fit on one line. On the web, it is controlled by max-width on the text container, often expressed in ch units., x-heightThe height of lowercase letters like x in a typeface. Larger x-heights often need slightly tighter leading., and font size. Too tight, paragraphs feel dense. Too loose, lines lose their connection.

The Rule I Follow

For body copy, I start between 1.5 and 1.65, then adjust for the typeface. Fonts with a larger x-height often need slightly less leading.

Try It Yourself

Drag from 1.2 → 1.5 → 2.0 and feel how the paragraph breathes.

Below 1.5 on body text, lines start to suffocate. Above 1.65, paragraphs drift apart.

The Mistake I'd Avoid

Trying to fix a crowded paragraph by only increasing line height. Often the real problem is the measure or font size.

Remember This

Leading should help your eyes find the next line without thinking.

p {
line-height: 1.5; /* minimum for comfortable body reading */
}

p {
line-height: 1.5; /* minimum for comfortable body reading */
}