Fantastic Fast Fonts with system-ui

April 27, 2018  |  1 minute to read

A capital F and a lowercase F

While building the Jekyll template for the latest iteration of my website (the site you’re on now), I discovered a new CSS trick:

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

This snippet (in particular, the system-ui part) instructs the browser to use whatever font is native to the OS. This is great, for two reasons:

  1. There’s no external font to download during page load.
  2. They look gorgeous! The site adopts the feel of the OS, making it feel “just right” on the host platform.
Some CSS code rendered using Comic Sans
Comic Sans is my favorite programming font.

If you have more than one platform available to you (for example a Windows machine, a Mac, or an Android phone), you can see this for yourself by pulling up this site on each and comparing the font styles.

Here’s what this site looks like on a Windows 10 machine (which uses the friendly Segoe UI):

This site rendered on Windows 10

On OS X, with its more serious San Franciso:

This site rendered on a Mac

Android, and its skinny Roboto:

This site rendered on Android

And Ubuntu, rendered with its quirky self-titled Ubuntu:

This site rendered on Ubuntu

Some related links:

Other posts you may enjoy:

Zoom light

May 31, 2024  |  6 minutes to read

I built a weird keyboard

June 26, 2023  |  14 minutes to read

Wordle Bot

January 25, 2022  |  6 minutes to read

Herding Gits

August 26, 2021  |  2 minutes to read

It's finally here! 🎉

May 7, 2021  |  1 minute to read