Nice Web Type

Nice Web Type is one place for web typography, following experiments, advancements, and best practices in typesetting web text. Handcrafted by Tim Brown, Type Manager for Adobe Typekit.

Roundup: CSS font stacks

Choosing type for web text may seem as exciting as buying socks for grandpa, but lately some gifted and generous folks have shown us that we do have choices.

First, let’s take a look at what’s out there, bookmark a few key resources, and identify the best advice. Then we’ll boil it all down and learn to plan our CSS font stacks based on availability, context, rendering, technicalities, and typographic understudies.

Um … CSS font stacks?

You know, the cascade of typefaces in the CSS font-family property. You specify your choices and your visitor sees whatever he or she has available, in order of your specified importance:

font-family: Georgia, "Times New Roman", Times, serif;

Still not sure? To get the most out of this post and the resources linked herein, you’ll want to familiarize yourself with both web standards and typography. Here’s what Nice Web Type recommends for getting started.

What works where

We’ve all seen that list of “web safe fonts” with breakdowns by OS/software, and we forget where it was. We’ve seen lots of them. Some have been great resources; other times we’ve closed our browser window in less than five seconds, muttering, “Seen it.”

What ends up being most valuable about information like this is breadth and currency. So, without any disrespect to the hard work of bygone data, we’ll take a look at two thorough and current efforts by Richard Rutter and Phil Shaw.

Font Matrix

Richard Rutter has been advocating research-based font stacks since 2003, and his Font Matrix is a real asset for working web typographers. Don’t just bookmark it, keep it in your toolbox.

Richard’s matrix is easy to scan, and shows a preview of each face right in the chart (for all matrix typefaces that you have installed). It’s an excellent quick reference.

CodeStyle Combined Font Survey
Phil Shaw updates his combined font survey quite often. Phil draws his statistics from Windows, Mac, and Linux surveys (whereas Richard cites software sources at the bottom of the 24 ways article he wrote to introduce his matrix).

This kind of research is critical to building trustworthy font stacks because it helps us predict how our audience’s technology will interpret our suggestions.

Stack ’em up

Some very good, and current, thoughts on font stacks:

Striking Web Sites With Font Stacks That Inspire – Jan 2009
With a little history and links to 26 beautifully designed sites (plus a sneak peek at each site’s font stack), Vivien at Inspiration Bit touches on many interrelated issues. So much good stuff in here. Take time to study the resources she mentions.
8 Definitive Web Font Stacks – Jan 2009

Michael Tuck’s most meaty idea here is that things start to get (necessarily) complex when we consider the font-family cascade in terms of both availability and typographic understudy.

By understudy I mean the typefaces lower down in your font stacks – the ones that are supposed to fill in for your ideal choice, if a visitor can’t see your ideal. By typographic understudy I refer to the profound artistic and scientific qualities that make one typeface acceptable as a stand-in for another. Good taste, in other words.

Better CSS Font Stacks – Jun 2008

This post by Nathan Ford is exceptional. Nathan reminds us that “certain fonts work well for setting blocks of copy, while others work better at larger sizes.” Common knowledge for designers? Sure. But it’s one of the many issues that, combined, form a barrier to happy online typesetting.

What Nathan gives us is another array of information to consider when building font stacks: context. He then goes on to suggest rethinking our font-family cascades based on this context, and he lists some stacks.

