Zach’s ugly mug (his face)

Zach Leatherman

A Font Family Reunion

30 Sep 2014 Zach Leatherman 10 min read

Go directly to Font Family Reunion or read more about it:

For my last side project I decided to redo the iconic W3C specification status banners using CSS. While that project went relatively well, with a side benefit of learning a little bit more about W3C process, one of the first questions I was asked was about the use of the local Gill Sans font instead of a web font. I immediately wondered two things:

  1. How strict are the W3C brand standards?
  2. How well supported is Gill Sans across different operating system and browser combinations?

Turns out the brand standards were not really strict, as Chris informed me later—a fallback sans-serif webfont would work fine. For the second question, things were more ambiguous. There wasn't an easy way to lookup default font lists for different operating systems, especially not specifically for ones that needed to be available through CSS font-family. What I really wanted was a caniuse.com for default local fonts.

Building fontfamily.io

I set out to build such a system. I already had a very nice head start, having built my own utility (fontfaceonload) to test if remote web fonts had loaded successfully. You might remember this utility from my research into icon fonts. It only required a few minor tweaks in order to test local fonts in addition to remote fonts. Of course, none of this is necessary if you have the CSS font loading API available to you, but I wanted to test operating system and web browsers that were older than the newly minted native API.

If you’re curious how fontfaceonload works internally, documentation is available on GitHub.

But there was another hurdle. There is no API through which you can retrieve a list of all the installed fonts, so I had to compile a list manually. If you have access to the shell on the host operating system, *nix machines provide a fc-list command to retrieve a list of installed fonts. Also, most operating systems actually publish a list of installed fonts on the web in their support pages, so I compiled one big giant list of font families from a bunch of these sources.

The test page then iterates through the list and tests over 1000 different font family names to see if the current browser supports them. I used Browserstack for most of this, as well as one of the best perks of working at Filament Group, a home device test lab. Running the test page on a bunch of devices and virtual machines gives us a nice list of results: the default installed fonts.

Default Keywords are Browser Madness

But that’s not all. Font Family Reunion will also tell you what the five standard CSS keyword font-families are aliased to in each operating system. They are serif, sans-serif, monospace, and the lesser known fantasy and cursive. This is where browsers diverged from operating system standards into browser specific behavior. Browsers have made their own decisions about what the defaults should be and boy do they vary.

Predictably, many browsers defer to the default web browser’s default fonts, especially on Mac OS and iOS (Safari). If you’re gonna use font-family: fantasy on an Apple device, it’s gonna be Papyrus (stylistically probably a bad choice, but at least it’s consistent).

Then you open up Windows. On Windows, default fonts are a free-for-all, even between versions of their own browser, Internet Explorer.

font-family: fantasy is aliased to four different typefaces across six different browsers on Windows 7, and three different typefaces across four different browsers on Windows 8. Unless you think that Impact and Papyrus look alike (they don’t), I would stay away from font-family: fantasy for now.

font-family: cursive is a little better, but not much. The aliases there range from Comic Sans to Apple Chancery to Snell Roundhand.

It was also interesting to note that on Windows 7 and up, both Chrome and Opera decided to forgo the standard monospace favorite of Courier New (on Windows) and instead go with Consolas, a newer and better Microsoft creation. Given the free-for-all that is default keywords on Internet Explorer, I would have guessed that Microsoft would be more progressive with their monospace choice—but I’ll leave that to the missed connections section on Craigslist.

The other little factoid that Font Family Reunion exposed is the Mac/Windows duel that is Helvetica/Arial and Times/Times New Roman. Did you know that on Windows, Helvetica is aliased to Arial but on Mac both Helvetica and Arial are available separately? Same with Times (aliased to Times New Roman on Windows) and Times New Roman (available on both). So, font-family: Helvetica, Arial and font-family: Arial, Helvetica operate much differently.

And if all of that wasn’t confusing enough, Android tries to be tricky and uses typefaces that are not actually exposed through CSS font-family. It keeps them hidden behind aliases. Droid Sans is available as an explicit font-family name, but Droid Sans Mono (the default monospace) and Droid Serif (the default serif) are not.

