I was originally planning to simply update my previous article with a couple new fonts, but to Google’s credit I came up with so many additions that I decided to simply write a new post.
And this time, I tried to include real-world visual examples whenever I could, since evaluating fonts over at Google Web Fonts can be less than optimal (to put it kindly).
(Quick plug: my new project Sidebar gives you the 5 best design links of the day. You should go check it out!)
(Note: some of those fonts were already in the previous article since I kept updating it for some time, but I’m putting them here as well in case you missed the updates)
The User Interface
First, let’s get one thing out of the way: Google Web Fonts’ user interface is still as bad as ever. It’s visually ugly, clumsy to use, and it doesn’t even match Google’s new style as seen in Gmail or Reader.
(Also, Google Web Fonts’ front-end code is a pretty strange mess of absolutely positioned divs with inline CSS styles. But that’s best left for another article).
Its worse offense is without a doubt how it manages to make even the nicest typeface look hopelessly crowded and unreadable thanks to poor typographic choices. Just take a look!
Now contrast this with Jesse Dodd’s personal site, which uses the same typeface except with sane typography:
This means Google Web Font’s own user interface is pretty much useless to actually select fonts. Thankfully, there are a couple simple alternatives.
The first one is simply Google Docs. Did you know you can use most Google Webfonts in it? Simply go to the font menu and click “add fonts” at the bottom. You’ll get this dialog:
Not only does Google Docs apply sensible typographic settings by default, but since you’re in a text editor you’re free to change them yourself!
On top of that I’ve found that actually writing with a font is a great way to evaluate its readability.
And another great tool is FontFriend, a neat bookmarklet that lets you apply any Google Webfont to the current page (thanks to Ali for reminding me of it!).
But I know that you came here for the fonts, so without further ado here are my new favorites:
There’s surprisingly few good sans-serif typefaces usable on the web. At the dawn of time, people used Verdana, which was replaced by Arial, which was itself replaced by Helvetica (in large part thanks to being the default font in iOS as well as Twitter Bootstrap).
But since then, we’ve kinda reached a stalemate. Proxima Nova is vastly popular, but it’s not free, putting it out of reach of cheapskates everywhere.
Enter Open Sans, which is quickly becoming a very popular typeface. I’m not a type expert so I won’t bore you with discussions of counters, x-height, or x-wings. Suffice to say it’s a great-looking font!
Source Sans was just released by Adobe last week, but it’s already on Google Web Fonts. And I can very well see it challenging Open Sans for the crown of being the web’s favorite new sans serif.
Lato is noteworthy for its collection of thin weights. Thin fonts look great at large sizes, especially on a dark or colored background. (but don’t try using them for body copy!)
Gudea is a technological-looking sans, with a strong bold weight perfect for taglines or even logos.
Droid Serif is the serif companion to Droid Sans, and also a very good choice.
Lora is a very nice serif font that’s perfect for body copy.
Poly is a good alternative to Lora.
Alegreya stands out by offering not only bold, but also ultra-bold, making it a good font for both body copy and headings.
Noticia Text is yet another good serif option.
Rokkitt is a stylish slab serif with a strong personality.
Updated on August 20: a couple more nice ones.
Asap is a sans-serif with a lot of character, and is especially nice in its italic variant.
Amaranth is a slightly quirky (but still lovely) sans-serif.
Cutive is a cute typewriter font reminiscent of American Typewriter.
Updated on September 13
Abel is a narrow sans perfect for giving a bit of personality to headings.
Dosis is another Pablo Impallari creation. It’s a round and narrow sans that comes in no less than 7 weights.
Ropa Sans is a technological-looking sans that works well for headings.
There’s no denying that Google Web Fonts has become a tremendous resource for web design. There’s no reason anymore to use boring old Georgia (sorry, Georgia! I still love you!) or Arial anymore. Now if only they could just fix their awful site…
Anyway, I’m probably missing out on a lot of fonts, so feel free to suggest your own favorites in the comments!
(And as usual, you can also comment or upvote over at Hacker News)