4 ms·

-apple-system and BlinkMacSystemFont are now both obsolete and covered by system-ui. Almost all of the named fonts in common font stacks are either now superflu

-apple-system and BlinkMacSystemFont are now both obsolete and covered by system-ui. Almost all of the named fonts in common font stacks are either now superfluous or not a good idea any more, causing more harm than they solve. For sans-serif, I recommend at most three items: a web font, system-ui, and sans-serif. No more. I would note that system-ui is not necessarily sans-serif, but in practice it almost always is, and ui-sans-serif (along with ui-serif, ui-monospace and ui-rounded) is only implemented by Safari yet. For serif, I recommend at most three items, possibly including one named font: a web font, Georgia, and serif. See, serif is probably a narrower serif (something like Times New Roman), but Georgia a wider one—they’re fairly different in character, so that it can be worth including if you’re doing so deliberately. For monospace, I recommend at most four: a web font, ui-monospace (I wouldn’t, but some macOS people prefer it), Consolas, and monospace. I think Consolas is worth keeping in until Firefox updates its Windows default (https://bugzilla.mozilla.org/show_bug.cgi?id=713680 https://bugzilla.mozilla.org/show_bug.cgi?id=713680), because Courier New is that bad. Most font stacks now are just cargo culting, and are mostly mildly harmful.

OJFord 5y ago
What's the benefit of putting `system-ui` in front of `sans-serif` that outweighs the down-side that it might not be sans serif? Also, even with `ui-sans-serif` (i.e. if it's guaranteed that it is/someone's doing something deliberate if it isn't) why's that what you want for the sans serif text on your web page, that isn't 'system UI'?
michaelcampbell 5y ago
> superfluous or not a good idea any more, causing more harm than they solve. Can you expand on why?
- pville 5y ago
  Firefox has left me scratching my head a few times, I think they limit the amount of fallback fonts to resist fingerprinting. Long lists like these will get cut short. Text you intended to be monospace might not be rendered as such as the "monospace" at the very end was never reached.
  - chrismorgan 5y ago
    I haven’t ever encountered that, and would expect the limit to be rather long (certainly no less than 32 elements, probably far longer) if there is such a limit. What there is is whitelisting, only exposing certain fonts in order to reduce font list fingerprinting: https://bugzilla.mozilla.org/show_bug.cgi?id=1121643 https://bugzilla.mozilla.org/show_bug.cgi?id=1121643.
  - michaelcampbell 5y ago
    Huh, ok, never experienced that but that is probably just due to you and I going to different sites. I do use FF as my daily non-work driver though.
TacticalCoder 5y ago
> Almost all of the named fonts in common font stacks are either now superfluous or not a good idea any more It's all fallback, how can they be "not a good idea"? That's the beauty of these CSS font stacks: you can always put first the latest best practices. > Most font stacks now are just cargo culting, and are mostly mildly harmful. I disagree and if anything they're not complete enough (I'll write another comment).
- chrismorgan 5y ago
  It’s not all fallback: it’s getting in the way of the actual fallback monospace/sans-serif/serif. The cargo-culting nature of this means that there tend to be one or two bad fonts in there, and sometimes some systems will have bad fonts aliased to otherwise good names (e.g. that’s why I say “don’t write Courier”, because although it’s fine on macOS and probably aliased to something reasonable on Linux platforms, Windows aliases Courier to Courier New, which is a terrible font). I don’t want your idea of a suitable font, in general, because the default defaults (that is, the browser’s default value for sans-serif) are thoroughly good enough, and I changed my defaults, and by writing the likes of `…, Arial, Helvetica, sans-serif`, you didn’t change anything for most people, but prevented me from getting my chosen default sans-serif. Long font stacks are fighting a fundamentally unwinnable battle with small potential benefits, high uncertainty, and definite costs (normally mild) to people that actually expressed preferences to their user agent.
