Who zooms, and how do they do it?
Many people make web pages bigger: people with low vision, people with tired eyes after a long shift, older readers, and anyone holding a phone at arm’s length. They use three different tools, and your page has to work with all of them.
Browser zoom, with Ctrl and plus or Command and plus, scales the whole page. CSS pixels get bigger, so the viewport gets narrower in CSS terms: at 200 percent zoom on a 1280 pixel wide window, your layout sees a 640 pixel wide screen, and media queries switch to the mobile layout. A text size setting, in browser or phone settings, changes only the default font size and leaves images and spacing alone. Pinch zoom on a phone magnifies the page like a lens.
Screen magnifiers built into operating systems go further, up to 1600 percent, showing a small part of the screen at a time. People using them read long lines by panning sideways, which is tiring, so pages that reflow into one narrow column help them a lot.
What do the WCAG rules on resizing ask for?
Four success criteria cover it. Together they say people must be able to make text bigger, and the page must still work.
- 1.4.4 Resize Text: text can be zoomed to 200 percent with no loss of content or function.
- 1.4.10 Reflow: at a width of 320 CSS pixels, which is 400 percent zoom on a 1280 pixel window, content fits without scrolling in two directions. Tables, maps and diagrams are exceptions.
- 1.4.12 Text Spacing: nothing breaks when people override line height to 1.5, paragraph spacing to 2 times the font size, letter spacing to 0.12 and word spacing to 0.16 times the font size.
- 1.3.4 Orientation: the page works whichever way people hold their phone or tablet.
Why should you never disable zoom on phones?
The viewport meta tag tells mobile browsers how wide the layout is. width=device-width, initial-scale=1 is all most pages need. Adding maximum-scale=1 or user-scalable=no tells the browser to block pinch zoom, and someone with low vision is left unable to read the page at all.
Some modern mobile browsers now ignore these values for accessibility reasons, and some still honour them, so do not rely on the browser to rescue you. Remove them. The usual excuse is that zoom spoils a layout or causes a double-tap delay, and current browsers removed that delay years ago for pages with a proper viewport tag.
<!-- Blocks zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Lets people zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">Why use rem for font sizes?
When someone sets their browser’s default text size to 20 pixels, the browser changes the size that 1rem means. Text sized in rem or em grows to match. Text sized in px stays where you put it, so font-size: 13px ignores the reader’s choice. Browser zoom still works on pixel text, but the text size setting is how many people with low vision browse every day, and on phones it is often the only setting they touch.
Set the body size to 1rem or a little more, and size headings and small print relative to it. Use rem for media query breakpoints too, so the layout switches at the right point when text is bigger. Pixels are still fine for borders and thin lines.
Avoid setting html { font-size: 62.5%; } to make the maths easier. It keeps the user’s setting in proportion, but it makes 1rem equal to 10 pixels by default, and pages built on it often end up with body text that is too small for everyone.
body { font-size: 1rem; line-height: 1.5; }
h1 { font-size: 2rem; }
.small { font-size: 0.875rem; }
@media (min-width: 40rem) { main { padding: 2rem; } }How do fixed heights cut text off?
A box with a fixed height holds a fixed amount of text. When the text grows, wraps onto more lines at a narrow width, or gets extra line spacing from a user style, it has nowhere to go. With overflow: hidden the extra words vanish. Without it, they spill out and overlap whatever is below.
On the cake order page, the opening hours box is 48 pixels tall. At normal size the whole sentence fits. Make the text bigger and the phone number disappears, which is the one detail someone needed. Let content set the height: use padding for space, and min-height if a box must be at least a certain size.
The same goes for buttons, tags and cards with a fixed height, and for line-height set in pixels, which does not grow with the text. Write line height as a plain number, like 1.5, so it stays in proportion.
.hours { min-height: 3rem; padding: 0.5rem 0.75rem; }
What makes a layout reflow at 320 pixels?
Reflow means content rearranges into a single column instead of making people scroll sideways to read each line. Fixed widths in pixels are the main thing that stops it: a <main> set to width: 960px stays 960 pixels wide on a 320 pixel screen. Use max-width instead, in rem or ch, and let the element shrink.
Flexbox and grid layouts should wrap or switch to one column at narrow widths. Images need max-width: 100% and height: auto. Long words and web addresses can push a column wider than the screen, and overflow-wrap: anywhere lets them break. Data tables are allowed to scroll sideways, but put them in a scrolling container so the rest of the page does not move with them.
Sticky headers and cookie banners are a hidden reflow problem. At 400 percent zoom, a header that takes 100 pixels at normal size can fill half the screen and never move. Make headers stop sticking at small heights, for example with a max-height media query.
How do you test zoom and text size?
Open the page in a desktop browser and zoom to 200 percent, then 400 percent. Read every line and press every control. Nothing should be cut off, overlap or need sideways scrolling, apart from tables and similar content. Then reset zoom, set the browser’s default font size to its largest option, and check again.
Use DevTools device mode to set a width of 320 pixels, which shows the reflow case without zooming. For text spacing, paste a small user style that sets the four 1.4.12 values with !important and look for clipped text. The **Checks** view here catches a locked viewport. It cannot see clipped text, so these manual checks matter.
What do AI tools get wrong about sizing?
Generated pages often copy an old viewport tag with user-scalable=no, especially when they imitate app-like designs. They size fonts and spacing in pixels throughout, set fixed heights on cards so they line up neatly, and add overflow: hidden to hide the problem. Search the CSS for px font sizes, height: on anything that holds text, and overflow: hidden, and question each one.
Watch also for white-space: nowrap on long labels and for layouts that use absolute positioning to stack text over images. Both look fine in a screenshot and break the moment the text gets bigger.
Field notes
- Many people zoom in or set larger text to read the web.
- Never block zoom with
user-scalable=noormaximum-scale=1. - Text sized in
remfollows the reader's chosen text size. - A fixed
heightwithoverflow: hiddencuts off text that grows.
Easy to get wrong
Blocking pinch zoom leaves people with low vision unable to read the page on a phone.
Pixel font sizes ignore the default text size people set in their browser. rem follows it.
A fixed height with hidden overflow cuts off text as soon as it grows or wraps.
A fixed width forces sideways scrolling on narrow screens and at high zoom, which fails 1.4.10 Reflow.
Questions people ask
Is browser zoom enough, so text size settings do not matter?
No. Many people set a larger default text size once and leave it. Some phone browsers apply the phone’s text size to web pages too. Pages sized in rem respect it, and pages sized in px do not.
Do media queries in px still work when people zoom?
Browser zoom changes the CSS pixel width, so px breakpoints still switch. A text size setting does not change the width, so only rem or em breakpoints respond to it.
Is horizontal scrolling ever allowed?
Yes, for content that needs two dimensions to make sense, such as data tables, maps, diagrams and code. Keep the scrolling to that part of the page.