Best Fonts for the Web?

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?


36 thoughts on “Best Fonts for the Web?

  • 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.

  • 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?

  • 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.

  • 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.

  • 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.

  • 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).

  • 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: for ‘9 rules.’

  • 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)

  • 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

  • Nerd: everyone talks about Courier and typewriters, but my favorite typewriter typeface was and is Prestige Elite, which has fallen by the wayside.

  • I am trying to figure out what font to use in a redesign of my site. (See the prototype here: )

    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?



  • 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.

  • You should use a common font so people will be able to outlook it as you designed the page. I would furthermore recommend a san-serif font, as the serifs can make the font less legible onscreen, particularly at a smaller size.

  • Pingback: turnkey
  • Excellent items from you, man. I’ve be mindful your stuff prior to and you’re simply extremely excellent.
    I actually like what you’ve bought right here, really like what you are stating and the way wherein you say it. You’re making it enjoyable and you continue
    to take care of to keep it sensible. I cant wait to learn much more from you.
    That is really a great site.

  • Hi, I do think this is a great site. I stumbledupon it 😉 I may return once again since I saved as a favorite it.
    Money and freedom is the greatest way to change, may you be rich and
    continue to help others.

  • Hey I know this is off topic but I was wondering if you knew of any widgets I could add
    to my blog that automatically tweet my newest twitter updates.
    I’ve bden looking for a plug-in like this for quite some
    time and was hoping maybe you wouod have some experience with something like this.
    Please let me know if you run into anything. I truly enjoy reading your
    blog and I look forward to your new updates.

Leave a Reply

Your email address will not be published. Required fields are marked *