Nathan’s post also garnered some great comments!

  • I Love Typography’s John Boardley wonders about an issue that I think falls into the “typographic understudy” category: similar typefaces with differing x-heights or widths. This can affect the readability and texture of our designs (and layout too, if it’s based on our font-size).
  • Then, near the bottom, Rob Schumann cites a post he wrote in 2005 (updated Oct 2008) that addresses x-height and width. Rob references the font-size-adjust property in the W3C’s CSS3 Fonts module working draft. We’ll look forward to that.
  • Finally, somewhere in the middle, Megan McDermott offers a caveat to Phil Shaw’s survey results:

    “One thing to keep in mind with that font survey site is that the results are cumulative since January 2004. Default font offerings have changed since then and some OS versions have probably been phased out. I don’t entirely trust those results but I suppose it’s better than an outright guess.”

    Interesting….

    Phil has an extensive FAQ, but I didn’t see Megan’s concern mentioned, so I emailed him and asked if he had yearly data. Phil replied right away, added this FAQ item, and will make data available in more incremental slices:

    1. Phil: I have recently archived the 2004 submissions, so current figures reflect statistics since 2005.
    2. Tim: Ok, that might be why Megan wrote “2004″ and I saw 2005 as the cutoff on your site – she must have written her comment before you made the switch. Do you archive years regularly? Like, do you always maintain the four-years-of-stats window?
    3. Phil: Yes, that’s the plan so far. The rolling 4 year data set is a good balance of currency and a substantial number of survey submissions. So far I have archived submissions at the start of the calendar year, so its up to 4 years’ submissions, but perhaps I should do it monthly to keep the span constant.
    4. Tim: That’s a good idea, if you have the time.
    5. Phil: Default fonts on new operating systems have changed and the figures do show the rise of the Windows Vista “C” fonts, for example. On the other hand many people stick with operating system versions that are well behind the leading edge, and I would suggest these are the people that the make up the bulk of website users. The phase out is very slow.

      The point of CSS font family declarations is that you can choose to specify the latest fonts, even rare fonts if you want, so long as you have some good solid fallback fonts. I would say that’s the point of the font survey and font stack builder tool; to have confidence in which are the reliable fallback fonts.

    6. Tim: I hear you. All of this makes good sense.
    7. Phil: I will plan some time to create narrower time slices of the survey data to see how they compare. I’m open to a more recent cut-off date for the survey results, what do you think?
    8. Tim: I think the slice you currently offer is great, for the reasons you mention (slow user phase-out, the nature of CSS font-family fallback); however, it might be useful to designers if you offered narrow slices in addition.

      Narrow slices might allow folks to speculate about trends – if one knows when Vista was released, and can compare incremental stats from before and after, or from several periods of time since Vista’s release, one might predict the rate of adoption and so supplement their justification for suggesting “rarer” typefaces.

    9. Phil: As well as snap shots of the main results tables for each year, I might create charts for the frequency of individual fonts over time.

      I always appreciate genuine, thoughtful suggestions from website visitors. I do have limited time, so it helps me to focus on the things that make a significant difference to developers.

And it all boils down

We have read some great posts, bookmarked some great sites, and learned to plan our CSS font stacks based on:

  • Availability: how much of your audience will see each option in your CSS font stack? Check reliable statistics, and compare with stats on your own visitors.
  • Typographic understudies: the harmony among ideal faces and second/third choices in your font stack. How will your work feel if your lesser choices are all a visitor has available? Will your decisions about font-size, line-height, and/or measure (width of the textblock) still yield a good result when influenced by the slightly different dimensions (x-height, character width) of an understudy?
  • Context: will the understudy typefaces you suggest in your font stack do an acceptable job, even though you may have made font-size, line-height, and/or measure decisions based on your ideal typeface? Did you choose, for your h3 understudy, a typeface that’s good for body text? Will it look good as a subhead?
  • Rendering: whether a typeface was designed or adjusted for use on screens. Do your ideal typeface choices anti-alias well? Do your understudies? Have you checked on multiple browsers and operating systems?
  • Technicalities: does your typeface go by different names?

“Wait a minute,” you might say. “We didn’t learn those last two!” Nope, those are freebies I threw in just for you committed readers who made it this far down the post. Good job.

I added “Technicalities” because it’s easy to remind ourselves about with a quick link to Guillermo Esteves’ good observation, and “Rendering” because it is too important to ignore.

Unfortunately (or fortunately, depending on how tired you are after having read this), we could do little more here than hint at rendering. We’ll round it up some other time.

5 comments

  1. Jason Robb 23 Apr 2009

    Oh my, great roundup! Rutter’s font matrix has help me branch out of my typical font stack. Thanks for sharing, great list, bookmarked.

  2. Greyholme 30 Apr 2009

    Great information about stylizing fonts. Another good resource I found was a page showing examples of the different font families

    Made my life easier

  3. Simon Pascal Klein 21 Jul 2009

    Good summary (bah! courier in the comment body text entry field?). (:

  4. Ricardo 30 May 2010

    Great reading! Thank you so much :)

  5. scraps para orkut 25 Jan 2011

    CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font.

    But doing either of those things means you’re missing out on some great typography options. Font stacks can make it possible to show at least some of your visitors your site’s typography exactly the way you intend without showing everyone else a default font. Read on for more information on using and creating effective font stacks with CSS.

Twitter: @nicewebtype
Dribbble: timbrown

Combining Typefaces

 

I wrote a small book about combining typefaces. Buy it for less than the cost of a fancy beverage.