line-height in CSS: the multiplier that keeps lines from feeling cramped

A text can sit in the right font, at the right size, and still be tiring to read if its lines are packed too tight or spaced too far apart. The vertical space between lines matters just as much for readability as the character size itself, and line-height is what controls it.

This property has a quirk few CSS properties share: depending on how its value is written, it passes down to child elements through CSS inheritance in two completely different ways. Missing that difference is one of the quietest sources of visual bugs in CSS.

Definition

line-height sets the height of each line of text, meaning the total vertical space it occupies, text included. It accepts a unitless number, a value in pixels or rem, or a percentage.

p {
  font-size: 16px;
  line-height: 1.5; /* 1.5 times the font size, 24px here */
}

Unitless value versus a fixed value

A unitless value like 1.5 is not a height by itself, it is a multiplier. Every element that inherits it recomputes it using its own font-size: a child at 16 pixels gets a 24-pixel line height, a child at 32 pixels gets 48 pixels, and the proportion of 1.5 stays the same in both cases.

A fixed value in pixels, on the other hand, is inherited as-is, with no recalculation at all. A child with a different text size than its parent receives the exact same number of pixels of line height, which breaks the intended proportion.

A concrete example of the mismatch

Picture an article whose body copy uses a 16-pixel font-size, and inside it a quote that jumps to 24 pixels to stand out visually. If line-height is fixed in pixels on the parent, the quote inherits the same line height as the body copy, too tight for its larger font size, and its lines end up looking cramped.

article {
  font-size: 16px;
  line-height: 24px; /* fixed: inherited as-is */
}

article blockquote {
  font-size: 24px;
  /* inherits 24px of line height for 24px text: too tight */
}

Replacing 24px with 1.5 on the parent lets the quote recompute its own line height from its 24-pixel font size, 36 pixels, restoring proportional spacing.

The impact on readability

A line height that is too tight, close to 1, glues lines together and tires the eye as it hunts for the start of the next line. A line height that is too loose, past 2, breaks the text into strips that feel disconnected from each other. For body copy, a value between 1.4 and 1.6 fits most cases. Headings, shorter and already larger, tolerate a tighter value, often between 1.1 and 1.3, without losing reading comfort.

Frequently asked questions

A unitless value between 1.4 and 1.6 set on body works for the vast majority of sites, and every element then inherits it and automatically recomputes its own line height based on its font size.

That is often a sign they inherit a line height meant for smaller text. With a unitless value, a heading at a large font size recomputes a line height in pixels well above that of body copy, which can look excessive visually even though the math is correct.

Yes, and its inheritance behavior is close to the unitless value: 150% behaves almost like 1.5. The difference is subtle and mostly matters in advanced nested-inheritance cases, which is why the unitless value remains the most common recommendation.

Yes, line height is part of an element's content height, just like the text itself. An overly generous line height on a small component, like a button, can inflate it more than expected even when its font size stays modest.