3

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

Jonas Schäfer
  • 20,140
  • 5
  • 55
  • 69
Stefan Majewsky
  • 5,427
  • 2
  • 28
  • 51
  • Isn't the answer already in your question? The linked question seems about a so called 'San Francisco' font being no longer exposed. – Oriol Oct 22 '16 at 19:39
  • @Oriol What do you mean? The linked question says that I need a different syntax to get to the system font on Macs, and I basically want to know what other exceptions I need to consider on other platforms. – Stefan Majewsky Oct 22 '16 at 19:45
  • When you say "default font", do you mean the default UI font on a given platform? – Oriol Oct 22 '16 at 19:47
  • Basically. For a more stringent definition, "the font that feels the least out-of-place on the target platform". – Stefan Majewsky Oct 22 '16 at 19:50

2 Answers2

5

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

Oriol
  • 274,082
  • 63
  • 437
  • 513
3

Here is a css snippet to default to system font, on most platforms (OSX, iOS, Windows, Windows Phone, Android):

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
  • -apple-system — San Francisco in Safari (on Mac OS X and iOS); Neue Helvetica and Lucida Grande on older versions of Mac OS X.
  • system-ui — default UI font on a given platform.
  • BlinkMacSystemFont — equivalent of -apple-system, for Chrome on Mac OS X.
  • "Segoe UI" — Windows (Vista+) and Windows Phone.
  • Roboto — Android (Ice Cream Sandwich (4.0)+) and Chrome OS.

Snippet itself, borrowed from the following issue on github.

You can look up fonts for other OS or older versions of them in this article on css-tricks.