Best Fonts for the Web?
October 21st, 2009 by Bob Bly
You always read the old rule “use serif type which is easier to read than sans serif.”
That may be true in print but it’s not online.
Reason: the lower resolution of the screen vs. print renders serif imperfectly, making it less attractive and more difficult than sans serif to read.
With that in mind, here are the best fonts for online marketing:
>> For e-mail marketing messages, use either 12-point Arial or Verdana.
>> Do not use Times Roman for web pages – it’s a serif type and difficult to read online.
>> Recommended typefaces for web sites include Helvetica, Arial, Verdana, and other popular san serif fonts.
>> If your web pages are too light to read on screen or when printed, use a boldface font like Helvetica Bold Condensed.
>> The most common error in web page design is using too small a type size. Use at least 12-point type. Even 16-point won’t look awkward, and larger is easier to read than smaller.
>> For web page headlines, use Arial Bold in 2 or more point sizes larger than the body copy.
Do you have other fonts you like better? Or disagree with any of the above?
This entry was posted on Wednesday, October 21st, 2009 at 10:25 am and is filed under Online Marketing. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
October 21st, 2009 at 11:21 am
I’m confused. You tell us sans serif is “less attractive and more difficult than serif to read.”
Then you recommend sans serif fonts for online marketing.
October 21st, 2009 at 12:14 pm
Bob, you seem to be confused about the difference between serif and sans serif types.
And back in 80s, I saw some fairly compelling data that suggested the best fonts were what people were used to reading.
Engineers scored higher reading sans serif fonts (often used in tech docs), while those who read a great deal of fiction often scored higher/faster reading serifs.
The Web is a typographer’s nightmare, and let’s hope that we’ll soon have more interesting choices (than arial, etc) soon.
October 21st, 2009 at 12:51 pm
Ohh, font fun.
Fonts are designed for many different reasons, right now I am reading “The Elements of Typographic Style” which is an awesome book on the subject, talks about how the font is displayed makes a huge difference. Also people read a screen differently then they will read a pamphlet or book.
How content is displayed actually makes a significant difference to what font is best to use. A font that works best for imprinting, aka pressed into the page like a typewriter, is going to be vastly different compared to one that is to be ink-jet printed or laser printed or displayed on screen. I am sure that an e-Ink display has different font dynamics then an LCD or CRT display.
The biggest problem is that you are limited to what fonts are installed on the readers computer so you can only follow general guidelines and not use the best font for the job*.
In general, emissive displays like LCDs and CRTs should use a large sans serif font for easiest reading with lots of white space between paragraphs to make it easier to not lose track of where you are on the page.
*pdfs allow you to get around that, so why not design the whole pdf to be designed to be read on screen. What I mean is why save it in a portrait layout when most computers have landscape monitors?
October 21st, 2009 at 1:13 pm
TC: I’m not confused — I know the difference — but I did make a HORRIFIC typo which I have fixed.
I hope the correction clears things up for Debra.
October 21st, 2009 at 1:45 pm
Bob, thanks, I understand the difference too.
Your intro paragraphs didn’t agree with the rest of the article though, so I wasn’t sure what you were trying to say.
October 21st, 2009 at 7:50 pm
To me, an issue as important as font selection or size is color. I don’t know why designers of so many sites — my own, I have to admit — put body copy in a dark gray rather than 100% black.
I’m wondering if some readability study or convention says that an 80% tint is better on the eyes. I prefer good old fashioned black on white.
October 21st, 2009 at 11:52 pm
[…] Best Fonts for the Web? – bly.com blog – bly.com direct marketing blog […]
October 22nd, 2009 at 1:41 am
[…] Best Fonts for the Web? - bly.com blog - bly.com direct marketing blog bly.com/blog/online-marketing/best-fonts-for-the-web – view page – cached — From the page […]
October 22nd, 2009 at 8:13 pm
[…] See the original post: Best Fonts for the Web? - bly.com blog - bly.com direct marketing blog […]
October 23rd, 2009 at 1:22 pm
I think your guidelines agree with the industry standards. There must be a threshold, though where serif fonts can be rendered well enough for reading online…like your logo at the top of this blog? I think headings are usually large enough for a serif font, but with phone-size browsers, maybe sans-serif is the safest route? Finally sometimes, typewriter fonts like courier are a good choice, especially for places where users input text (like here).
October 23rd, 2009 at 4:42 pm
I totally agree. I especially appreciate the advice about not going too small (one of my pet peeves).
October 23rd, 2009 at 6:33 pm
Bob—you are right on with your observations about which fonts to use and why.
Here’s my take after 41 years in the business. Let’s add a few basic rules to the fundamental laws of choosing easy-to-read typography for the WEB. (I have 11 major rules to share so to save space, I’ll list four. If anyone wants the whole list for free just email me.) Here are four simple rules which should be learned and followed.
1. Choose a typeface in keeping with your subject or topic. For example, do not use a delicate type Gill Sans Light to advertise heavy machinery or a heavy boldface type like Cooper Black to extol the virtues of a cosmetics company whose slogan is to ‘look 15 years younger’.
2. Remember that Italic online and in print is difficult to read. Use it sparingly for emphasis or better yet, highlight the word or phrase in yellow to make it stand out.
8. In considering the readability of type we must remember that the human eye can take in only so much comfortably. Type width should be planned around the reader’s eye being able to follow from the end of one line to the next without difficulty. Boomers and/or the over 50 market prefer to read larger type,14pt to16 pt (sans-serif) is best for this audience. Most web masters/graphic artists would agree that as a rule, it is difficult to read 6-or 8-point type set wider than 21 picas; 10-or 12 point wider than 18 to 24 picas; 14-or 18-point wider than 24 to 36 picas.
9. If you must use reverse type (light or white type on a dark/black background—use it in small doses, but not in the body copy. It’s better using it in a headline or subhead line—making sure it’s 24-point or larger. Reading large amounts of reverse type can cause eyestrain. For big blocks of text, it’s better to use dark text on a light background. For example, Black on yellow is easy to read.
Keep in mind that color packs a punch too—but that’s for another story on Which Colors to use on your Homepage to Attract, Engage and Hold a Visitors Eye™. Colored typography is expressive. Red denotes heat, fire, warmth or danger. Blue creates the impression of cleanliness and purity. The other colors of the rainbow all have inner meanings. Bob, perhaps you might ask your readers which colors they used on their homepage and why? email: andrewlinick@linick.net for ‘9 rules.’
October 24th, 2009 at 12:42 am
[…] Best Fonts for the Web? – bly.com blog – bly.com direct marketing blog […]
October 24th, 2009 at 8:39 am
Hey Bob,
I’ve run some font tests (in a non-marketing niche) and both Georgia and courier beat verdana (long style sales page, consumer info product.) I decided to test last year after I read an article stating serif fonts pulled well with “non-tech” products online.
It was 16 point Georgia over vs 14 pt verdana. (Not by a landslide however)
October 30th, 2009 at 9:22 pm
Clayton Makepeace used Courier in his “Makepeace Business System” sales letter which you can see in his webstore.
The folks over at Agora also use it in their financial promo’s.
I thought “Hell, if it’s good enough for them to test, it’s good enough for me.”
The letter I was writing was for an online advertorial selling a private equity opportunity.
One of the reasons I felt comfortable using it was because my market was rich, white, old guys.
People who actually have memories of using and receiving letters punched out on typewriters.
Not only was that in my favor, but courier offers lot’s of billowy white space in between the letters, which makes it easy on the eye.
This is good news for the retina that has more years behind it, than ahead of it.
If you’re ideal target is from an older generation, you may just want to test courier font for yourself.
Note Taking Nerd #2
www.mynotetakingnerd.wordpress.com
November 4th, 2009 at 11:47 pm
Nerd: everyone talks about Courier and typewriters, but my favorite typewriter typeface was and is Prestige Elite, which has fallen by the wayside.
November 13th, 2009 at 3:20 am
[…] and consultant Bob Bly recently published a blog post offering specific suggestions on the best fonts for online […]
November 25th, 2009 at 3:04 pm
I am trying to figure out what font to use in a redesign of my site. (See the prototype here: http://blog.ccnsteam.com/ )
Anyway, my web designer has set it up in Verdana. On other sites I’ve used Georgia and Tahoma which seem to work well.
Any thoughts on this?
Thanks,
Nathan
November 29th, 2009 at 4:44 pm
Nathan,
Tahoma is a nice font, but whatever percentage of your audience uses Linux, they won’t see it because it isn’t generally available to them. So make sure to include a fall-back font in your CSS.