v146 · HTML · Text Scale vs Zoom
Text Scale vs Full-Page Zoom
Full-page zoom scales every pixel — text and layout — making content overflow or require horizontal scrolling at large magnifications. Text-only scaling (what meta name="text-scale" enables) enlarges text while leaving the viewport geometry intact, so responsive layouts continue to work correctly.
The problem with
user-scalable=no: Many mobile sites prevent zoom entirely to avoid layout breakage. This blocks users who rely on large text for accessibility. meta name="text-scale" offers a middle ground: the page opts in to text-only scaling, which browsers can apply without breaking the layout.
visual difference
Full-page zoom at 1.5×
The whole viewport scales up. Elements overflow their containers. Horizontal scrolling appears. Responsive breakpoints are hit at unexpected sizes.
HomeAboutContact
Article title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut enim.
Sidebar
links
here
links
here
Text-only scaling at 1.3×
Only font sizes grow. The viewport width stays the same. The two-column layout survives. Responsive behaviour is unaffected.
HomeAboutContact
Article title
Lorem ipsum dolor sit amet.
Sidebar
comparison matrix
| Behaviour | Full-page zoom | Text-only scale (text-scale) |
|---|---|---|
| Text legibility | Improved | Improved |
| Viewport width unchanged | No (effective width shrinks) | Yes |
| Responsive layout preserved | Often breaks | Yes (breakpoints unaffected) |
| Horizontal scroll risk | High | None |
| Images/SVG scaled | Yes | No (text only) |
| Works with px-only CSS | Yes (everything scales) | No — use rem/em |
| Requires author opt-in | No | Yes — meta name="text-scale" |
when to use each
- Use text-scale — responsive layouts with
em/remunits, editorial sites, reading apps - Use text-scale — any page that already avoids
user-scalable=noand uses fluid typography - Avoid text-scale — canvas-based apps, games, maps — text-scale will skew text-size relative to graphics
- Avoid text-scale — pages with px-only typography — text will not scale unless you migrate to relative units first
the antipattern to retire
<!-- ❌ Blocks ALL accessibility scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- ✓ Allows user zoom AND text-only scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="text-scale" content="1"> <!-- opt in to text-only mode in Chrome 146+ -->see also
scenario focus
Select a scenario to focus its rendered example and summary.