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:

The Next Chapter

December 4, 2018  |  Less than 1 minute to read

ES6 Object Literal Shorthand Is Fun And Kind Of Scary

November 16, 2018  |  1 minute to read

Shell-ing With TypeScript

June 17, 2018  |  2 minutes to read

My First "Hello, World!"

June 7, 2018  |  5 minutes to read

Live Reloading An Angular 2+ App Behind NGINX

May 14, 2018  |  4 minutes to read