A Manageable Mess

So, what have we learned? The rules keep things pretty simple:

  1. Always specify a default CSS keyword fallback, don’t let the browser use its own default choice of serif (it doesn’t necessarily even match font-family: serif).
  2. Don’t use fantasy or cursive.
  3. Don’t go overboard with your stack. font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; is the first stack listed on CSSFontStack.com. Running this through fontfamily.io reveals that Arial is used everywhere (and aliased on Android). The middle two families are never used.

It would be interesting to test out the font-family stacks on CSS Tricks or Designer Daily and see what comes out!

Remember, when you’re using @font-face to load custom web fonts, the fallback font-family experience—what shows while the remote font is loading—is important too. Maybe you could even go without using a few custom web fonts, or not use any at all? It’s certainly worth asking the question.

Go to your Font Family Reunion.

11 Comments

➡ Load Disqus to Leave a Comment ⬅

This makes me miss codestyle.org with the font survey and font stack builder all the more, still wondering what happened to it, but you can at least get an idea how it was from the wayback machine:
http://web.archive.org/web/...

Very cool! According to fontfamily.io some of the stacks on http://web.archive.org/web/... are very redundant!

For example, `Cambria, Hoefler Text, Utopia, Liberation Serif, Nimbus Roman No9 L, Times, Times New Roman` should just be http://fontfamily.io/Cambri...

Redundant? It'll be getting out of date now given the codestyle.org site disappeared from the net in 2013 :)

The data on installed fonts was also user submitted and thus probably reflected web industry peoples installed fonts more than general public. But at least it was something that allowed an educated guess.

That said I believe you're shortening that particular stack largely because fontfamily.io doesn't include any Linux distributions – Utopia, Liberation and Nimbus Roman families all being associated with Linux desktops in one way or another. Or at least they were a couple of years ago...

I should say: thanks for building fontfamily.io, will definitely be bookmarking it.

Thanks for the feedback!

Good point about Linux. I am in the middle of adding support for Ubuntu 14. Any other distros you think are important?

Filed here: https://github.com/zachleat...

I’ve never understood why `Arial, "Helvetica Neue", Helvetica, sans-serif;`. It doesn’t make any sense to me: if you really want the available everywhere Arial over any Helvetica variant why specify them at all?

Yep, you’re absolutely right. `Arial, Helvetica Neue, Helvetica, sans-serif` should be simplified to `Arial, sans-serif`

There's often a certain amount of history behind things like this. In this case I suspect it was Arial for windows, Helvetica Neue for osx, Helvetica for classic Mac OS – Arial wasn't always available everywhere. But I suspect the original order would have been "Helvetica Neue", Helvetica, Arial, sans-serif; and what you're seeing is a corruption of that to favour Arial.

And yes its pointless these days. People will often end up forgetting the why and just do things because "we've always done it this way" – it's good to question everything ;)

I recently made some test pages to see whether an overly-long font stack would have a negative impact on page loading speed. I expected that because the machine has to check each font name in the list until it finds one that is available, it would add extra time. However, the results I got were pretty inconclusive. This may have been because I was testing on a pretty new MacBook Pro (crazy fast), or because I didn't know the exact piece of the timeline to look for. However, the font stack was the only variable that changed in an otherwise very simple page, so the lack of a noticeable delay was surprising.

@zachleat Do you know if a bloated font stack (such as your Arial, etc example) has any real negative impact, aside from the few extra characters in the CSS?

I’m not sure, but I’m also not sure this is a performance problem you’d see in the real world? How many families did you test? It’s rare to see a stack go into the double digits for number of families.

In my work I’ve never had to go more than 3 or 4 deep.

I was concerned about a font stack that had 9 fonts in it, so I tested a font stack with 13 fonts vs one with 4. The stack with 4 fonts declared actually does the same thing as the one with 9 fonts, and your tool helped prove that. So, thanks!

You’re very welcome!