thrdbndndn 5y ago
> I would note that system-ui is not necessarily sans-serif And that's exactly where it causes problem [1]. https://infinnie.github.io/blog/2017/systemui.html https://infinnie.github.io/blog/2017/systemui.html
- chrismorgan 5y ago
  Interesting, I hadn’t come across that particular issue, though it seems obvious now (I know about those ugly old fullwidth fonts). And I’m guessing that quite incidentally -apple-system and BlinkMacSystemFont are unlikely to be affected. I’ll need to reconsider my recommendation—though I will note that I’ve not generally used system-ui anyway, just considered it acceptable. I wonder if it’s time to lobby browsers to update their default sans-serif fonts, as they have updated their monospaces over the last few years (except for Firefox on Windows). The whole ui-sans-serif/ui-serif/ui-monospace thing is a bit of a crock. (And I wonder if I stand any chance of getting the 13px monospace default size killed. That thing is such an utterly obsolete nuisance—though of course removing it from monospace doesn’t remove the concept, which is used in fonts of various languages.)
- lelandfe 5y ago
  I would never in a million years think of this. Thanks for the link.

OJFord 5y ago

What's the benefit of putting `system-ui` in front of `sans-serif` that outweighs the down-side that it might not be sans serif? Also, even with `ui-sans-serif` (i.e. if it's guaranteed that it is/someone's doing something deliberate if it isn't) why's that what you want for the sans serif text on your web page, that isn't 'system UI'?

michaelcampbell 5y ago

> superfluous or not a good idea any more, causing more harm than they solve. Can you expand on why?

pville 5y ago
Firefox has left me scratching my head a few times, I think they limit the amount of fallback fonts to resist fingerprinting. Long lists like these will get cut short. Text you intended to be monospace might not be rendered as such as the "monospace" at the very end was never reached.
- chrismorgan 5y ago
  I haven’t ever encountered that, and would expect the limit to be rather long (certainly no less than 32 elements, probably far longer) if there is such a limit. What there is is whitelisting, only exposing certain fonts in order to reduce font list fingerprinting: https://bugzilla.mozilla.org/show_bug.cgi?id=1121643 https://bugzilla.mozilla.org/show_bug.cgi?id=1121643.
- michaelcampbell 5y ago
  Huh, ok, never experienced that but that is probably just due to you and I going to different sites. I do use FF as my daily non-work driver though.

TacticalCoder 5y ago

> Almost all of the named fonts in common font stacks are either now superfluous or not a good idea any more It's all fallback, how can they be "not a good idea"? That's the beauty of these CSS font stacks: you can always put first the latest best practices. > Most font stacks now are just cargo culting, and are mostly mildly harmful. I disagree and if anything they're not complete enough (I'll write another comment).

chrismorgan 5y ago
It’s not all fallback: it’s getting in the way of the actual fallback monospace/sans-serif/serif. The cargo-culting nature of this means that there tend to be one or two bad fonts in there, and sometimes some systems will have bad fonts aliased to otherwise good names (e.g. that’s why I say “don’t write Courier”, because although it’s fine on macOS and probably aliased to something reasonable on Linux platforms, Windows aliases Courier to Courier New, which is a terrible font). I don’t want your idea of a suitable font, in general, because the default defaults (that is, the browser’s default value for sans-serif) are thoroughly good enough, and I changed my defaults, and by writing the likes of `…, Arial, Helvetica, sans-serif`, you didn’t change anything for most people, but prevented me from getting my chosen default sans-serif. Long font stacks are fighting a fundamentally unwinnable battle with small potential benefits, high uncertainty, and definite costs (normally mild) to people that actually expressed preferences to their user agent.

thrdbndndn 5y ago

> I would note that system-ui is not necessarily sans-serif And that's exactly where it causes problem [1]. https://infinnie.github.io/blog/2017/systemui.html https://infinnie.github.io/blog/2017/systemui.html

chrismorgan 5y ago
Interesting, I hadn’t come across that particular issue, though it seems obvious now (I know about those ugly old fullwidth fonts). And I’m guessing that quite incidentally -apple-system and BlinkMacSystemFont are unlikely to be affected. I’ll need to reconsider my recommendation—though I will note that I’ve not generally used system-ui anyway, just considered it acceptable. I wonder if it’s time to lobby browsers to update their default sans-serif fonts, as they have updated their monospaces over the last few years (except for Firefox on Windows). The whole ui-sans-serif/ui-serif/ui-monospace thing is a bit of a crock. (And I wonder if I stand any chance of getting the 13px monospace default size killed. That thing is such an utterly obsolete nuisance—though of course removing it from monospace doesn’t remove the concept, which is used in fonts of various languages.)
lelandfe 5y ago
I would never in a million years think of this. Thanks for the link.