line-height

Definition

The line-height CSS property sets the height of a line box. It controls the vertical spacing between lines of text, affecting readability and visual appearance. Line height is crucial for creating comfortable reading experiences and establishing proper typography rhythm. The property can be specified using unitless numbers, length values, or keywords.

Syntax

body {
  line-height: 1.6;
}

Values

normal: browser default (usually ~1.2).
<number>: unitless multiplier applied to font-size (recommended).
<length> / <percentage>: explicit leading values.
inherit / initial / unset.

Practical Examples

p {
  line-height: 1.65;
}

Unitless multipliers keep vertical rhythm consistent when font sizes change.

HTML

Tighter line-height can make paragraphs feel cramped, especially on smaller screens.

Setting line-height between 1.5 and 1.8 improves readability for body copy.

Code

<div class="grid gap-4 sm:grid-cols-2">
  <p class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm" style="line-height: 1.2;">Tighter line-height can make paragraphs feel cramped, especially on smaller screens.</p>
  <p class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm" style="line-height: 1.65;">Setting <code>line-height</code> between 1.5 and 1.8 improves readability for body copy.</p>
</div>

Tips & Best Practices

Use unitless values so descendants inherit an appropriate multiple.
Adjust line-height alongside font size when designing typographic scales.
Headings often use tighter leading than body copy to maintain hierarchy.

Accessibility & UX Notes

Generous leading helps readers with low vision or dyslexia track lines more easily.

Browser Support

Supported everywhere.

font-size for type scales.
margin-block to manage paragraph spacing.
letter-spacing for horizontal rhythm.

font