Line Height

Line-height is the CSS property that controls the distance between lines of text — specifically, the height of each line box. It's one of the most impactful properties for readability, yet one of the most commonly set without much consideration.

/* Unitless (recommended) — relative to font-size */
p { line-height: 1.6; }

/* em — also relative, but fixed at computed time */
p { line-height: 1.6em; }

/* px — absolute, doesn't scale with font changes */
p { line-height: 24px; }

/* % — relative to font-size, computed at assignment */
p { line-height: 160%; }

Always prefer unitless values. When a child element inherits a unitless line-height, it multiplies the child's own font size by the number, producing contextually correct spacing. Inherited em or % values are computed from the parent's font size and can produce cramped or oversized results on child elements with different font sizes.

Choosing the right value:

Optimal line-height depends on font size, x-height, and line length. General guidelines:

• Body text (16-20px): 1.5-1.7 for comfortable reading
• Large headings (32px+): 1.1-1.3 (large type needs tighter leading)
• Small text / captions (<14px): 1.4-1.5
• UI labels (single line): 1 to 1.2

/* Complete hierarchy example */
h1    { font-size: 3rem;    line-height: 1.1; }
h2    { font-size: 2rem;    line-height: 1.2; }
h3    { font-size: 1.5rem;  line-height: 1.3; }
p     { font-size: 1rem;    line-height: 1.6; }
small { font-size: 0.875rem; line-height: 1.4; }

Line-height and vertical rhythm:

When building a baseline grid system, line-height is the rhythm unit. Setting line-height: 1.5 on 16px body text establishes a 24px rhythm. All margins, padding, and heading line-heights should be multiples of this unit.

:root {
  font-size: 16px;
  line-height: 1.5; /* 24px rhythm unit */
}

p { margin-bottom: 1.5em; } /* One rhythm unit */

Variable fonts and line-height:

Some variable fonts change metrics across their weight or optical size axes. If your font shifts x-height significantly across its range, you may need to adjust line-height for different weights:

body    { font-size: 1rem; line-height: 1.6; }
.strong { font-weight: 700; line-height: 1.55; } /* Slightly tighter at heavy weight */

The line-height property also participates in vertical centering — the line box height minus the font's content area creates equal "half-leading" above and below each line. This is why a line-height: 1 on a flex container vertically centers single-line text without needing explicit padding, and why icon fonts often need line-height: 1 to prevent unexpected vertical space.