System Font Stack

Defaulting to the system font of a particular operating system can boost performance because the browser doesn't have to download any font files, it's using one it already had. That's true of any "web safe" font, though. The beauty of "system" fonts is that it matches what the current OS uses, so it can be a comfortable look.

What are those system fonts? At the time of this writing, it breaks down as follows:

OS Version System Font
Mac OS X El Capitan San Francisco
Mac OS X Yosemite Helvetica Neue
Mac OS X Mavericks Lucida Grande
Windows Vista Segoe UI
Windows XP Tahoma
Windows 3.1 to ME Microsoft Sans Serif
Android Ice Cream Sandwich (4.0)+ Roboto
Android Cupcake (1.5) to Honeycomb (3.2.6) Droid Sans
Ubuntu All versions Ubuntu

Get to the snippet, already!

The reason for the preface is that it shows how deep you may need to go back to support system fonts. Additionally, it helps show that with new system versions, come new fonts, and thus the possibility of needing to update your font stack.

Method 1: System Fonts at the Element Level

One method for applying system fonts is by directly calling them on an element using the font-family property.

GitHub uses this method on their site, applying system fonts on the body element:

/* System Fonts as used by GitHub */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Both Medium and the WordPress admin use a similar approach, with a slight variation, most notably support for Oxygen Sans (created for the GNU+Linux operating system) and Cantarell (created for the GNOME operating system). This snippet also drops support for certain types of emoji and symbols:

/* System Fonts as used by Medium and WordPress */
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

Method 2: System Font Stacks

The limitation of the first method is that you have to call the full stack of fonts each time it's used on an element and that can get cumbersome and bloat your code, depending on where and how it's used.

Jonathan Neal offers an alternative method where system fonts are declared using @font-face.

The benefit here is that you can declare the fonts once and then that becomes the thing you can on the font-family property instead of the long list of fonts each and every time.

/* Define the "system" font family */
@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

/* Now, let's apply it on an element */
body {
  font-family: "system";
}

Note that Jonathan's full example illustrates the capability to define variations of the system font family that was defined in the snippet above to account for italics, bolding, and additional weights.

Related

Comments

  1. User Avatar
    Matthew Graybosch
    Permalink to comment#

    This makes a lot of sense and I plan to use this in my next website, but these are all sans-serif fonts. I can’t help but wonder if it’s possible to create similar stacks for system-default serif and monospace fonts. I might want to use the serif fonts on headings or blockquotes for emphasis, and apply monospace to the pre and code elements.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Is there any OS that uses a serif for a system font?

    • User Avatar
      Matthew Graybosch
      Permalink to comment#

      Chris Coyier asked:

      Is there any OS that uses a serif for a system font?

      Chris, I could be wrong but I don’t think any OS or X11 desktop environment uses serif fonts as system fonts. However, my original comment could have been clearer. I was interested in using stacks of serif and monospace fonts that draw upon fonts that come pre-installed with various operating systems for use in bundled word processors like WordPad and terminal emulators like Terminal.app.

      For example, Windows comes with Times New Roman and Courier New. OS X comes with Apple Garamond and Monaco. Prior to version 4.0, Android came with Droid Serif and Droid Mono in addition to the Droid Sans UI font.

      Based on preliminary research I came up with the following “system” serif and monospace stacks. I’m pulling these out of my Sass variables partial.

      $systemSerif: "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", "Times","Source Serif Pro", serif;
      $systemMonospace: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
      

      These are only preliminary; I’m nowhere near done testing.

  2. User Avatar
    0xADADA
    Permalink to comment#

    Where does that font name string come from: .SFNSText-Light? I dont see that name anywhere in the font definition file. Just curious, cheers!

  3. User Avatar
    Jakob E
    Permalink to comment#

    Using local fonts will use as much network (none) as e.g. sans-serif – why the second approach seems odd to me. If it’s about typing less I would use a SCSS variable – like:

    $system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    
    body {
      font-family: $system;
      font-weight: 400; 
    }
    .light {
      font-weight: 300;
    }
    

    Please correct me if I’m wrong :-)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag