Text That Scales and Reflows

Not everyone views your site at 100%. Some users zoom text to 200% for better readability. Others browse on small screens or use browser settings to enlarge everything.

Your layout should scale and reflow gracefully — without cutting off text, forcing horizontal scrolling, or breaking functionality.

Resize is not Reflow — What’s the Difference?

1.4.4 Resize Text (AA)

Users must be able to increase text size up to 200% without losing content or functionality.

• Applies when users zoom only text, not the whole page.
• You should use relative units like em, rem, or %.

1.4.10 Reflow (AA)

At 400% zoom or on narrow screens (CSS width: 320px), content should reflow — i.e., stack vertically instead of requiring horizontal scrolling.

• One direction of scroll (vertical) is allowed.
• Two-dimensional scrolling (horizontal + vertical) is a fail except for elements like images, maps, data tables, or games.

Good Practice

• Use flexible layouts (flex, grid, flow) instead of fixed widths
• Use max-width instead of width when possible
• Use em, rem, or % — not px — for font sizes, padding, and layout
• Use media queries to adapt layout without hiding or overlapping content

Example (bad):

.container {
  width: 960px; /* ❌ fixed width */
  height: 500px; /* ❌ fixed height can cause clipping */
  font-size: 14px; /* ❌ hard to scale */
}

Example (better):

.container {
  max-width: 60rem;
  padding: 2rem;
  font-size: 1rem;
}

Watch Out For

• Text clipped inside fixed-height containers
• Absolute-positioned labels overlapping fields when zoomed
• Horizontal scrollbars when zooming to 200% or on small screens
• SVGs or custom widgets that don’t scale with text

Pro Tip

Use the browser’s Zoom feature (Ctrl + + or Cmd + +) and responsive design mode in DevTools. Test at:

• 200% zoom for 1.4.4 (resize text)
• 400% zoom / 320px width for 1.4.10 (reflow)

If you see horizontal scrolling, check if it’s necessary. Content should flow naturally in a single direction — usually vertical.

Exceptions (where 2D scroll is allowed):

• Images
• Data visualizations
• Complex tables
• Games
• Interactive maps

Do this today: Zoom your page to 200%. Can you still read and use everything without horizontal scrolling? Now check it at 320px width. If the layout breaks, tweak your CSS: avoid fixed widths, use relative units, and let content reflow naturally.