Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Line Height

The space between lines, which governs whether a paragraph is readable and is a WCAG requirement.

Definition

Line height is the vertical distance between baselines. Too tight and lines visually merge; too loose and the paragraph stops reading as a unit. It scales inversely with font size and proportionally with line length.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Starting values
  3. Relationships to keep in mind
  4. In practice
  5. Sources
  6. Continue from here

Starting values

ContextLine heightNotes
Body text, 16px1.5 to 1.6WCAG 1.4.12 requires at least 1.5 to be supported without loss of content.
Long-form reading1.6 to 1.8Longer measure needs more leading.
Dense interface text, 14px1.4 to 1.5Tighter is acceptable for short runs.
Headings, 24px and above1.1 to 1.3Large type needs proportionally less.
Display, 40px and above1.0 to 1.1Watch descender clipping on italics and accented characters.
Single-line UI labels1.0 to 1.2Set explicitly so buttons size predictably.

Relationships to keep in mind

  • Larger text needs proportionally less line height.
  • Longer lines need more, since the eye has further to travel back to the start of the next line.
  • Set line height unitless, so it scales with font size when the size changes.
  • Line height above about 2.0 makes paragraphs stop cohering, and reduces reading speed.
  • Tight display line height clips descenders on italic and accented characters. Add vertical reserve.

In practice

Clipped descenders in display headings

Marketing pages

A heading at line height 1.0 clips the descenders on letters such as g, y and p, particularly in italic. Setting 1.1 with a small padding reserve fixes it without changing the look.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.