meta name="text-scale" demo

Back to overview

<meta name="text-scale" content="scale"> makes the browser's initial font size respond to the OS text scale setting. This page has content="scale" enabled.

Usage

<meta name="text-scale" content="scale">

This is equivalent to:

:root {
  font-size: calc(100% * env(preferred-text-scale, 1));
}

Possible values

Demo

This entire page responds to your OS text scale setting because content="scale" is set.

All text on this page, including this box, will scale with your OS setting.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Compare this page with the env() demo which uses content="legacy".

Testing

On macOS, launch Chrome Canary with:

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary \
  --blink-settings=accessibilityFontScaleFactor=2.0 \
  --enable-experimental-web-platform-features

This is a demo for <meta name="text-scale">

Try it in Chrome 139+.