3 ms·

> font-family: sans-serif; > Thank you for a sensible font-family. Not sure this is sensible in 2023. I'd suggest: font-family: system-ui, sans-serif;

> font-family: sans-serif; > Thank you for a sensible font-family. Not sure this is sensible in 2023. I'd suggest: font-family: system-ui, sans-serif; After all, the purpose of system-ui [1] "is to allow web content to integrate with the look and feel of the native OS". Seems like a natural for something that's supposed to be minimalist. system-ui [2] is supported by 96% of web users, so there's no reason not to use it. [1]: https://w3c.github.io/csswg-drafts/css-fonts-4/#system-ui-def https://w3c.github.io/csswg-drafts/css-fonts-4/#system-ui-de... [2]: https://caniuse.com/?search=system-ui https://caniuse.com/?search=system-ui

chrismorgan 4y ago
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 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.)
- alwillis 4y ago
  > 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.
- SquareWheel 4y ago
  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. [1] https://github.com/twbs/bootstrap/blob/adf7b8dc4083b6ddc318e466dbb5d87f3af0ce17/scss/_variables.scss#L606 https://github.com/twbs/bootstrap/blob/adf7b8dc4083b6ddc318e...

chrismorgan 4y ago

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 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.)

alwillis 4y ago
> 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.
SquareWheel 4y ago
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. [1] https://github.com/twbs/bootstrap/blob/adf7b8dc4083b6ddc318e466dbb5d87f3af0ce17/scss/_variables.scss#L606 https://github.com/twbs/bootstrap/blob/adf7b8dc4083b6ddc318e...