Codectionary / Developer documentation / CSS

line-height and Vertical Spacing

line-height controls the vertical space a line of text occupies, directly affecting readability. Unitless values (like 1.5) are generally preferred over fixed units, since they scale proportionally with font-size rather than creating an inconsistent fixed gap.

Syntax

line-height: number | length | %;

Examples

Unitless vs Fixed Line Height

Why unitless values are the recommended approach.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}

.good {
  font-size: 16px;
  line-height: 1.5; /* scales to 24px - stays proportional if font-size changes */
}

.risky {
  font-size: 16px;
  line-height: 24px; /* fixed - breaks proportionally if a child changes font-size */
}
  1. The lines contain enough text and different text sizes to expose line-height behaviour.
  2. A unitless value is inherited as a multiplier, while an inherited fixed computed length can be too small for larger descendants.
  3. Change the child text size and inspect the difference rather than assuming equal-looking single lines prove the rules equivalent.
HTML used by this example
<div class="preview-row"><div class="good">Unitless line height<br><strong style="font-size:24px">Larger child text<br>on two lines</strong></div><div class="risky">Fixed line height<br><strong style="font-size:24px">Larger child text<br>on two lines</strong></div></div>

Tighter Line Height for Headings

Large headings typically need a tighter line-height than body text.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}

body { line-height: 1.6; }         /* comfortable reading for paragraphs */
h1, h2, h3 { line-height: 1.2; }    /* tighter, since large text has more natural spacing already */
  1. The lines contain enough text and different text sizes to expose line-height behaviour.
  2. A unitless value is inherited as a multiplier, while an inherited fixed computed length can be too small for larger descendants.
  3. Change the child text size and inspect the difference rather than assuming equal-looking single lines prove the rules equivalent.
HTML used by this example
<article><h1>A heading with tighter leading</h1><h2>A second-level heading</h2><h3>A third-level heading</h3><p>Paragraphs benefit from enough line spacing to follow each line. Paragraphs benefit from enough line spacing to follow each line. Paragraphs benefit from enough line spacing to follow each line. Paragraphs benefit from enough line spacing to follow each line. </p></article>

Parameters and values

  • line-height (number | length | %): Vertical space per line; unitless numbers are recommended

Best practices

  • Prefer unitless line-height values (like 1.5) over fixed pixel values, so it scales correctly if font-size changes anywhere down the tree
  • Use a larger line-height (1.5-1.7) for body copy to improve readability, and a tighter one (1.1-1.3) for large headings
  • Set a sensible default line-height on body and let individual elements override it only when needed
  • Remember line-height also affects the height of inline elements and can influence vertical centering of single lines of text

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading