Using System Fonts in Web Pages in 2017

A little while ago I noticed that GitHub changed their default font stack from the Helvetica/Arial/Sans-serif combo that's been prevalent for years to something a little more interesting:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

What we end up with is a nice font stack that matches the look and feel of whatever OS the user is using. I've taken to using this as my "default" stack on certain projects now. It feels clean and modern and you don't have to deal with the unsightly footprint of loading in an external font.

This font declaration makes use of Apple's newish font San Francisco as well as Microsoft's Segoe UI. I'm a little less certain why the emoji font declarations come after the sans-serif catchall. I must have something to do with ensuring that emojis mixed with text always render properly, but I can't find anything definitive about it.