How Does CSS Line-Height Affect Vertical Rhythm?

The CSS line-height property serves as the foundational unit for establishing vertical typographic rhythm, determining the vertical space occupied by inline elements and standardizing baseline alignment across a layout. By controlling the distribution of "half-leading" above and below text glyphs, line-height directly influences reading cadence, visual hierarchy, and the proportional flow between headings, body copy, and surrounding structural components.

The Mechanics of Line-Height and Inline Formatting

In CSS typography, line-height defines the height of an inline box rather than the visual size of the font itself. When the computed value of line-height exceeds the font's content area (determined by its intrinsic metrics, ascenders, and descenders), the browser calculates the remaining space—known as leading—and splits it equally above and below the glyphs. This is termed half-leading.

/* Recommended: Unitless line-height scales with font size */
body {
  font-size: 1rem;      /* 16px */
  line-height: 1.5;     /* Computes to 24px line box */
}

Using unitless values (such as 1.5 rather than 24px or 150%) is critical for robust layout architecture. Unitless numbers act as pure multipliers inherited by child elements, calculating dynamic line heights based on each specific element's computed font-size. Using fixed units like pixels or percentages can cause inheritance bugs, leading to text overlapping when child headings inherit a static computed pixel value from parent containers.

Establishing the Vertical Baseline Grid

A baseline grid provides a repeatable vertical cadence across a web page, akin to the horizontal grid system used for layout columns. Vertical typographic rhythm relies on setting a base grid unit—commonly derived from the body text line height—and ensuring every font size, margin, padding, and UI element aligns to multiples or submultiples of that base value.

When every text element’s total height (line height multiplied by line count plus vertical margins) resolves to an integer multiple of the base grid, lines of adjacent columns align naturally, creating a cohesive visual structure.

Harmonizing Headings and Body Copy

Larger text requires a proportionally tighter line-height. While standard body copy typically performs best between 1.4 and 1.6 to give eyes a clear tracking path from line to line, display headings (such as h1 and h2) appear disjointed if they maintain that same ratio.

Headings should use tighter ratios, generally between 1.1 and 1.3. Because the absolute height of the heading’s line box will naturally expand due to the larger font-size, tightening the ratio prevents multi-line headings from looking like detached individual paragraphs while keeping the computed line height snapped to the grid.

:root {
  --base-grid: 8px;
}

h1 {
  font-size: 2.25rem; /* 36px */
  line-height: 1.333; /* ~48px (6 * --base-grid) */
  margin-top: calc(var(--base-grid) * 4);    /* 32px */
  margin-bottom: calc(var(--base-grid) * 2); /* 16px */
}

p {
  font-size: 1rem;    /* 16px */
  line-height: 1.5;   /* 24px (3 * --base-grid) */
  margin-top: 0;
  margin-bottom: calc(var(--base-grid) * 2); /* 16px */
}

Modern CSS Approaches: lh Units and Leading Trim

Modern CSS introduces native tools that streamline vertical rhythm calculations:

1. Relative Line-Height Units (lh, rlh): The lh unit equals the computed line-height of the current element, while rlh reflects the root element's line height. Setting margin-bottom: 1rlh guarantees spacing matches the site's primary vertical cadence regardless of container contexts.
2. Text Box Trim (text-box-trim / text-box-edge): Traditional half-leading introduces dead space at the top and bottom of text blocks, preventing optical alignment with borders and images. CSS text-box trimming removes this leading, allowing designers to snap actual glyph baselines directly to grid containers without manual negative margins.

Mastering line-height transforms web typography from disconnected text blocks into an integrated, mathematically harmonious layout that enhances readability across all viewport sizes.