You are reading a MIX Online Opinion. In which we speak our minds. Nishant Kothary Meet Nishant Arrow

Opinions

45Comment Retweet

Picking Type for Web

Sep 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!

Picking Type for Web 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).

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.

Follow the Conversation

45 comments so far. You should leave one, too.

drbegley said on Sep 30, 2009

I am using Windows. My top 3 choices are: Calibri 1, Arial 1 and a write in: Verdana. Perhaps my eye is comfortable with these fonts as I have used them as my default font in email for years and spend more time in email than on the web? Anyone else?

Mike Swanson said on Sep 30, 2009

Smashing Magazine had a recent article about CSS and font stacks that''s worth taking a look at: http://www.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/

Nishant Kothary said on Sep 30, 2009

Great point, Denise. There''s something to be said for familiarity in an experience.

Thanks for pointing me to the post, Mike. I have most of the individual resources mentioned in there bookmarked already, but smashing mag has summarized it all nicely.

I will say, I am particularly interested in how these different type treatments "feel" (yes, the dreaded "f" word) to different people. Denise'' point around familiarity, for instance, is a very interesting one that needs to play into decision.

John Stockton said on Sep 30, 2009

I''m on Windows 7 / IE8.

Calibri 1, Lucidia 2, Calibri 3.

I like Lucidia but it feels rushed due to its condensed nature. I not a fan of serif fonts on screen and Arial, while I like it, feels over done. I think both Calibri and Lucidia have a modern, comfortable feel and either would work nice.

Joshua Allen said on Sep 30, 2009

I prefer Georgia 1 on PC, and Palatino 1 (brings back memories). Georgia 2 is nice if I look at it long enough.

Ryan Erdmann said on Sep 30, 2009

I tested this on a PC (Windows Vista)

Top Three (In This Order):

1. Calibri 1 - Great typeface
2. Arial 1 - Very legible and is basically universal
3. Georgia 1 - Good font, but I wouldn''t use it for the main content

I think there was a javascript app that allows you to render any typeface identically cross browser and cross platform. If I can find it I will post it here as well.

Thanks!

Nathan Heskew said on Sep 30, 2009

Win 7 / FF3.5

# Calibri 1
# Lucida 1

I know you said pick 3 but those are the only 2 I like (feel comfortable reading through) on this box and monitor(s) :P

Nishant Kothary said on Sep 30, 2009

Keep ''em comin''...

Ryan - Would love to see the tool you''re talking about. Follow-up question - why not use Georgia for body text? Simply a matter or taste, or something else? Serifs — particularly, Georgia — render well on modern screens. Just curious.

Kevin said on Sep 30, 2009

Mac, running OS 10.5

Calibri 1, Lucidia 1, Calibri 3

hese feel the best to me. Of course the new c fonts have a smaller x-height so if someone goes further down the stack the rhythm might get thrown off.

Ryan Erdmann said on Sep 30, 2009

@Nishant Kothary

