system-ui is not suitable for general web content. Apps might have an argument for using it, but general web content should not use it. https://github.com/w3c/csswg-drafts/issues/3658 has some details (mostly by others, but I chip in towards the end), and I’ve written more in other threads here on HN too which you can search for.
(That `box-sizing: content-box` is a good default might be my most unpopular CSS opinion, but writing off system-ui is probably not too far off it. But I care more about it because it’s one that actually affects users, not just developers. Maybe I should get round to pestering browser makers to improve their defaults for the sans-serif generic family so that “proxy for a maybe-prettier sans-serif” goes away as a reason to use system-ui.)
> system-ui is not suitable for general web content. Apps might have an argument for using it, but general web content should not use it.
I emphatically disagree.
On most platforms, font-family: sans-serif results in Helvética or even worse, Arial, which weren’t created with with the web or screens in mind.
One could argue that a website that has any interactive elements is an app; in 2023, that’s a distinction without a difference. system-ui would work fine for an app or a website.
system-ui also gets a developer great typographical features—optical sizing, extensive internationalization support, small caps, ordinals, etc.—“for free” on current platforms without breaking anything and without downloading a font.
This is a weirdly contentious issue by web devs, but in my experience, system-ui is fine. It's used as the default in popular frameworks like Bootstrap[1], and most of the teething issues have been solved for a while now.
(That `box-sizing: content-box` is a good default might be my most unpopular CSS opinion, but writing off system-ui is probably not too far off it. But I care more about it because it’s one that actually affects users, not just developers. Maybe I should get round to pestering browser makers to improve their defaults for the sans-serif generic family so that “proxy for a maybe-prettier sans-serif” goes away as a reason to use system-ui.)