Using modern font stacks

Goodbye Google Fonts, hello (again) system fonts

I really enjoy choosing fonts for web sites, even though I am not good at it. There’s another problem with fonts, though — they tend to be pretty heavy and they can take a while to load. Both of those always left me feeling a bit guilty about indulging my font fetish, but what alternatives were there? The old ‘Times New Roman’, ‘serif’ type stacks of yesteryear?

Enter Modern Font Stacks, a web site created by Dan Klammer. Dan’s taken some time to figure out what fonts are commonly available, grouped them into common typeface categories, and created new, modern font stacks.

Somewhere on this page is a font selector tool you can use to change the font stack I am using here. I particularly like the “Geometric Humanist” set. I also like “Rounded Sans” but there seems to be an error with the ellipsis on at least one of the fonts. And you know how I love my ellipsis.

Not all of the categories will look different on every device. Android in particular ships with a stingy quantity of alternative fonts, so chances are you are always going to end up with either Droid Sans or Droid Serif. But they all resolve to something and don’t require any additional downloads.

If you still want to choose your own fonts, though, you can still use these. Match your custom font to one of the typeface genres, then use that genre as a fallback. It’s a great way to make sure Raleway (for example) doesn’t just resolve to Arial when people have custom fonts turned off.

But maybe your use case doesn’t require custom fonts anyway? If you’re doing a blog, particularly a technical blog, custom fonts arguably don’t add much to the experience. Most of these fonts will serve just fine.