Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Please never ever use system-ui in your CSS.

A classic article about why: 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...



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?


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.


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.


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?


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.


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.


Win 10 is a different story, what an embarrassment.


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.


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.


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.


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.


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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: