Stefan Majewsky Stefan Majewsky - 1 month ago 11
CSS Question

How to specify the system’s default serif and sans-serif font-family?

When I learned CSS over a decade ago, the standard (and only) way to use the "default fonts" (whatever that means) was:

font-family: serif;
font-family: sans-serif;


Then, last year, Apple added a custom syntax for their new system font, and Blink did something similar if I remember correctly.

Can someone who's more up-to-date with CSS summarize how my
font-family
property should look like when I just want the default sans-serif or serif font? (I specifically don't want webfonts.)

Answer

The CSS Fonts Module Level 4 draft introduces new generic font families

For most languages and scripts, existing generics can be mapped to something comparable to that script. That’s useful for the web so that generics like serif and sans-serif map to something reasonable independent of the language of the content. But typographic traditions vary widely across the world and many scripts have a variety of common typeface designs that don’t map cleanly into these existing generics. In situations where a similar typeface is used across a wide variety of platforms, it’s useful to extend the set of predefined CSS generic font families to cover these type styles.

If you want to get "the font that feels the least out-of-place on the target platfom", that would be system-ui:

system-ui font family representing the default UI font on a given platform

Comments