Re: [csswg-drafts] [css-fonts][css-viewport] UAs inconsistent in how OS font settings affect the default font-size `medium` (#10674)

I'll try to summarise here some points from the call to help continue the discussion:

* General agreement that that this needs solving
* If `rem` units are used in media queries, they are relative to the UA stylesheet, not the web page stylesheet. A solution would need to influence relative font units in media queries.
* Solutions such as a keyword for setting the native-OS font size (e.g. `font-size: system;`) would not affect font relative units in media queries.
* @emilio and @fantasai ask about whether there are multiple OS font sizes to expose (e.g. body text, headings, buttons).
* @fantasai suggests changing font relative units in media queries to be relative to native-OS font-size rather than the UA stylesheet's font-size, but that could cause compatibility issues,
* @tabatkins mentions `env()` as probably the correct way to solve this.

Some additional thoughts from me:

If we imagine `env()` having a value like `env(system-font-size)`, it could fallback to the computed value of `font-size: medium;` if a particular OS doesn't expose a default font size.

But I'm confused about how using `env()` would help with the concern about font relative units (e.g. `rem`) in media queries. If I were to set the following in my web page's stylesheet:

```css
:root {
  font-size: env(system-font-size);
}

@media (width > 40rem) {
  .foo { color: green; }
}
```

...that wouldn't affect the media query. The `40rem` in the media query would typically be computed as `640px` (unless I use my browser's zoom feature).

Also, if we do expose a system font size value using `env()`, I'm wondering exactly what value it would give. Two options I've thought of:

1. **Expose the actual OS font-size for body text.** Do we want to expose a font size that is literally the font size of one of the OS's UI elements (e.g. the Android or Windows body text font size)? It could compute to a different CSS pixel value, depending on the OS, such as 13px. Would authors be OK with their web pages having different font sizes depending on which OS their user is on?
2. **Expose a font-size relative to 16px.** So if we accept the web's _de facto_ font size of 16px, the system font-size value could be relative to that. Meaning, if you don't touch your OS's accessibility font size settings, you get the default 16px size, but if you increase the font size, it is increased relative to that. e.g. In the following screenshot of Android, because the font size range input is on the default value, the system font size on the web page is set to 16px.

![Screenshot of Android display size and text settings page; has a range input for font size.](https://github.com/user-attachments/assets/a7676d34-9cb7-4959-9629-74f6f049285f)

-- 
GitHub Notification of comment by JoshTumath
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10674#issuecomment-2537600011 using your GitHub account


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

Received on Thursday, 12 December 2024 02:13:10 UTC