- From: Jen Simmons via GitHub <sysbot+gh@w3.org>
- Date: Thu, 05 Sep 2019 23:25:13 +0000
- To: public-css-archive@w3.org
There seem to be a lot of objections to this proposal, but objections based on confusion about what use case this is for.
Imagine an Author who is designing a "PWA" / website, where they want the header of the "web app"/page, including the navigation, to look like the OS the site is on. They might especially want this because their users are saving the site to their home screen, and opening it without browser chrome.
On iOS, they want it to look like Apple's iOS HIG. On Android, they want it to look like Material Design. Same on other systems — ‘mobile’, ’desktop’, TVs, game console, refrigerators, & who knows where — the Author just wants to match the interface for the overall software environment.
At the moment, Authors can attempt do this by carefully designing a font stack. Like these:
```
/* System Fonts as used by GitHub */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
```
```
/* System Fonts as used by WordPress and Medium */
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
```
This only works if the fonts used by one OS are _not_ shipped in another OS. For example, if Roboto were suddenly shipped in macOS, and the font stack wasn't written in "the right" order, an Author could end up with Roboto being used instead of San Francisco. It's hard to predict what the future will bring.
Currently, Authors must put a lot of effort into researching what each different OS needs — which means it's likely only the most popular ones will be properly supported. OSes (and scripts) that are less-commonly-thought-about-by-Authors are out in the cold.
This is fragile. And finicky. There is no solid way to write robust long-lasting CSS to fill this need.
The current 'solution' also depends on Authors updating their CSS anytime an OS redesign switches to a new font. Which keeps happening — Roboto, San Francisco, Material Design, New York... modern operating systems keep evolving their typography.
Why shouldn't websites be able to say what they mean? — "I want you to use the System UI typography here. When it changes, automatically use me the new one".
Other Authors are using User Agent sniffing via JavaScript to try to identify the OS and deliver the right font. Which is a terrible solution.
What Apple is proposing would eliminate the nonsense and fragility, and provide a real, robust, future-proof, long-term solution to this. Github, WordPress, and Medium are just a few of the massive companies attempting to bubble up the System typography in their interfaces. Authors need this. Both Smashing Mag & CSS Tricks have multiple tutorials covering this problem space.
---
What I see is a proposal for:
```
system-ui
system-ui-serif
system-ui-monospaced
system-ui-rounded
```
where `system-ui` would be the main font for a System UI. And three others that are a a "bit more specific" in a way, to say — oh, give me the monospaced, or give me the serif...
I might suggest changing it to this to this:
```
system-ui
system-ui-serif
system-ui-sans-serif
system-ui-monospace
```
There are suggestions in this thread to define many more. To go nuts. To question why three? Why these three? My answer is: *Well, Typography*.
If you look at typography, both recent innovations and historically, serif, sans-serif, and monospace are the three giant buckets into which most fonts fall. Yes, there are others (cursive, decorative...) but those are used much less commonly, and we've seen hardly any use of such fonts in System UI. Let's _not_ over-engineer this. We are not talking about mapping entire design systems into CSS. The burden is still on the Author to figure out when to use which when or why (or to use a framework like Material Design, to let someone else do to the work for them).
(*Actually more thinking is needed here because of SF Rounded... maybe a `system-ui-alternative` is in order. But we can refine the list of keywords & what they might map to, if we can agree that we should go in this direction...)
---
Next question — what should browser vendors do if they need to define these three "buckets" for a System UI font, and then choose one of those to be the more generic primary `system-ui` choice? How is an Implementer to know what to do. What if there is no obvious 'serif' or 'monospace' choice? Perhaps those fonts are just undefined in certain cases?
We do need to hear from Windows, Android/Material Design, and other OS designers about this. Do their HIGs have enough info? Do all the operating systems have the UI typography systems needed?
Perhaps, browsers simply make their best guess — and kind of make it up. Perhaps we write some guidelines in the CSS spec as to how to do that. Maybe there's some kind of spec process where we ask OS vendors to chime in and fill in these blanks. Or perhaps, even better, this is a pass-through directly from CSS to the OS — the OS defines this, not the browser. (Like Dark Mode and Prefers Reduced Motion.)
---
As for the discussion of the fallbacks, I do think we should keep to what we already have, and not engineer a whole different way of doing things. Authors are going to have to provide fallbacks for older browsers anyway. This will make sense to Authors:
```
font-family: system-ui-sans-serif, system-ui, Helvetica, Aria, sans-serif;
```
We already have an entire mechanism for what happens when a font isn't available. Let's use it.
---
This is _not_ about providing access to new Apple fonts to web designers like other normal system fonts. I feel like a lot of this discussion has been derailed by people who are mad at Apple for not making their fonts more "open". Please let's set those feelings aside, and talk about the actual use case at hand — providing Authors with a way to simply and robustly build a font stack that uses the current System UI typography system for the Users OS. Don't punish Authors who need this problems solved because you don't like a particular tech company's choices regarding their new font files.
--
GitHub Notification of comment by jensimmons
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4107#issuecomment-528644455 using your GitHub account
Received on Thursday, 5 September 2019 23:25:14 UTC