[csswg-drafts] [css-fonts-5] Should absolute font size keywords scale at different rates depending on user's preferred text scale? (#12475)

JoshTumath has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-fonts-5] Should absolute font size keywords scale at different rates depending on user's preferred text scale? ==
#10674 and #12380 have introduced `env(preferred-text-scale)` and `<meta name="text-scale">` to allow authors to respect the user's text scale preference. The user can increase their text scale either in their OS settings or sometimes (currently just on desktop browsers) in their UA settings. When the `meta` tag is set to the `scale` keyword, the initial font size will change depending on the user's text scale preference.

The `font-size` property accepts [absolute font-size keywords](https://drafts.csswg.org/css-fonts-4/#absolute-size-mapping), which are sized in proportion to `medium`, which is the initial font size.

```
[ xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large ]
```

Depending on how the user increases or decreases their text scale preference from the default, they risk making `xx-small` too small to be readable and `xxx-large` so large that it takes up too much screen real estate.

**Should the absolute font size keywords use different scaling factors depending on the size of the user's text scale preference?**

> [!NOTE]
> For example, if the user sets a really big text scale like 200%, what should happen? By default, `medium` is `16px`, so the `xxx-large` font-size is 48px. Therefore, if `medium` is increased by 200% to `32px`, so the `xxx-large` font-size is 96px.
>
> Is that too big? The user desires the body text to be doubled to 32px, but do they really need a 96px heading? That will take up a lot of screen real estate, which is more of a problem on smaller viewports/mobile devices.

Also, are there ways other than the absolute size keywords that authors can achieve this?

## Prior work

[Apple OSs' system fonts](https://developer.apple.com/design/human-interface-guidelines/typography#iOS-iPadOS-Dynamic-Type-sizes) scale at different rates depending on the user's text scale setting (referred to as 'Dynamic Type').

[WebKit defines proprietary `font` shorthand property values](https://webkit.org/blog/3709/using-the-system-font-in-web-content/) for getting the system dynamic type fonts. For example:

```css
font: -apple-system-body;
font: -apple-system-headline;
font: -apple-system-subheadline;
```

These wouldn't just set the macOS or iOS standard font-sizes but also the system font-family.

[It was previously discussed for standardisation back in 2015.](https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html)

CC @fantasai @smfr

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12475 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 11 July 2025 17:26:39 UTC