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
Related posts:
- Serif Fonts Vs. Sans Serif Fonts: A Working Case Study Sans serif fonts are the norm for websites, but are...
- IKEA and the Font Fiasco IKEA have recently changed their font from Futura to Verdana,...
- Four Free Font Managers Jennifer takes a look at four free font managers which...
- 10 of the Best Programming Fonts If you are still using Courier New, Craig provides a...
- Typography: Concordant, Contrasting & Conflicting! Jennifer looks at how the relationship between typefaces can improve...
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.
June 30th, 2004 at 9:10 pm
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 ^^)
June 30th, 2004 at 9:26 pm
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 :)
June 30th, 2004 at 11:01 pm
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?
July 1st, 2004 at 9:19 am
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.
July 1st, 2004 at 11:11 am
“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.
July 1st, 2004 at 11:42 am
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.
July 1st, 2004 at 7:40 pm
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.
July 1st, 2004 at 8:20 pm
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.
July 3rd, 2004 at 6:39 pm
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.
July 9th, 2004 at 1:15 pm
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
July 16th, 2004 at 5:47 am
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.
July 17th, 2004 at 6:49 pm