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

Chrome and Safari have recently shipped "system-ui" which is a generic font family that can be used in place of "-apple-system" and "BlinkMacSystemFont" in the following examples. Hat tip to J.J. for the info.

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;
}

Note: This method should only be used on the font-family property instead of the font shorthand. Booking.com published a thorough write-up on the warnings it generates due to the leading font appearing to be a vendor prefix.

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!

    • User Avatar
      AJ Kandy

      I believe that’s the private (system) font name used by the OS. It doesn’t show up in system or application font pickers, but it can be manually specified.

  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 :-)

  4. User Avatar
    Josh Sadler
    Permalink to comment#

    It’s worth noting that system-ui works in place of BlinkMacSystemFont in newer versions of Chrome.

  5. User Avatar
    rok

    how about iOS?
    Will it support any of these syntaxes?
    Will it render using which font?

    • User Avatar
      Geoff Graham

      iOS uses San Francisco as the system font, just like OS X El Capitan. Does it render any differently for you on Mobile Safari than it does on desktop?

  6. User Avatar
    Andrew Borstein

    Booking.com wrote about their experience implementing system font stack, and warned against placing -apple-system first if you use font instead of font-family.

    body {
    font: 16px/1.2 BlinkMacSystemFont, -apple-system, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
    }

    vs.

    body {
    font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
    }

    Maybe there could be an asterisk in here about that. Otherwise, very cool stuff!

    • User Avatar
      Geoff Graham

      Absolutely, good call! In fact, we published a link to the Booking.com post in another post and should have indicated it here as well. Consider this post updated!

  7. User Avatar
    Ben Read
    Permalink to comment#

    Please excuse my ignorance, but what benefit is this over using serif or sans-serif?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Those don’t match the system font. For example, on my Mac, if I used sans-serif I’d get Helvetica, while the system font is San Francisco.

    • User Avatar
      Chris Tillam
      Permalink to comment#

      Hi Ben, take a look at my comment below, and the link.

    • User Avatar
      Ben Read
      Permalink to comment#

      Thanks both, hadn’t realised that … will give it a try!

  8. User Avatar
    j.j.
    Permalink to comment#

    “-apple-system” and “BlinkMacSystemFont” are replaced by the new standard “system-ui” generic font family.
    “system-ui” is also supported by Firefox.

    See
    https://www.chromestatus.com/feature/5640395337760768

  9. User Avatar
    AJ Kandy

    Is there a similar stack for system monospace fonts? Fairly simple to get the correct font name for most non-Apple platforms, but it’d be nice to access SF Mono through a flag like -apple-system-monospace. So far there doesn’t seem to be any documentation about this.

  10. User Avatar
    David
    Permalink to comment#

    Does this mean that if you don’t use the font-face stack as per Jonathan Neal’s approach, you’ll have to rely on your browser to “faux” bold and italic things?

  11. User Avatar
    Chris Tillam
    Permalink to comment#

    I started from scratch again recently, made an html page, and then realised how many fonts I’d need to upload for this page to be generally available… so I made a pdf. Maybe it’ll be useful to amateurs like me.

    It’s a series of typefaces (sans, serif, humanist, mono) each with a few lines of identical sample text, arranged by increasing size. Take your pick: a site I’m working on has a column width of 540px, so that’s the line width used.

    Scale it to 900% (don’t ask!) for an accurate rendition of the html on my 1920 x 1200 mac screen.

    Even if the scaling isn’t reproducible, the relative sizes and strengths of the fonts can be gauged.

    wavehands.net/some text examples.pdf

    Cheers.

  12. User Avatar
    riophae
    Permalink to comment#

    Seems IE11 can not recognize -apple-system in font-family. IE11 considers that as an invalid value.

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-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag