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. 관련

CSS > Article(s)

---

Article(s)

---

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 get pretty darn flexible with it.

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;
}

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;
}

Same font, with changed variable font settings

Here’s a basic demo:

See Uh you actually can use SF variable?? by editor/chriscoyier on CodePen.

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

And some fallbacks:

Chrome on Windows

Firefox on Android (sorry for low quality, that’s just what it looked like in BrowserStack, which rendered on a “real device”)

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:

See SF Variable Table by editor/chriscoyier on CodePen.

Here’s some more usage examples:

See Uh you actually can use SF variable?? by editor/team/codepen on CodePen.

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 get pretty darn flexible with it.