If you could only have five Google Fonts
The late, great graphic designer Massimo Vignelli famously used only five typefaces in his career -
- Helvetica
- Futura
- Garamond
- Century
- Bodoni
Why would a designer place such a constraint on himself, especially considering the breadth of his career? Typefaces are a tool to be used in design, and he knew these tools well. He knew how extensive those typefaces were, what their strengths were, and where they were weak. He felt he could address the tone of any project with these five choices.
It's not a bad idea, in this age of widely available digital fonts. You will certainly be moving along with a design a lot faster if you only have to pick from a handful of great fonts, rather than sifting through hundreds of mediocre fonts.
As a popular resource for free web fonts, Google Fonts has a glut of typefaces that, shall we say, have limited use.
The aim of this post is point out five typefaces available on Google Fonts that should serve you well. If you were to be limited to only five typefaces, these would help you address most projects. I'm evaluating these typefaces on:
- Appropriateness for digital projects - how do they look on screen. Does it work for long running text being read?
- Completeness of character sets - at it's most basic level, a typeface needs to have all of the characters you need for your project. These fonts all have a healthy amount of characters included.
- Weights available - most free fonts typically come in one or two weights, but these all have a useful amount of weights
- Italics available - another drawback of most free fonts is you are lucky if there is a proper set of italics included. These all have at least some set of italics
So, here we go:
- Open Sans - as of this writing, Open Sans is the most popular typeface on Google Fonts. And for good reason - it has an extensive set of characters, five weights - all with italics. And that's just the regular version - there is a corresponding condensed version that has three weights - which is perfect for titles. It was commissioned by Google, and is very, very close in design to Droid Sans - however, it's just ever so much wider in proportion, which seems to alleviate some of Droid Sans' awkwardness.
- Pros: Extensive weights, italics, complete, very versatile
- Cons: Pervasive (it's popular), can be easily misused
- Source Sans Pro - Source Sans Pro is a free typeface that was developed by Paul D. Hunt on behalf of Adobe, and contributed to Google Fonts. What intrigues me about Source Sans Pro is not just it's completeness - (six weights - plus italics for each!) - but it has two sibling typefaces - Source Serif Pro, and Source Code Pro. The serif version is not as extensive as the sans version (only three weights and no italics), but it's a welcome companion nonetheless. As for the mono-spaced Source Code Pro - let's just say that it's what I use in my text editor. I like it that much. If you are writing a technical blog, you could do very well sticking to the "Source __ Pro" family of typefaces.
- Pros: Very complete, companion typefaces
- Cons: Serif version not as complete
- Merriweather - The first serif on this list is a very attractive one. It comes in four weights, with italics. It has a very generous x-height, so it requires a little more line-height than some of these other typefaces. The serif version of this typeface came out first - but a new sans-serif version - Merriweather Sans - was recently released, and is just as complete.
- Pros: Extensive weights, is a usable serif font for digital projects
- Cons: Probably not the best for UI elements
- Noto Serif - Noto only has two weights - Regular and Bold (including italics for both). There are sibling Sans and Serif versions, much like Source. What makes Noto so interesting is that Google is adapting it to support more languages than has previously been achieved in a single typeface. If your project has wide-ranging internationalization needs, you'll have a hard time coming up with a more complete option than Noto.
- Pros: Better international support than you'll likely be able to find in any other typeface
- Cons: Currently only Regular and Bold weights
- Lato - Lato was one of the first fonts on Google Fonts that was really robust in terms of weights available. It has five weights, with italics. It has a hairline weight that you won't find in most fonts, which works very well at large sizes. It has the generous x-height that all good digital text faces seem to have, making for a very readable font.
- Pros: lots of weights - an especially nice hairline weight
- Cons: needs slightly more line height than other fonts
Honorable mention: Fira Sans - this gets mentioned purely based on the reputation of its maker - Erik Spiekermann (well, his firm, anyway). This typeface was developed for the Firefox Operating system, and is a good choice for UI elements, while still being a workable running text option. It has five weights, with italics, as well - so, it's very versatile.