What does HackerNews think of modern-font-stacks?
System font stack CSS organized by typeface classification for every modern operating system
—⁂—
A few remarks (not all that I could make, but I should sleep).
System UI: risky, it’s a trap, there’s basically no legitimate scenario for these semantics on the public web. See https://github.com/w3c/csswg-drafts/issues/3658 (skim through a bit, I’ve got a comment near the end too).
Monospace Slab Serif: every one of the fonts named here is a bad font:
(a) Nimbus Mono PS mangles things like the two-column `fi`, ligating them to a single-column `fi`. See https://github.com/ArtifexSoftware/urw-base35-fonts/issues/3....
(b) Courier New is unreasonably thin due to bad digitisation techniques which used to be worked around by hinting and ClearType special-casing, but it’s common for neither of those to work to make it tolerable any more. Its 400 weight is more like a 250 (if even that), and painful to read in many common configurations. Never use it.
(c) Cutive Mono apparently copied Courier New’s known-awful thinness!? What were they thinking?
Monospace Code: seriously, just go `monospace, monospace` these days. Firefox 98 on Windows was the last browser where this wasn’t at the very least perfectly adequate. (The doubling is to work around the stupid probably-13px font size misfeature that I’d like to try to convince browser makers to ditch, but haven’t tried yet.)
> Emoji Support
Does adding these fonts to the end of the stack actually achieve anything useful? I don’t recall these being necessary or useful. (I vaguely recall some sort of priority issue related to text/graphical representations, but that was quite a few years back and I’d expect it to have been dealt with now, though it’s possible some U+FE0F might be needed if you omit this?—though frankly that’d be needed anyway for universal support. Anyway, I’d like concrete explanation of what this stuff does, if anything.)
> Anti-Aliasing
If I recall correctly, these tweaks are largely Apple-specific, grossly misleading in name, highly controversial, and probably a waste of time. I invite correction or further education, because I haven’t thought about them for maybe a decade and don’t use a platform where they do anything.
—⁂—
This is much better-thought out than most sets of suggestions, but I’d honestly still suggest dropping nuance in most cases, and just using `serif`, `sans-serif` or `monospace, monospace`. But if you want a certain general sort of character, this is pretty good stuff. I’ve definitely done `font-family: Georgia, serif` where I wanted to express a preference for a wider sort of serif, and I’d do it again¹.
—⁂—
¹ Even if I personally will get my own chosen serif font, since I’ve unticked Firefox’s Settings → Fonts → Advanced → Allow pages to choose their own fonts, instead of your selections above. Try it yourself, you might be pleasantly surprised at how much the consistency improves the web, like I was. You might also develop a still-deeper hatred of non-zero letter-spacing on body text, which is absurdly common for something that has absolutely no legitimate use case in English text.