I will continue to search for the tool I mentioned. If I remember correctly, it is somewhat similar to this (http://typeface.neocracy.org/), but it had much better performance.

As for the font, it is mostly a matter of personal preference; I have found that serif fonts seem to be harder to read for an extended period of time on a monitor. The "train tracks" formed by the serif fonts sometimes look weird on a screen. Lastly, I think that sans serif fonts, especially Calibri, look very modern and fresh. But all in all it boils down to personal choice.

Kurt Brockett said on Sep 30, 2009

Windows 7, IE8

Calibri 3, Arial 2, Calibri 1

Definately looking forward to your new design. I took inspiration for my kurtbrockett.com design from your current site. Guess I''ll have to plan for an update! Great job.

Nathan Heskew said on Oct 1, 2009

Mac OS X (10.6.1) / FF3.5

# Palatino 2
# Calibri 2
# Lucida 2

A bit different from what I like on desktop at work w/ old(ish) monitors.

Lisa said on Oct 1, 2009

Win7 / IE8
-Arial 1
-Georgia 1
-Calibri 1 | Calibri 3

Picking the top 2 was quick-n-easy, I had a hard time deciding on the third one.

John Zimmerman said on Oct 1, 2009

Vista/Firefox

1. Calibri 2
2. Arial 1
3. Lucida 2

Mac/Firefox
Same as Vista/Firefox

Andrew Davey said on Oct 1, 2009

Vista, IE8

1. Calibri 3
2. Georgia 2
3. Lucida 1

Georgia might be better for long text passages, but Calibri is my favourite general font.

Thomas Lewis said on Oct 1, 2009

OS/Browser: Mac OS X Snow Leopard w/ Safari

My preference: Palatino 2, Georgia 1, Calibri 1

Where''s Comic Sans? (ducking the tomatoes!)

Ian Muir said on Oct 2, 2009

Win 7/IE8

I like Calibri 3, Lucida 1 and Arial 2.

One thing to keep in mind, is that this font-test is only one paragraph, so you will likely see people shift towards smaller line-heights and font-sizes.

Once you get it narrowed down to a specific font-family, you may want to post another poll using actual text from a MIX Online post to better gauge readibility.

Ian Muir said on Oct 2, 2009

One more thing, here''s a great analysis of typography across several popular blogs:
http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/

I know that Mike already posted a Smashing Magazine link, but that site is just so damn good sometimes.

Gavin Lawrie said on Oct 2, 2009

Georgia 2
Palatino 2
Arial 2

OS X 10.6.1, Camino.

Nishant Kothary said on Oct 2, 2009

Well, talk about getting results all over the map :-) Seems like there''s an even distribution of folks going for serif vs. sans serif. Well, I appreciate the different votes; it''s good input as I move forward even though the distribution is fairly even between a set of treatments. Whenever I talk to people about fonts, it always turns into a matter of preference. So what I think ultimately matters is executing the typographic grid well using line-height, length, letter spacing, and so on. What I''ve definitely learned is that folks seem to prefer the larger sizes with more generous leading.

Ian - Thanks for the link. Smashing Mag is definitely smashing. I may/may not do another one of these. I think I have some good data here that I can plug into the decision.

Ryan - Thanks for the link and the honest feedback. Yep - it definitely seems like a personal preference thing. According to the limited research I''ve seen on the topic, serifs vs sans don''t seem to play much into readability. However, variances within the same font family do offer measurable differences with respect to their impact on readability. Having said that, personal preference definitely plays into desirability to continue reading content. Hopefully we won''t scare you off if we end up picking Georgia for the body :)

John - Agree with you about Lucida on Windows. Letter spacing to the rescue.

Kurt - Thanks! Hope I can deliver.

OK, so those of you who''d like a poster, please contact me at my "email address":nishkoth@microsoft.com

We''ll go from there.

Zian said on Oct 3, 2009

Windows Vista

Calibri 3 - Spaced out
Lucida 1 & 2: Just...looks good

By the way, can I get a poster?

Nishant Kothary said on Oct 5, 2009

Thanks, Zian. Just follow the instructions in my previous comment and I can hook you up.

Peter said on Oct 5, 2009

Running Windows 7 RC.

The only one I *like* is Georgia 1, the others are too large with too much whitespace, or too small to be readable (but still with too much whitespace).

The least offensive of the rest are Arial 1 (though still not very readable) and Calibri 3 (though annoyingly large), but I really wouldn''t like a site that used either of them.

Nishant Kothary said on Oct 8, 2009

One of my colleagues just posted this today, and I thought everyone here would find it interesting:

http://www.surl.org/usabilitynews/112/typeface.asp

If you scroll down, there''s a link to the full paper. As it turns out, the results concur with the seemingly statistically insignificant survey we did in this post. Calibri is way up there in terms of legibility, but it''s pretty similar to Georgia in other respects. Check out the study. Very interesting findings (especially when you start comparing the perceived qualities of Serifs against, say, Handwriting typefaces).

Tim Aidlin said on Oct 9, 2009

Win 7 / IE8, Firefox 3.5, Safari, Chrome.

I swear, if we use Palitino, I''m gonna punch someone in the neck. Blech. Sorry to all who chose it, but still: I really find it almost impossible to read.

My votes: Lucida 2, Calibri 3, Arial 2.

Nishant Kothary said on Oct 12, 2009

Tim - See, now I want to use it just to see you do that :)

Seriously, though, on Windows you''re seeing Palatino Linotype and I agree that it looks funky. However, if you switch to your mac, Palatino looks great even next to Georgia. Notice all the folks who picked Palatino above were on OSX.

Frederico Maximiliano said on Oct 21, 2009

1st . Lucida 2
2nd . Calibri 1
3rd . Paladino 2

bryant bryant said on Jan 11, 2010

