Skip to content
UX Atlas
Plate A11Y·014 · AccessibilityGrid B4 · Rev. 2026-09-14

Text Resize

Text must scale to 200 percent without breaking, which means never sizing type in absolute units.

AccessibilityCraft conventionFoundational

Definition

WCAG 1.4.4 requires text to be resizable up to 200 percent without loss of content or functionality. On mobile platforms, the operating system font size setting must also be respected.

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

On this plate
  1. 1Definition
  2. 2Requirements
  3. 3Sizing that follows the reader's setting
  4. 4Layouts that survive larger text
  5. 5Commonly confused with
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Setting up typography.
  • Accessibility review.
  • Building components with fixed heights.

Common mistakes

  • Pixel-based font sizing.
  • Fixed-height buttons and cards.
  • Viewport-unit typography with no rem component.

Requirements

  • Size text in rem or em, never in px, so the user's browser setting applies.
  • Do not set a font size on the html element in pixels, which overrides the user preference.
  • Avoid fixed-height containers around text.
  • Include a rem term in any clamp expression, or viewport-based sizing will ignore zoom entirely.
  • On mobile, respect the platform's dynamic type or font scale setting.
  • Test at 200 percent text-only zoom, which is different from full page zoom and breaks more layouts.

Sizing that follows the reader's setting

css
/* Wrong: the reader's browser setting has no effect */
html { font-size: 16px; }
.card__title { font-size: 20px; height: 48px; }

/* Right: relative units, and room for the text to grow */
html { font-size: 100%; }          /* respects the browser setting */
.card__title {
  font-size: 1.25rem;
  min-height: 3rem;                /* min-height, not height */
}

/* Fluid type still has to scale with zoom: keep a rem term in the middle */
h1 { font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem); }

/* Wrong: viewport units alone are unaffected by text zoom */
/* h1 { font-size: 5vw; } */

Anything sized in pixels ignores the browser font setting. A clamp expression without a rem term ignores zoom too, which is the version that passes review and fails in use.

Layouts that survive larger text

Do

  • Size text and spacing in rem or em throughout.
  • Use min-height rather than height on anything containing text.
  • Test at 200 percent text-only zoom, which breaks far more layouts than page zoom.
  • Respect the platform font scale on mobile, where large text settings are widely used.

Do not

  • Do not set a pixel font size on the html element.
  • Do not size text only in viewport units, which zoom does not affect.
  • Do not truncate to a single line without a route to the full text.
  • Do not fix the height of buttons, chips, tabs or table rows to match a design at one text size.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Reflow and Zoom

Accessibility

Content works at 400 percent zoom, which is the same as a 320 pixel wide column.

Key difference

Reflow is about the viewport: everything must work in a 320 pixel column with no sideways scrolling. Text resize is about the type alone scaling to 200 percent. A fluid layout can pass reflow and still break when only the text grows.

Use Text Resize when

  • Only the type size is changing, as with an OS font setting.
  • The failure is text clipped inside a fixed-height container.
  • The fix is relative units instead of absolute ones.

Use Reflow and Zoom when

  • The whole layout has to survive, not just the words.
  • The failure is two-dimensional scrolling or a clipped region.
  • You are testing by narrowing the window or zooming the page.

Learn about Reflow and Zoom

vs.

Text Spacing

Accessibility

Line, paragraph, letter and word spacing increased by the reader, at the same type size.

Key difference

Text resize changes the size of the type. Text spacing changes the gaps around it: line height, paragraph, letter and word spacing, with the size left alone. Two separate criteria, and a container can survive one and clip on the other.

Use Text Resize when

  • The reader has enlarged text or zoomed the page.
  • The question is whether anything is cut off as the type grows.

Use Text Spacing when

  • A stylesheet or extension is overriding spacing for readability.
  • The failure is overlap or clipping from taller lines, not bigger text.
  • The fix is removing fixed heights, not changing font size.

Learn about Text Spacing

Local chart

A11Y·014 · Region V · Grid B4

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

Reflow and ZoomA11Y·013 · COMMONLY CONFUSED WITHText SpacingA11Y·015 · COMMONLY CONFUSED WITHAccessibility ChecklistCHK·002 · CHECK YOUR WORKLine HeightFND·034 · RELATED CONCEPTResponsive TypographyFND·038 · RELATED CONCEPTType ScaleFND·031 · 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.

Applies when you are designing

A Mobile App

Check your work

Review passes that test whether this was done properly.

Related concept

Connected closely enough to change how you apply this.