[csswg-drafts] [css-fonts] Spec does not define how OS font settings affect the default font-size `medium` (#10674)

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

== [css-fonts] Spec does not define how OS font settings affect the default font-size `medium` ==
## 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 by default, 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.

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 are taught that doing so will respect when the user changes the default font size in their operating system or browser'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.

On Android devices, changing the font size in the operating system settings does affect pages' default font size in Firefox, but not Chrome.

On Safari on iOS, the operating system font size settings do not affect the default font size and there is no way of increasing the font size in the Safari app settings, AFAIK.

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.](https://webkit.org/blog/3709/using-the-system-font-in-web-content/)

```css
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/

At the BBC, we were surprised by this when noticing that web pages rendered in a Web View in iOS apps don't scale with the dynamic type feature by default.

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.

## 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:](https://drafts.csswg.org/css2/#valdef-font-size-medium)

> The following table provides user agent guidelines for the absolute-size mapping to HTML heading and absolute font-sizes. **The [medium](https://drafts.csswg.org/css2/#valdef-font-size-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:](https://www.w3.org/TR/css-fonts-3/#absolute-size-value)

> 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 solution

I can think of two possible 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.

(It would be good to hear from the WebKit team why Safari on iOS's `medium` value isn't currently affected by the operating system font scaling settings, and if there might be any breaking changes introduced to websites if it was.)

### Solution 2: Define a new `font-size` value such as `auto`

There could be a new `font-size` value like `auto`, 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 `auto` value on their root element as a new best practice.

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


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

Received on Friday, 2 August 2024 16:54:58 UTC