v146 · HTML · Text Scale Demo

Text Scale Demo

This page includes <meta name="text-scale" content="1">, signalling that it supports user-controlled text scaling. Use the slider to simulate how different text-scale factors affect the layout. Notice that with relative CSS units (em, rem), headings and paragraphs scale proportionally — unlike px-fixed layouts.

This page has meta name="text-scale" content="1" in its <head>. In Chrome 146+ on mobile (or when the OS has a large-text accessibility setting active), the browser will apply text-only scaling to this page rather than full-page zoom. The slider below simulates the scaling effect using CSS font-size on the root element.

simulate text-scale factor

1.0×

Article headline — scales with em

This paragraph uses font-size: 1em on the body. As the scale factor increases, this text grows and line-height adjusts. Because the heading is set in 1.4em, the visual hierarchy is preserved at any scale.

Fine print in 0.82em — proportionally smaller, still readable at large scales.

Root font-size: 16px × 1.0 = 16px

relative vs fixed units at a glance

Relative units — scales correctly

body  { font-size: 1rem; }
h1    { font-size: 2em; }
p     { font-size: 1em; }
small { font-size: 0.8em; }

When the browser applies text-scale, 1rem changes, and all em values follow proportionally.

Fixed units — does not scale

body  { font-size: 16px; }
h1    { font-size: 32px; }
p     { font-size: 16px; }
small { font-size: 13px; }

px values are absolute — the browser cannot scale them in text-only mode. User accessibility preferences are ignored.

code

<!-- In <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="text-scale" content="1">  <!-- opt in to text-only scaling -->

<!-- CSS: use relative units -->
<style>
  :root { font-size: 1rem; }  /* baseline — text-scale adjusts this */
  body  { font-size: 1rem; line-height: 1.6; }
  h1    { font-size: 2em;  }  /* always 2× body, even when scaled */
  p     { font-size: 1em;  }
</style>

see also