env(preferred-text-scale) demo

Back to overview

env(preferred-text-scale) exposes the OS-level font scale setting as a CSS environment variable. Use it to apply text scaling to specific elements.

Usage

.scaled {
  font-size: calc(16px * env(preferred-text-scale, 1));
}

Demo

Change your OS text scale setting to see the difference between scaled and non-scaled text.

Scaled text

This text uses font-size: calc(16px * env(preferred-text-scale, 1))

Non-scaled text

This text uses font-size: 16px (no scaling)

Current preferred-text-scale value: 1

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 env(preferred-text-scale)

Try it in Chrome 138+.