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:

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

Smart Date Searching with Solr

June 26, 2017  |  6 minutes to read

Inspirograph

January 26, 2015  |  6 minutes to read