6 ms·

Please never ever use system-ui in your CSS. A classic article about why: https://infinnie.github.io/blog/2017/systemui.html https://infinnie.github.io/blog/20

Please never ever use system-ui in your CSS. A classic article about why: https://infinnie.github.io/blog/2017/systemui.html https://infinnie.github.io/blog/2017/systemui.html In this particular case, it totally ruined the fonts of Wikipedia for East-Asian (CJK) Windows users. Just in case the article itself isn't convincing enough, below is a list of some websites that have tried "system-ui" and then reverted it semi-immediately: Facebook/bootstrap, GitHub, Twitter, Stack Overflow...

thex10 5y ago
Thanks for sharing! I love system-ui and this is my first time hearing of this -- will definitely reconsider.
arcbyte 5y ago
Isnt the right answer for Microsoft or users to fix their system font? Why would east Asian users have a crappy system font selected in their OS?
- kitsunesoba 5y ago
  This feels like a failing on Microsoft’s part, at least for current versions of Windows. The bar for a viable system font has been raised and it’s their responsibility as an OS vendor to ensure the bar is met across localizations. As for old versions of Windows… well, one should probably look at their target market/user base. If your demographic is firmly Roman western use of system-ui is probably fine — as far as I’m aware, the bulk of remaining users of XP/7 are in East Asia, chiefly China.
  - Spivak 5y ago
    You can call it a failing on MS's part up until you have real users that are impacted because then it really doesn't matter who's fault it is when users can't use your site. So MS should fix this and until then you shouldn't use system-ui.
    - mixmastamyk 5y ago
      Why does a clumsy font mean you can't use the site? And why is the solution not to upgrade your 15-year-old dangerously-insecure EOL OS?
  - mixmastamyk 5y ago
    Those releases have been EOL for 10+ and 5+ years respectively. There are a number of free options. I don't see any reason to make any effort to support those folks, especially when the font is merely ugly in a cosmetic sense, and not unreadable.
    - kingcharles 5y ago
      My counter-argument would be that even if a platform is EOL, if it represents a serious chunk of your audience then you should probably do what you can to accommodate them. Especially if, as here, you might be able to fix it with a very simple change.
    - thrdbndndn 5y ago
      This problem isn't limited to Windows 7/2008 or XP. It affects Win10 too. >especially when the font is merely ugly in a cosmetic sense, and not unreadable Eh, you won't go very far with this attitude in any design team. Also, anyone who tried to manually craft font-family fallback path are already making effort. You can literally choose to not assign any font. Actually, it probably works better: most of browsers have sensible default (which often times is system font) already.
      - mixmastamyk 5y ago
        Win 10 is a different story, what an embarrassment.
sjdz 5y ago
Interesting, thanks for that. I was under the impression that using "system-ui" was the way to go! I do plan to add font choice as a setting in a future version, so that will solve this.
- thrdbndndn 5y ago
  Just to note, you can achieve having "system font" for all the major OSs without using "system-ui" keyword. Actually, "system-ui" doesn't even do anything in Firefox on Windows right now (and it behaves exactly like -apple-system on MacOS), so you shouldn't rely on it anyway.
kingcharles 5y ago
This is great info, thank you. I'm going to set up some VMs so I can test East-Asian locales in future to make sure I've not fucked anything up.

thex10 5y ago

Thanks for sharing! I love system-ui and this is my first time hearing of this -- will definitely reconsider.

arcbyte 5y ago

Isnt the right answer for Microsoft or users to fix their system font? Why would east Asian users have a crappy system font selected in their OS?

kitsunesoba 5y ago
This feels like a failing on Microsoft’s part, at least for current versions of Windows. The bar for a viable system font has been raised and it’s their responsibility as an OS vendor to ensure the bar is met across localizations. As for old versions of Windows… well, one should probably look at their target market/user base. If your demographic is firmly Roman western use of system-ui is probably fine — as far as I’m aware, the bulk of remaining users of XP/7 are in East Asia, chiefly China.
- Spivak 5y ago
  You can call it a failing on MS's part up until you have real users that are impacted because then it really doesn't matter who's fault it is when users can't use your site. So MS should fix this and until then you shouldn't use system-ui.
  - mixmastamyk 5y ago
    Why does a clumsy font mean you can't use the site? And why is the solution not to upgrade your 15-year-old dangerously-insecure EOL OS?
- mixmastamyk 5y ago
  Those releases have been EOL for 10+ and 5+ years respectively. There are a number of free options. I don't see any reason to make any effort to support those folks, especially when the font is merely ugly in a cosmetic sense, and not unreadable.
  - kingcharles 5y ago
    My counter-argument would be that even if a platform is EOL, if it represents a serious chunk of your audience then you should probably do what you can to accommodate them. Especially if, as here, you might be able to fix it with a very simple change.
  - thrdbndndn 5y ago
    This problem isn't limited to Windows 7/2008 or XP. It affects Win10 too. >especially when the font is merely ugly in a cosmetic sense, and not unreadable Eh, you won't go very far with this attitude in any design team. Also, anyone who tried to manually craft font-family fallback path are already making effort. You can literally choose to not assign any font. Actually, it probably works better: most of browsers have sensible default (which often times is system font) already.
    - mixmastamyk 5y ago
      Win 10 is a different story, what an embarrassment.

sjdz 5y ago

Interesting, thanks for that. I was under the impression that using "system-ui" was the way to go! I do plan to add font choice as a setting in a future version, so that will solve this.

thrdbndndn 5y ago
Just to note, you can achieve having "system font" for all the major OSs without using "system-ui" keyword. Actually, "system-ui" doesn't even do anything in Firefox on Windows right now (and it behaves exactly like -apple-system on MacOS), so you shouldn't rely on it anyway.

kingcharles 5y ago

This is great info, thank you. I'm going to set up some VMs so I can test East-Asian locales in future to make sure I've not fucked anything up.