Accessible Fluid Typography

Do not use a viewport-only font size

A value such as font-size: 3vw follows the viewport but can resist the enlargement people expect. Use relative bounds and keep a rem contribution in the preferred value.

/* Avoid */
font-size: 3vw;

/* Bounded and tied to the root text size */
font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);

Current MDN guidance recommends a relative maximum that is at least twice the minimum when clamp() controls text size. Whichever range you choose, confirm the rendered result in the browsers and components you support.

Test the page at 200% zoom

WCAG 2.2 Success Criterion 1.4.4 requires text to be resizable to 200% without loss of content or functionality. Visit each major layout at 100%, 150%, and 200%. Check filled forms, open menus, error messages, and long labels alongside clean article pages.

• Navigation labels wrap or reflow without covering another control.
• Buttons and inputs grow with their text instead of clipping it.
• Cards can become taller; fixed heights do not hide the last line.
• Headings do not create horizontal scrolling through one unbreakable line.
• Dialogs and menus remain reachable, including their validation messages.

Apply the WCAG text-spacing override

Success Criterion 1.4.12 asks pages to tolerate user-set line height of 1.5, paragraph spacing of 2 times the font size, letter spacing of 0.12, and word spacing of 0.16 without lost content or functionality. Those values are a test override, not a required visual style.

* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

p {
  margin-bottom: 2em !important;
}

Test the longest real content

Use the longest navigation item, a two-line button label, a validation error, a large number, and a long unbroken URL. Fluid type often exposes a container constraint. Let the component grow or wrap before shrinking the text.

Primary guidance: W3C's explanations of Resize Text (1.4.4) and Text Spacing (1.4.12). MDN's clamp() reference includes its current accessibility note.

Build a bounded type scale

See the worked clamp formula, or return to the fluid typography guide.

For accessibility work across type rules and components, review the design system service.