v138 · css

CSS env variable for OS-level font scale

Exposes a user's preferred font scale to CSS. Currently, it is not practical for a page to detect if the user has changed their preferred font size via the Operating System's preferences. This CSS environment variable will reflect the scale chosen by the user.

concepts

  1. OS font-scale

    env(preferred-text-scale) exposes the user's OS-level font size preference. Sites can respect accessibility settings without trying to detect them via JS.

  2. Proportional chrome

    The follow-on UX problem: scaling only text leaves icons, padding, and hit-targets cramped. Multiply everything by the same factor in calc() so the layout stays touch-friendly.

  3. Typography scale test bench

    A full type ramp (display → small) plus side-by-side cards showing text-only scaling vs proportional-chrome scaling. Manual slider simulates the OS preference when your platform doesn't expose one.

  4. Touch target checker

    Simulate the OS font-scale setting from 0.85× to 2.0× and watch a component library audit fail and pass in real time. Fixed-size buttons shrink below WCAG 2.5.8's 24×24 px minimum at high zoom; buttons that multiply their size by env(preferred-text-scale) stay compliant at every setting.

  5. Design System Audit

    A full component kit — buttons, inputs, cards, badges, nav tabs, alerts — in two variants: one fixed (ignores scale) and one adaptive (multiplies all sizing by env(preferred-text-scale)). Drag the scale slider from 0.85× to 2.0× and see which components fail the WCAG 2.5.8 touch-target minimum and which stay compliant.

why it shipped

Without this API, pages cannot practically honor the user's OS-level font-size preference. Today, if you change the Android system-level font slider and browse the web you'll see that <10% of sites honor that slider. The minority that do change font sizes have mostly stumbled into a very old UA intervention that boosts font sizes on mobile.

references