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

Readability

How easily continuous text can be read, governed mostly by size, line length, leading and contrast.

UI foundationMixed evidenceFoundational

Definition

Legibility is whether individual characters can be distinguished. Readability is whether continuous text can be read comfortably over time. Both are measurable and both are largely determined by a small number of variables.

Mixed evidence. Real research exists, but findings conflict, effect sizes are small, or the jump from the lab to interface design is contested.

On this plate
  1. 1Definition
  2. 2The variables that matter, in rough order
  3. 3Constraining measure
  4. 4The variables, in rough order of effect
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Designing any content-heavy page.
  • Setting up article and documentation layouts.
  • Reviewing reading comfort complaints.
  • Long-form reading is a core part of the product rather than an occasional page.

Common mistakes

  • Unconstrained line length on wide viewports.
  • Body text below 16px.
  • Grey body text that technically passes contrast but is uncomfortable over long reads.

The variables that matter, in rough order

  1. 1.Size: 16px minimum for body text on screens. Below that, comprehension and speed both drop for a substantial share of readers.
  2. 2.Line length, or measure: roughly 45 to 75 characters for continuous prose. Long lines make the return sweep unreliable.
  3. 3.Line height: 1.5 or more for body text.
  4. 4.Contrast: 4.5:1 minimum, and comfortably above it for long-form reading.
  5. 5.Alignment: left aligned in left-to-right languages. Justified text on the web creates uneven word spacing.
  6. 6.Paragraph length: short paragraphs are scanned; long ones are skipped.

Constraining measure

css
.prose {
  max-inline-size: 68ch;
  font-size: 1rem;      /* 16px, respects user preference */
  line-height: 1.6;
}

/* Wide containers keep the text column readable */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 68ch);
  justify-content: center;
}

The ch unit is approximately the width of the zero character, which makes it a convenient proxy for character count.

The variables, in rough order of effect

VariableEffectCommon error
ContrastDecisive. Below threshold nothing else mattersGrey body text on white for elegance
SizeLarge effect at small sizes, small effect above 16px13px body text on a marketing page
Line heightLarge for long text, minor for single linesDefault leading on a long article
MeasureModerate, and often overstatedFull-width paragraphs on a wide monitor
TypefaceModerate, mostly through letterform clarityA display face used for interface text
AlignmentSmall, unless justified without hyphenationJustified columns with rivers

In practice

  1. i.

    Full-width paragraphs on wide screens

    Content sites

    Text running the full width of a 1600px viewport reaches well over 150 characters per line and is genuinely hard to read. A max-inline-size on the prose container is a one-line fix.

  2. ii.

    The measure research is thinner than its citations

    How much to trust the number

    The 45 to 75 character range is repeated everywhere and rests on a small and old evidence base, with studies disagreeing about optimum and about what is being optimised. Use it as a starting point, and do not defend it as settled science.

Local chart

FND·036 · Region II · Grid C2

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 DEFINITIONTrackingTERM·060 · SHORT DEFINITIONText SpacingA11Y·015 · RELATED CONCEPTAlignmentFND·003 · RELATED CONCEPTColumnsFND·040 · RELATED CONCEPTContainersFND·041 · RELATED CONCEPTContrastFND·002 · RELATED CONCEPTFont SelectionFND·030 · RELATED CONCEPTFont WeightFND·033 · RELATED CONCEPTLetter SpacingFND·035 · RELATED CONCEPTLine HeightFND·034 · RELATED CONCEPT

Sources

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

  1. [1]

    The Elements of Typographic Style

    R. Bringhurst, Hartley and Marks, 1992

    Source of the widely quoted 45 to 75 character measure, from print practice.

  2. [2]

    Reading online text: a comparison of four white space layouts

    M. Chaparro et al., Usability News, 2004

    One of several screen studies producing results that complicate the print guidance.

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.

Applies when you are designing

A Mobile App

Short definition

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

Related concept

Connected closely enough to change how you apply this.