The system-ui font

Imagine:

font-family: system-ui, sans-serif;

Enabled by default in Chrome 56, system-ui is a special font name, that tells Chrome to use the system font (be it Cantarell in Gnome, San Francisco in macOS, etc.)

But system-ui is something new, as far as I know available only in the latest versions of Blink based browsers. So what to do as of today? This is from Bootstrap 4:

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Safari and Firefox on Mac will recognize -apple-system and use the Mac system font, just as system-ui, but not standard. Then comes the standard system-ui, but only available in Chrome 56. Older versions of Chrome, on Mac only, will interpret the same with BlinkMacSystemFont. Now comes Segoe UI, unlike the first three this is a real font name, the one used in Windows since Windows Vista. Now comes: Roboto for Android, Helvetica Neue for some versions of macOS, and Arial for old Windows.

But, but, where is Gnome’s font, you insensitive clod?

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Helvetica Neue", Arial, Helvetica, sans-serif;

Ah that looks better, just added Oxygen for KDE, Ubuntu for.. (I let you guess this one), Cantarell for Gnome, and Helvetica because… well I don’t know why.

If you want, you can still add Droid Sans for old Android, Fira Sans for Firefox OS,  and maybe Lucida Grande for some old versions of macOS. Okey, the list is long but you only have to type it once. You can also define the list using @font-face

Make your own list, decide which platforms you don’t care about, and use it as default in your projects. But don’t be insensitive and include Cantarell in the list!

Of course, if your site tries to sell something or to send a message, and if you care enough, then consider choosing a nice font (adjust letter spacing bla bla). To make it short, maybe something like:

font-family: "My nice font", system-ui, sans-serif;

Check Font Squirrel