Using System Fonts for Web Apps

System font stacks are a relatively new concept in web design, but they’re a good concept, and there are certain cases where we really like to see them.

First of all, let’s define them. A “system font stack” is basically a way of telling the web browser to use the font their operating system is already using. Meaning, if I’m on a current Mac I would see the lovely San Francisco, but if I’m on a current version of Windows I would see Segoe UI, and this would hold true for almost every device.

A good example of this in action is the interface of the popular code hosting and version control service GitHub, which uses this code in their CSS:

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

This is a current, best-practice way of achieving this, and works across all common operating systems today. It looks how you would expect.

Image courtesy Smashing Magazine

But why would you do this?

A good rule of thumb to me is that if you’re building an application that exists on the web, one that customers will use all day long, that’s probably a good case for using the system font. When you do this, you’re making the interface of your app look a lot more “native” in its environment, and this causes less friction to the user. It also does not require any extra network traffic, as those fonts already exist on your device.

If you’re building a traditional website, which is what Needmore does most of the time, you would want to choose the fonts most appropriate to that design. A system font would not be appropriate, it would be boring.

But when you’re building an application, a website intended to be used as an application, you want boring! You generally want the typeface to be neutral to the user, to blend into the operating system, to have your application act as much as possible like a native application on that system.

The administration interface of WordPress on my iPad looks typographically similar to most other apps on my iPad, which makes sense.

Often, this is what happens. As mentioned above, GitHub does this well, as does the administration interface of WordPress. If you look at the public-facing part of WordPress, of course, it’s going to use whatever font you want, as it should. But the back-end is going to use your system font, optimized for your device, not to the whims of the designers who built the interface.

Yet there are many examples of services that don’t use native fonts but probably should. We use Slack all day, and while it has an app that pretends to be native on my Mac, it uses the font Lato, which doesn’t really fit in with any system. Dropbox uses Atlas Grotesk, which I very much like, but I think the system font would be a better choice here too. We use ActiveCollab as a team every day, but I’ve grown tired of the Clear Sans font they use, and would just prefer to use the font I’m most used to on my desktop.

Meanwhile…

If you’re building a web app these days, you should seriously consider using device fonts. Users will appreciate it, even if they can’t put their finger on why.

A sample of Apple’s San Francisco. Because it’s lovely.

I’m not going to change any minds at these companies, so I’ve taken matters into my own hands. The Stylebot extension for Chrome lets you selectively “fix” fonts on websites like those called out above, to just use native font stacks. I’ve done this for Slack, Dropbox, and ActiveCollab, and I’m much happier. It basically just makes them all look better.

If you’re a type nerd, and like your native type for web applications, give it a try. And if you’ve got a solution for this that works in Safari on my Mac, I’d love to hear it.