Reminder that `system-ui` is well supported, when you use it on macOS you get San Francisco which is a variable font, which is fun, and the fallbacks are pretty good.

You can use the value system-ui in your font-family in CSS, you get a font that represents the default user interface font. Meaning you get something kinda Windowsy on Windows, Linuxy on Linux, and Macsy on macOS, etc. It’s well supported across browsers and platforms. I think it’s a good choice for many situations.

html {
  font-family: 100%/1.4 system-ui, sans-serif;
}Code language: CSS (css)

I’ve only got a Mac, so what I see when using it is San Francisco. It’s a pretty fancy font, and with zero download cost, I think that’s great.

It also happens to be a variable font, meaning we can change certain aspects of the font programmatically. In the case of San Francisco, we’ve got a weight ("wght") and width ("wdth") axis that can pretty dramatically change the look of it.

h1 {
  font-variation-settings: 
    "wght" 900,
    "wdth" 700;
}Code language: CSS (css)

Here’s a basic demo:

That gives us this expanded <h1>, narrowed and thin <h2>, and slightly thinned out <p>. On my Mac:

And some fallbacks:

Not bad, if you ask me (websites don’t need to look the same in all browsers), and actually, it might look extra good to long-time users of those browsers/platforms, as it looks like what the UI looks like, at least somewhat. That’s kind of the point.

Here’s a spectrum of weights and widths:

Here’s some more usage examples: