Can You Read Me Now?

Tweet

Do you remember when all web sites used various sizes of Times or Times New Roman? Then it seemed like Arial became the new rage. And lately, it seems that Verdana is the cool font to use. (I tend to prefer Verdana out of those three.)

As I was clicking around on Michael Bernard’s research (see yesterday’s post), I discovered that he and others have done lots of research on fonts used in web sites, their legibility, communicated “moods,” and even which fonts seemed to work better for older or younger viewers.

Just a few tidbits drawn from the articles:

- People tend not to prefer Times/Times New Roman for aesthetics OR legibility. (Funny that this is the default font used for most word processing programs and web browsers!)

- Arial, Verdana, and Georgia are good. (Tahoma is also quite legible, but may not be on everyone’s system.)

- Older people may think Arial is easier to read.

- Kids like “fun” fonts.

Have fun!

General summary of fonts in web sites

Research on font legibility and evoked emotions

Fonts for older people

Fonts for kids

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.sitepoint.com/ mmj

    It’s interesting to see that while people claim that Times is one of the least preferred fonts, the studies you link to show that it is the easiest to read in terms of the speed at which it can be read, and people think it looks the most professional.

    This would probably account for it as being the ‘default’ font in many applications.

  • http://www.generationphp.net Xenon_54

    Seems, for me, line-height is also an important factor to study. I was wondering why SitePoint was easy to read on screen and paper. After a quick look to stylesheets, it seems that paragraph line-height has been set to 130%.

    Since I have set the same line-height on my own website, I found that texts were easier to read. So I think it’s something to watch carefully.

    (not easy to write english ^^)

  • http://www.devboxforums.com Chroder

    Seems, for me, line-height is also an important factor to study. I was wondering why SitePoint was easy to read on screen and paper. After a quick look to stylesheets, it seems that paragraph line-height has been set to 130%.

    Since I have set the same line-height on my own website, I found that texts were easier to read. So I think it’s something to watch carefully.

    I agree with you there. Line-height makes a huge difference.

    Anywho, very interesting reads there. I always think that Times looks best on paper, Verdana best for normal web-writing and Arial for larger headings :)

  • Boomer

    I think alot of these findings are due to the current technology (lack thereof) in screens. Using Times is hard because of the small detail and “flares”. The current screens can’t handle them and it strains the human eye. Most people prefer to read, on paper, in a serif font like Times because it’s eaiser to “flow” with the words. I’m wondering if, as designers, we should keep san-serif on-line but when people print the page, using CSS, we should change the font to a serif style?

  • tconley79

    Form vs. Function

    During graphic design studies in college, I was taught a simple guideline that serifs were great for paragraphs of text because of how each character flowed to the next. (I think most novels use serif fonts.)

    Sans-serifs, therefore are good for headlines and short blurbs beacause of their striking appearance.

    But these, of course, are just guidelines. And at times, the theme of the work demands legible, but more appropriate design-wise.

  • http://www.redcow.ca/ Ray Oliver

    “t’s interesting to see that while people claim that Times is one of the least preferred fonts, the studies you link to show that it is the easiest to read in terms of the speed at which it can be read, and people think it looks the most professional.”

    But is that not in the context of print? Seems to be that serif fonts are not nearly as readable on screen as they are in print.

  • clintonG

    It doesn’t matter which font you use if you’re one of the many morons that insist on using goofy color schemes that make reading virtually impossible.

  • http://www.sitepoint.com/ mmj

    Ray: “But is that not in the context of print?”

    No, all of the studies shown refer to “fonts in web sites”. Please refer to the links Corrie posted.

  • http://www.dustindiaz.com polvero

    Naturally Times New Roman is too pixely on browsers. I would imagine in the future that browsers will build in a feature to take out the vector-based output. Kinda like in photoshop how you have your Five style options of None, Sharp, Crisp, Strong, and Smooth. I suppose by default browsers output something between “None” and “Sharp.” In Mozilla it has the Ctrl++ feature which enables you to enlarge fonts (even to the size of having One letter the size of your screen). Of course that’s vector output, but it’s still not quite pixely as it may seem. If you’ve tried “Trebuchet MS” in Photoshop using “None,” it looks different than a browser output.
    Sorry for rambling on that one.
    You brung (brang?) up some good points on this one corrie. Great job.

  • Philip

    polvero “I would imagine in the future that browsers will build in a feature to take out the vector-based output. Kinda like in photoshop how you have your Five style options of None, Sharp, Crisp, Strong, and Smooth.”

    Well if your running a OSX or Win XP you can do that (sort of) already. On XP its called ClearType and does a wonderful job of smoothing onscreen fonts. But, by default, its turned off so a user has to open the Control Panal and turn it on. Great for the tech savy but with a default of “off” how many regular users even know its there?

    It’s a shame as when it’s used a designer can rely more on using installed fonts instead of grapgics – saving bandwidth, which saves money etc.

  • KHATTAM

    I prefer verdana, 10 points or 1 pixel.The best font for web..also not bad for graphics using sometimes over images to give somewhat like the web txt. As in Flash using dynamic txt..it is my best font to use.Any way nice topic by Corrie Haffly

  • Amorya

    I think that with good antialiasing (i.e. antialiasing that opts to preserve the form of the letters, rather than antialiasing that tries to make neat lines and stretches the letters until it achieves it) then Times is still best for websites.

    Alas, you can’t control what antialiasing algorithms your visitors will be using. MacOS X uses incredibly good antialiasing – it preserves the form of the letters almost exactly. Windows Cleartype tends to sacrifice the form, instead focussing on clarity of each individual line. That’s why fonts like Verdana looks oddly spaced on a Microsoft system. They’re crisp letter forms, but not very much like the original font!

    The Microsoft style doesn’t work well at all for fonts such as Times where the lines that make up the letter are variable width. It works well for fonts such as Ariel where they only use single width lines. Add to that the added complexity of serifs, and Microsoft’s antialiasing borks completely.