Versions of Windows set with non-English languages don't handle the system-ui keyword correctly

[philipbordallo]

Looking into the use of the raw system-ui keyword, I noticed most websites/css frameworks don't use it and instead just have the compiled list of fallbacks. This post by Joan Xie details that it has something to do with the fact that certain versions of Windows set with non-English languages don't handle the system-ui keyword correctly.

Does it make sense to give users the option to not preserve the system-ui keyword and instead just use the fallbacks? Similar to how postcss-custom-properties handles preservation of custom properties.

This way a user doesn't need to supply their own family option to fix this issue and still gets the benefits of postcss-font-family-system-ui constructing the list of fallbacks.

[GrimLink]

@philipbordallo why not just move the system-ui after Segoe UI?
First that post was from 2017
Second, must we avoid an spec because an OS fails at Chinese text?

And from Joan Xie's blog

Never use it before any reference to Segoe UI.

[JLHwung]

That post, in my eyes, is invalid. I will rephrase his/her arguments and explain why it is invalid.

The first argument: Because the system font might lack multiple weights, we should avoid system-ui. Note that CSS would fallback to weight 700 for weights > 500, the behavior of bold Chinese text is expected. For designers, if you are using font: system-ui 12px semibold, keep in mind that many scripts other than Latin have only two font weights and the bold one will be supplied.

The second argument is that when using classic theme, the old font stack (Tahoma /SimSun) will come back. As a native Chinese, I know aesthetically it is bad. But it is expected because system-ui states that your website will follow the system font. And Chromium under the hood provides system-ui from SmallCaptionFont, which is used to display text in the title bars of small windows, such as tool windows.

Therefore, the system handles system-ui quite well. If you are worrying about system-ui will be replaced with locale specific fonts and your website is mostly English, you can always specify Segoe UI before system-ui. But keep in mind that Segoe UI just resembles the system font on Windows (Simplified Chinese).

font-family: Segoe UI, system-ui

Note that macOS does not have similar issues thanks to font cascading.

Does it make sense to give users the option to not preserve the system-ui keyword and instead just use the fallbacks?

In contrast of using fallbacks, we are using browserslist and when one targets to latest browsers, the fallbacks will be totally eliminated. Therefore I don't see extra benefit to support preserve: true.

[philipbordallo]

@JLHwung thanks for taking the time to write a detailed response.

The downside to using font-family: Segoe UI, system-ui to protect against this issue is if a Mac user has Segoe UI installed on their system, they now see Segoe UI.

Looking at popular websites/css frameworks that all use a "system" font-family stack, I was only able to find one that uses the system-ui keyword in their stack (LinkedIn).

Maybe the reason why so many exclude it is because of the article and they made the assumption to follow it's advice. Or maybe they've done testing on their own and concluded that the keyword caused issues. But it still remains a fact that in 2019 while "system" font stacks are being used more and more, the actual system-ui keyword is being left out.

GitHub

font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol

Instagram

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif

ESPN

font: 16px -apple-system,BlinkMacSystemFont,"Roboto","Arial","Helvetica Neue","Helvetica",sans-serif;

LinkedIn

font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Fira Sans",Ubuntu,Oxygen,"Oxygen Sans",Cantarell,"Droid Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Emoji","Segoe UI Symbol","Lucida Grande",Helvetica,Arial,sans-serif;

Wordpress Admin

font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;

Notion

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"

Bootstrap

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

Tachyons

font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;

Tailwind

font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji

[JLHwung]

@philipbordallo Sorry for the late reply. I think that system-ui does not see wide adoption because -apple-system,BlinkMacSystemFont works on Firefox, Safari and Chromium. So there is no incentive for developer to opt in to the standard because the low frequency of font-family rule compared to things like border-radius, it just sits in the shared.css rule and nobody gonna touch it.

I realize that a preserve: boolean option could be still useful on some niche cases, i.e. system-ui could be rendered with a serif font when the UI font is serif, though the browser does exactly what spec defines, developer may want to limit the usage of system-ui to macOS/iOS only, which is a syntax sugar over -apple-system,BlinkMacSystemFont.

Related: w3c/csswg-drafts#3658

[philipbordallo]

Not having to remember all the different variations/reasons for those variations of font family per system seems like a decent incentive. Especially if something like -apple-system, BlinkMacSystemFont eventually becomes vestigial.

Also I forgot to add Twitter to the list as someone using system-ui.

Twitter

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;

Side note: It would be cool to dig through the HTTP Archive's dataset and see who else is using system-ui but unfortunately the parsed_css dataset is too big for the free tier of Google BigQuery.

[JLHwung]

preserve: boolean is supported in 4.3.0.