[css-env][css-values] UAs inconsistent in how OS font settings affect the default font-size medium · Issue #10674 · w3c/csswg-drafts (original) (raw)

EDIT: Progress update

CSSWG resolved to adopt:

• an env(preferred-text-scale) variable, which returns a multiplier for the OS or UA text size scaling. e.g. if the user increases the font scale in their OS accessibility settings to 150%, the env() var returns 1.5. Authors can use it as a multiplier in a calc().
• a <length> unit called pem, which returns a length multiplied by the preferred-text-scale. By default (if user doesn't modify the text scale settings), 1pem is equivilent to font-size: initial. Authors can use it for sizing any content on the page and use it in media queries.

The env var and unit names are working names, for now. They may change.

As the way text scaling currently works across UAs is inconsistent and confusing, the WG have requested an explainer doc (see #10674 (comment)) that explains in detail how the text scaling and the new APIs would work interoperably.

Context

Authors typically don't set an explicit absolute font-size on the root (e.g. font-size: 32px). They know that the default font-size is 16 CSS pixels, and so they size fonts relative to that initial font-size. For example, they might set a heading to be font-size: 2rem, expecting a computed value of 32px by default.

They do this because they have been taught it's best practice to use relative lengths rather than absolute lengths for accessibility reasons. They are taught that doing so will respect when the user changes the default font size in their operating system or user agent's settings.

Problem

While medium does always seem to compute to 16px by default, that's not actually explicitly defined in the spec. That seems to be the de facto standard. There is no explicitly defined default font size or explanation into exactly how or whether the user agent should change the default font size based on any accessibility settings.

Here is how different OSs and user agents respond to font size changes in the OS accessibility settings:

On Android devices:

• Chrome: ❌ No change, 🔎 except in WebViews (see comment below)
• Firefox: ✅ Does change initial font size

On iOS devices:

• Safari: ❌ No change

On Windows:
Firefox, Edge and Chrome: 🔎 Zooms in entire content

At the BBC, we discovered this issue when noticing that web pages rendered in a Web View in iOS apps don't scale with the iOS Settings app's text size setting by default. As others have noted in #3708, this issue also affects PWA experiences -- especially scenarios where no browser chrome is visible and also there's no browser UI to change the default font size.

It feels like CSS needs to be more explicit about how the user's font size accessibility settings should be respected. Users and authors may be surprised by how the default font size often isn't affected by the operating system settings.

Workaround on iOS

Apple also provide a set of vendor-prefixed values for the font property to set the font styles (including font-size), based on a feature they've branded 'dynamic type'. This is explained in an article on system fonts on the WebKit blog.

body { font: -apple-system-body; font-family: initial; font-weight: initial; }

For more info on this practice, see: https://www.tpgi.com/text-resizing-web-pages-ios-using-dynamic-type/

What the spec currently says

The initial value of the font-size property is medium. However, according to the specs, the <absolute-size> values (small, medium, large, etc) are defined by the user agent. The specs do not in any way prescribe what the size should be.

CSS2 defines roughly what it should be:

The following table provides user agent guidelines for the absolute-size mapping to HTML heading and absolute font-sizes. The medium value is the user’s preferred font size and is used as the reference middle value.

CSS Fonts Levels 3 and 4 are very vague:

The following table provides user agent guidelines for the absolute-size scaling factor and their mapping to HTML heading and absolute font-sizes. The ‘medium’ value is used as the reference middle value. The user agent may fine-tune these values for different fonts or different types of display devices.

Proposed solutions

Solution 1: Define medium more explicitly in the spec

The CSS Fonts spec should define that medium is 16px by default, when the user hasn't changed any font settings or zoom levels in the user agent. If the user changes their font settings, the computed value of medium would change accordingly.

Solution 2: Opt-in using a new font-size value such as system

There could be a new font-size value like system, which would be defined as 16px by default but also defined to respect the user agent's font size settings.

Authors would be encouraged to set this new system value on their root element as a new best practice.

I don't know if it would be useful, but there could be multiple system font sizes, like system-body, system-heading, etc.

This solution has the disadvantage that it would not affect media queries that use relative font sizes.

Solution 3: Opt-in using HTML <meta viewport>

See: #3708 (comment)