Text Resize
Definition
Plenty of people read the web at larger than default type — low vision, tired eyes, a phone held at arm's length — and they do it with the browser's own zoom, the operating system font size, or a page setting. Three WCAG success criteria describe what has to survive that. 1.4.4 Resize Text at level AA requires text to scale to 200 per cent with no loss of content or functionality and without assistive technology. 1.4.10 Reflow at level AA requires content to work in a window equivalent to 320 CSS pixels wide, which is what a 1280-pixel viewport becomes at 400 per cent zoom, with no scrolling in two directions at once. 1.4.12 Text Spacing at level AA requires the page to cope when a reader forces line height to 1.5 times the font size, paragraph spacing to twice it, letter spacing to 0.12em and word spacing to 0.16em. Meeting all three is mostly a matter of not fixing the height of anything that holds words.
Why It Matters
A layout that breaks at 200 per cent usually breaks in one of two ugly ways: text overflows its box and is clipped, or a fixed-height header eats the first paragraph. Either way the reader loses content with no warning that anything is missing. The reflow rule is the one that bites hardest in practice, because a page that forces horizontal scrolling at 400 per cent makes every line a two-handed operation — read to the edge, scroll back, find the next line. Good responsive design gets most of the way there for free, since a layout that already works on a 320-pixel phone is very close to a layout that works at 400 per cent zoom on a laptop.
How It Works
Size text in relative units — rem or em — so it follows the root font size the reader has chosen, and leave the root itself unset rather than pinning it to 16px, which overrides their browser preference. Let containers grow: use min-height instead of height, avoid absolute positioning for anything holding text, and never set overflow hidden on a block whose contents can get taller. Media queries should be written in em so the breakpoints move with the type instead of staying fixed to device pixels. Do not disable pinch zoom: a viewport meta tag carrying user-scalable=no or maximum-scale=1 stops readers enlarging text on a phone at all, and browsers increasingly ignore it precisely because it was so widely abused. Testing takes a minute — press the zoom shortcut until the browser reports 400 per cent on a 1280-wide window, then read the page top to bottom.
Real-World Example
A recruiter publishes a one-page CV as HTML at jane-cv.99helpers.site, with the name and contact block in a 90-pixel-tall fixed header. At 200 per cent zoom the phone number slid under the top of the first section and vanished. Swapping height for min-height and moving font sizes from px to rem fixed it, and at 400 per cent the page simply became a single readable column. The file is served unchanged by 99helpers, so the whole fix lived in the CSS of the uploaded page and took one re-upload.
Common Mistakes
- ✕Pinning the root font size in pixels — the reader's own browser text size setting is then ignored, and the only route left is full-page zoom
- ✕Adding user-scalable=no to the viewport tag to stop a mobile layout wobbling — it blocks pinch zoom for everyone, which is the most common way of all to enlarge text
- ✕Testing only browser zoom and never text-only enlargement or forced text spacing — zoom scales everything evenly and hides the overflow bugs the other two expose
Related Terms
WCAG
WCAG, the Web Content Accessibility Guidelines, is the W3C standard that defines what accessible web content is. Its success criteria at Levels A, AA and AAA are what accessibility law and procurement point to.
Responsive Design
Responsive design is building one page that adapts to whatever screen opens it, using flexible layout and CSS media queries, instead of maintaining separate mobile and desktop versions.
Viewport Meta Tag
The viewport meta tag is one line in the head of an HTML document that tells a mobile browser to lay the page out at the device's own width instead of pretending to be a desktop screen.
Reduced Motion
Reduced motion is a setting people switch on at the operating system level to cut down animation, and a CSS media query that lets a page respect it. Honouring it takes a handful of lines.
Static Site
A static site is a website made of finished files — HTML, CSS, JavaScript, images — that are sent to the browser exactly as they are stored. Nothing is assembled on the server when a visitor arrives.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →