demo · v138

env(preferred-text-scale)

Reads the user's OS-level text-size preference. The first stage below uses the real env(preferred-text-scale, 1). The slider lets you simulate other values to see how the typography responds.

checking support…

live — uses your OS font scale

Body copy at user scale

This block is sized as calc(1rem * env(preferred-text-scale, 1)). Change your operating system's font-size preference and refresh to see this section grow or shrink.

env(preferred-text-scale) → computing…
1.00

before (fixed 1rem)

The quick brown fox jumps over the lazy dog. Body copy reads here.

after (× 1.00)

The quick brown fox jumps over the lazy dog. Body copy reads here.

the code

:root { --scale: env(preferred-text-scale, 1); }
body  { font-size: calc(1rem * var(--scale)); }
/* Now your design respects the OS-wide font size the user has chosen,
   without you owning a settings UI. */

see also