@font-face

Brian Cray Brian Cray said on Jan 11, 2010

1st. Arial (stacked with helvetica 1st)
2nd. Georgia (good x-height for serif)
3rd. Lucida

Note: IMO at first glance calibri is chaotic.

Maryann Maryann said on Jan 11, 2010

I''m on Windows XP and top 3 choices are Calibri 1, Calibri 3, then Lucidia 2.

Michael Norton said on Jan 11, 2010

Mac OS X 10.6.2/Chrome Dev

1. Lucida 2
2. Palatino 1
3. Georgia 2

The differing results between OS X and Windows are obviously the result of Quartz anti-aliasing in browsers on OS X.

Luckily, IE9 will correct this problem. Finally, Microsoft will incorporate in-browser GPU anti-aliasing through DirectX.

Deborah Gray Deborah Gray said on Jan 11, 2010

My picks - 1st - Arial 1, 2nd - Calibri1, 3rd. Palatino 1. This surprised me because I usually avoid Arial in favor of Verdana, but I really like the way it looks and reads here. I''ve also never used a serif for body copy, but Palatino1 looks ok. It would definitely need the breathing room given by the line height here though.

Leon Paternoster Leon Paternoster said on Jan 11, 2010

Ah, well, I''m on a nearly virginal Ubuntu 9.1o (although I have installed MS core fonts). I''m browsing with FF 3.5.7.

That means I don''t see Lucida and Calibri.

I liked Georgia 1. Georgia at 16/24 is pretty awesome, but that''s just my taste (although I''d argue it''s also a lot more legible than Palatino).

I''d need to see the rest of the page/site to make a proper judgement. Legibility and pretiness are both subjective and affected by lots of different factors.

Ario Smith Ario Smith said on Jan 11, 2010

Mac OS X 10.5 / Safari 4

Palatino 1, Georgia 2, Calibri 1

Simon English Simon English said on Jan 11, 2010

At Purple Coffee we''ve developed a simple script to allow our designers to test fonts in the browser, amend type settings such as line height, font size and others, and then download a CSS code generated from the designers chosen settings, this helps work flow between our designers and developers and saves both parties time and effort. Designers have an easy way to experiment with typography the way they know best (using a visual and responsive system) and they can thus pass the script to their developers saving them time also.

We are working on providing this as a free resource to other designers/developers at the moment. Here''s a little preview of what we hope to release: http://www.purplecoffee.co.uk/work/testafont

Scott Barnes Scott Barnes said on Jan 11, 2010

Comic Sans FTW :)

I wish there was a way for browsers (all) to dled a DRM like font from the server (ie some sort of server+client key/token relationship). As its frustrating not being able to use my fonts online :)

Williams Garcia Williams Garcia said on Jan 12, 2010

Mac 10.6.2 (Snow Leopard) using Safari

1?st. Calibri1?
2nd. Palatino1?
3rd. Arial1?

Great exercise! Interesting to see everybody''s take on such a great and important topic.

jayjay jayjay said on Jan 13, 2010

Mac 10.6

1. Palatino 2
2. Lucida 2
3. Georgia 1

I really miss Helvetica and Verdana on that list.

Joseph Ghassan Joseph Ghassan said on May 11, 2010

Nice Fonts

Daria Stiefel said on Jan 12, 2011

My Hitlist is: – 1st – Arial 1, 2nd – Calibri1, 3rd. Palatino 1. This surprised me because I usually avoid Arial in favor of Verdana, but I really like the way it looks and reads here. I’ve also never used a serif for body copy, but Palatino1 looks ok. It would definitely need the breathing room given by the line height here though.

Vicki Jo Vicki Jo said on Jan 16, 2011

iMac 10.6 Snow Lepord user here. All the fonts on your list look great. They are all so very boring though. To be sure all my custom fonts were seen by everyone with any browser, I made images with the custom font.

Frenchie said on May 6, 2011

At last, smeonoe comes up with the "right" answer!

Acezon Cay said on Jun 2, 2011

Windows 7

1. Calibri 3
2. Georgia 2
3. Lucida 1

50 Helpful Typography Tools And Resources | pjodom.com said on Jun 21, 2011

[...] Picking Type for Web Picking Type for Web 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. [...]

JaimeG said on Jul 23, 2011

WIN 7/ Chrome

Calibri 3
Arial 2
Lucida 1