Skip to content
Design Academy My progress

Stage 9 · Lesson 10 of 12

Responsive zoom and reflow

Designing for 400% zoom and large text.

  • Intermediate
  • 20 min
  • 3 check questions
  • Exercise: 30 min

By the end of this lesson you can

  • Design layouts that work at 200% text size and 400% zoom.
  • Apply WCAG reflow and text spacing requirements.
  • Test zoom and text resizing.

The idea

Many people with low vision enlarge content using browser zoom, operating system text size or screen magnifiers.

Requirements (WCAG AA)

  • Resize text (1.4.4): text can be resized to 200% without losing content or function.
  • Reflow (1.4.10): content works at 320 CSS pixels wide (equivalent to 400% zoom on a 1280px screen) without scrolling in two directions, except for things like maps and data tables.
  • Text spacing (1.4.12): no loss of content when people increase line height, paragraph spacing, letter spacing and word spacing.
  • Orientation (1.3.4): content works in both portrait and landscape unless one is essential.

Design implications

  • Responsive layouts that reflow into a single column.
  • No fixed heights on text containers; let them grow.
  • Sticky headers and footers that do not cover most of the screen at high zoom.
  • Support system text size settings in apps (Dynamic Type on iOS, font scale on Android).

Why it matters in real projects

Low vision is far more common than blindness, and many people zoom without considering themselves disabled. Layouts that break at high zoom force people to scroll in two directions or lose content. Designing for reflow also makes products more resilient on small screens and with long text.

A realistic example

An airline website at 400% zoom shows a sticky header and a sticky "Book now" bar that together cover 70% of the screen, leaving a narrow strip for content. Text in fixed-height cards is cut off.

The designer specifies that sticky elements become non-sticky at narrow widths, cards grow with content and the layout reflows into a single column. A low-vision tester can now complete a booking at 400%.

Step by step

  1. Zoom to 200%

    Use browser zoom and check content and function.

  2. Zoom to 400%

    Check for horizontal scrolling and covered content.

  3. Increase text spacing

    Use a text spacing bookmarklet or extension.

  4. Test app text sizes

    Set the largest system text size on a phone.

  5. Rotate

    Check portrait and landscape.

  6. Annotate

    Specify reflow and sticky behaviour in designs.

Common mistakes

  • Mistake Fixed-height text containers.

    Instead Let containers grow with content.

  • Mistake Large sticky elements.

    Instead Reduce or unstick them at narrow widths.

  • Mistake Ignoring system text size in apps.

    Instead Support dynamic text scaling.

Check your understanding

Choose an answer, then check it. There is an explanation either way.

Question 1 of 3At what width must content reflow without two-dimensional scrolling?
Show answer

320 CSS pixels. This equals 400% zoom on 1280px.

Question 2 of 3What does text spacing (1.4.12) require?
Show answer

No loss of content when users increase spacing. Layouts must tolerate user spacing.

Question 3 of 3Which is a common zoom failure?
Show answer

Sticky elements covering the screen. Sticky elements consume space at high zoom.

Practice exercise

Exercise · about 30 min

Zoom test

Test a website at high zoom.

Steps

  1. Test at 200% and 400%.
  2. Test with increased text spacing.
  3. Screenshot problems.
  4. Redesign one problem area.

Deliverable

An annotated test report with one redesign.

Self-assessment

Tick each item when it is true of your exercise. Be honest; this is for you.

4 items

Summary

  • Many people zoom or enlarge text.
  • Support 200% text, 400% zoom reflow and text spacing.
  • Avoid fixed heights and oversized sticky elements.
  • Support system text sizes in apps.

Further reading

Third-party sources, chosen for reliability. They open in a new tab.

Your notes

Marking complete updates your course and roadmap progress.

Back to Accessibility and inclusive design Roadmap

PreviousCaptions and alternative text Next lessonAccessibility testing tools