Skip to content
UX Atlas
Plate FND·034 · UI foundationGrid C1 · Rev. 2026-08-14

Line Height

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

UI foundationCraft conventionFoundational

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 plate
  1. 1Definition
  2. 2Starting values
  3. 3Relationships to keep in mind
  4. 4Starting values, and why they differ
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Setting typography tokens.
  • Designing long-form reading experiences.
  • Testing text spacing overrides for accessibility.
  • Text is legible at a glance and tiring to read at length.

Common mistakes

  • Fixed-height containers that clip when spacing is overridden.
  • Line height set in pixels.
  • The same line height across every size.

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.

Starting values, and why they differ

TextLine heightReason
Body copy, long form1.5 to 1.6The eye needs the return sweep to land reliably
Interface body1.4 to 1.5Shorter measures need less leading
Dense tables1.3 to 1.4Rows must stay scannable as a column
Headings1.1 to 1.25Large type needs proportionally less
Buttons and labels1 to 1.2Single lines, vertically centred
Captions1.4Small type needs relatively more, not less

In practice

  1. i.

    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.

  2. ii.

    The heading that clipped its descenders

    Tight leading on large type

    A display heading at 1.0 line height cut the tails from g and y on the second line. Large type wants tight leading, and tight has a floor set by the typeface, not by the number.

Local chart

FND·034 · Region II · Grid C1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

LeadingTERM·059 · SHORT DEFINITIONMeasureTERM·062 · SHORT DEFINITIONText ResizeA11Y·014 · RELATED CONCEPTText SpacingA11Y·015 · RELATED CONCEPTLetter SpacingFND·035 · RELATED CONCEPTReadabilityFND·036 · RELATED CONCEPTResponsive TypographyFND·038 · RELATED CONCEPTRhythmFND·017 · RELATED CONCEPTType ScaleFND·031 · RELATED CONCEPTWhitespaceFND·015 · RELATED CONCEPT

Sources

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

  1. [1]

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.