---
title: "Let text grow without breaking the page · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/text-resize
updated: 2026-10-20
licence: "All rights reserved"
---

# Let text grow without breaking the page

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Keep all content readable at 200% text zoom and with wider letter, word and line spacing. Never block pinch zoom. These are WCAG criteria 1.4.4 and 1.4.12 (AA).
- How: Size text in `rem` or `em`, and let boxes grow with their content instead of fixing their height. Test with the 1.4.12 spacing, which is line height 1.5, paragraph spacing 2, letter spacing 0.12 and word spacing 0.16 times the font size. Never set `maximum-scale` or `user-scalable=no` in the viewport tag.
- Check: axe `meta-viewport` passes. A browser test applies the 1.4.12 spacing and then 200% zoom. No element with text has `scrollHeight` greater than `clientHeight` while its overflow is hidden.

Example:

```html
<!-- Good -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bad: blocks zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
```

```css
.card { min-height: 8rem; }   /* not height: 8rem, which cuts off larger text */
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/text-resize`.

- Previous: [Never make people scroll sideways](https://agentwranglers.se/playbook/website/accessibility/no-sideways-scrolling)
- Next: [Make tap targets big enough](https://agentwranglers.se/playbook/website/accessibility/touch-target-size)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)