Design for 400% Zoom and Text Resizing
Accessibility · accessibility, responsive
Updated 2026-07-28
- Treat zoom as a supported viewport, not an edge case. A desktop screen at 400% zoom is roughly the width of a phone, so the responsive work you already did should carry most of it.
- Never block zoom on mobile. Disabling scaling to protect a layout takes a basic accommodation away from people who need it most.
- Let text grow independently of the window. Users can raise the browser font size without zooming, so any container with a fixed pixel height will clip its own content.
- Watch the parts that usually break first:
- Fixed headers that eat most of the screen once enlarged.
- Buttons with text that overflows or gets cut.
- Two-column layouts that never collapse.
- Modals taller than the viewport with no internal scrolling.
- Tables that force horizontal panning in both directions at once.
- Allow one direction of scrolling at a time. Content that must be scrolled sideways and vertically to read a single sentence is exhausting to use.
- Keep spacing proportional to text. When labels grow but their padding does not, dense interfaces turn into overlapping ones.
- Test at 200% and 400% at your smallest supported width. Most layout failures appear at the combination, not at either setting alone.
If the interface survives being made twice as large, it will also survive a small laptop and a bad projector.
Related guides
UX Handbook