From Google Design, here’s a very comprehensive, practical and useful guide into what goes into choosing web fonts for any project, as well as the theoretical concepts we should be paying attention to. Typography “exists to honor content,” according to Bringhurst, and when it’s done well it “reveals every element, every relationship between elements, and every logical nuance of the text.”
For the impatient, this article does have plenty of typeface recommendations for different kinds of situations, needs and contexts. But we’ll quickly go over some of the considerations mentioned by them. To begin with: what is your project’s scope?
Are you starting something that could go on for a few months or even years, like a magazine, or is it a one-off project, like a slide deck, logo, or presentation? Your best bet for covering those different needs is to choose a large type family that includes a variety of weights, styles, and variants like small caps and ligatures. Large families make branding easier because sticking to a single font over time ensures that you’ll be able to handle different situations without having to add another font into the mix.
For these, you can’t really go wrong with Alegreya, Merriweather, Merriweather Sans, Roboto, and one of my recent favourites, Work Sans.
Next on the list is all about aesthetics: what kind of mood do you want your text to appear in? Today, there’s no need to compromise by selecting a commonplace ‘workhorse’ font. Web fonts tend to be just as reliable as system fonts, but with a greater variety to choose from.
For example, Gibson
strikes an uncanny balance between elegance and personality, as well as Monotype’s Classic Grotesque
. Next up: How much text are you typesetting?
“Designers provide ways into—and out of—the flood of words,” writes design critic Ellen Lupton, “by breaking up text into pieces and offering shortcuts and alternate routes through masses of information.” And choosing type according to the length of the text can give readers lots of cues and shortcuts to help with navigation.
Medium-length text, defined loosely as three to four paragraphs, is actually pretty flexible which means you’ve got options. If you’re leaning toward a serif font, opt for something in the old style
, a transitional style like Libre Baskerville
, or a slab serif like Arvo
. For a san-serif, a good choice could be something in the humanist or grotesque style like Cabin or Raleway. Many more examples follow in the article.
I’ll skip ahead a few sections and jump straight to an incredibly useful one to always keep in mind: what languages does your audience read and write in? There’s an argument about not providing support for non-latin characters if your content will never show in those languages, but there’s something interesting to remember: auto-translation.
Even if you’re providing content in a single language, many people use a translate feature in browser so that content appears in their native language. In other words, if the font you’ve chosen has only basic Latin letters, auto-translate takes the typography of your project out of your hands—shifting your layout into some other font for those letters, giving it a “ransom note effect”
How to know where to look? Look for the “Extended Latin” characters for specific European languages when choosing a type family. Always test and consider for the most common ones like the circumflex (â), grave (á), umlaut (ä), overring (å), or ogonek (ą).
There’s a few more interesting pointers in the article, including a piece on numerals, which we’ll cover (again, but happily) soon.