3 ms·
The system font stacks are trying to target the fonts that the operating system uses by default (e.g., using San Francisco as the sans serif font on a Mac). If
by chipotle_coyote 4y ago
The system font stacks are trying to target the fonts that the operating system uses by default (e.g., using San Francisco as the sans serif font on a Mac). If you just use "serif", "sans-serif", and "monospaced", you're targeting the fonts that the browser uses by default, which probably aren't the same fonts.
So, you're "doing it wrong" in the sense that you're not actually doing the same thing, but you're not wrong in some kind of cosmic sense. :)
(This does make me wonder for the first time why, when system font stacks started to become popular, browsers didn't just make the system fonts the defaults, though. Sure, it would mean that web pages that only specified "sans-serif" would change appearance between the old and new browser versions, but if they only specified "sans-serif" they were declaring "I don't care what font you give me as long as it's sans serif" anyway.)
- kevincox 4y agoBrowsers "fixed" the problem by adding system-ui, ui-sans-serif and ui-serif. I guess displaying an ugly font was important for backwards compatibility so instead of fixing millions of existing wrbsites they created new keywords that you need to opt into.