v146 · HTML · Meta Tags

meta name="text-scale"

Chrome 146 adds support for the <meta name="text-scale"> element. It lets a page declare whether it supports user-controlled text scaling — a separate mechanism from full-page zoom. When the browser or OS applies an accessibility text-size preference, pages that opt in receive text-only scaling without breaking layout.

concepts

  1. Text Scale Demo

    Compares a page with and without <meta name="text-scale"> under different font sizes. Shows how text-only scaling flows differently through a layout than full-page zoom.

  2. Text Scale vs Zoom

    Side-by-side: full-page zoom squashes layouts at small sizes; text-scale preserves structure. Explains when to use each, and why user-scalable=no in the viewport meta is not the answer.

  3. Text scale comparator

    Two synthetic articles side by side: one observes text-scale, the other doesn't. Drag user-scale and meta-cap sliders and watch the constrained vs raw scaling diverge.

  4. Reading Settings

    A reading preferences panel with A−/A+ buttons that dynamically update <meta name="text-scale" content="N">. Observe how the text reflows within a fixed article layout — the borders and column widths hold while only the text size changes.

why it shipped

Mobile browsers apply user-preferred text sizes from OS accessibility settings. Historically they had two bad options: ignore the setting (bad for accessibility) or apply full-page zoom (which often breaks responsive layouts). The viewport meta's user-scalable=no blocks zoom entirely — an accessibility antipattern. meta name="text-scale" gives pages a way to say "I support text-only scaling" so browsers can apply the user's preferred size without zooming the whole viewport.

the meta element

<!-- In <head> — opt this page in to text-only scaling -->
<meta name="text-scale" content="1">

<!-- Explicit opt-out (default behaviour without the tag) -->
<meta name="text-scale" content="0">

<!-- Combine with viewport for full responsive + accessible pages -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="text-scale" content="1">

<!-- CSS: use relative units so text-scale has something to scale -->
<style>
  body { font-size: 1rem; }    /* scales with user preference */
  h1   { font-size: 2em; }    /* relative to body — scales proportionally */
</style>

references