demo · v146
Text scale comparator
Two synthetic articles side by side: the left observes <meta name="text-scale" content="…">, the right does not. Drag the slider — text in the left frame respects the cap (or floor) you set; the right frame scales freely with the platform setting. Useful for picking the right ceiling for a forms-heavy app vs a long-read.
text-scale meta tag ships behind
chrome://flags/#enable-experimental-web-platform-features in Chrome 146.
The slider here simulates the platform-level user preference so the comparison works regardless.
The simulator multiplies the page's html { font-size } by a user-preference factor between 0.75× and 3×. The left frame caps at the value of the meta tag; the right frame doesn't.
frame A — uses meta text-scale
Reading well at every size
The text-scale meta tag tells the browser the largest accessibility text scale the layout has been tested with. Bigger requests still respect users; the page just promises it has thought about them.
Buttons, labels and chrome remain operable.
A second paragraph follows so the comparison is honest at long-form length. Notice how line height grows proportionally — anything tied to em participates.
frame B — no meta, scales freely
Reading well at every size
The text-scale meta tag tells the browser the largest accessibility text scale the layout has been tested with. Bigger requests still respect users; the page just promises it has thought about them.
Buttons, labels and chrome remain operable.
A second paragraph follows so the comparison is honest at long-form length. Notice how line height grows proportionally — anything tied to em participates.
<meta name="text-scale" content="max=150%">
<!-- promise: layout works up to 150% text scale; above that, cap. -->
<meta name="text-scale" content="exact=125%">
<!-- override: pin text scale here regardless of platform setting. -->