Picking Type for WebSep 30, 2009 In Design By Nishant Kothary
Please note that this study is now complete. We ended up picking Georgia for reasons that I explain in the comments below and in this post. Thanks to everyone who wrote in and participated!
As a part of the visual design process for MIX Online’s upcoming redesign, I’ve been experimenting with typography. The task of finding a typeface that’s both aesthetically pleasing and legible, however, is a tricky one.
The Problem With Type
Part of the problem is that typefaces vary across mediums. The text changes from browser to browser. It looks different on a Mac than on a PC. Finding typography that works for the web is a game of broken telephone.
Say No To Photoshop?
Even our tools conspire against us. It’s customary for web designers to start the process of rendering type in Photoshop, because Photoshop seems like the best tool for making pixel-perfect comps. But can you really create a pixel-perfect comp in a tool designed to deal with bitmap graphics? It’s not a trick question. The answer is no.
I think there’s merit to Mr. Fried’s ever-controversial rant about skipping Photoshop in the design process, especially when it comes to typography. Getting into the real rendering environment — the browser — is better than starting in Photoshop. When you’re designing type for the web, you don’t want to settle for an approximation of what your users will see. That’s all Photoshop is going to give you — a very optimistic approximation.
More Than Just Fonts
So how do we select the right font-stack? The first step is to realize that picking type for web is about more than the properties of the actual fonts. It’s about web analytics. Fine-tuning font properties in CSS. Considering how a font degrades across browsers and operating systems.
This is why many designers, like Jina Bolton, are gravitating toward font-stacks like this one:
font-family: "Hoefler Text", Baskerville, Garamond, "Palatino Linotype",Georgia,"Times New Roman", serif;
This is a great way of picking your font stack because it optimizes the experience for your majority audience. In her case, I’m willing to bet most of visitors are Mac users and a good number of them have Adobe’s Creative Suite installed. In other words, most of her users will see one of the first three fonts in that stack providing her users a fresher and richer experience. A few years ago, using anything but Verdana, Arial, Georgia and a couple of other fonts would have been faux pas. Things are starting to change.
Help Us Pick Our Font
In an effort to help us pick a font-stack for the Mix Online redesign, I’ve devised a very quick readability study. Open the following links in separate tabs (hold down the ctrl key on Windows or Command key on Mac as you click the link, and it’ll open in a new tab).
- Arial 1
- Arial 2
- Calibri 1
- Calibri 2
- Calibri 3
- Georgia 1
- Georgia 2
- Lucida 1
- Lucida 2
- Palatino 1
- Palatino 2
Spend some time looking at and reading the text in each of the tabs. Then submit a comment with the following information:
- 1. What OS are you using? If you can test on both Mac and Windows, even better.
- 2. Top 3 choices. Judge legibility and aesthetic quality.
- 3. Any other comments
The first 20 respondents (excluding my fellow co-workers, sorry) will receive good karma and a copy of “A Website Named Desire”, the gorgeous infographic poster we created a few months ago. Here are a few pictures of it and if you want to explore it online, check out our Descry visualization.
What do you think?
Are you a web designer? How do you pick type for the Web? Are you a user? What are the sites that do a good job of presenting content such that it’s readable as well as beautiful? I’d love to hear some opinions.
Follow us on twitter if you want us to keep you posted on our redesign process, or you simply enjoy our content.