Simplify your font selection

Filed as News on September 27, 2006 1:00 pm

I’m working hard on a CSS Tips and Tricks, Part 2 article but until then I’ll complain a little bit about a design mistake I see popping up.

Please…pretty please: stop using so many different fonts in the body of your website. As a general rule you should use exactly 2 fonts. If you’re really good at what you do and think you can use a 3rd font judiciously do so at your own risk.

The majority of web sites really have no need for a 3rd font. Use a font for headings and a font for body text. Make sure the font is easy to read. Make sure it’s a font that the majority of your visitors have.

If we don’t have the font, go ahead and give our browsers another option. When I am working on a website one of my “standard” font rules looks like this:

p { font: 1.2em Arial, Helvetica, Sans Serif; }

This way if the user doesn’t have Arial on their computer, it goes to Helvetica (which looks better anyway, but doesn’t come standard on most PCs) and at the very least they get a Sans Serif font.

Another rule of thumb that I wasn’t planning on talking about but just popped into my head: please try to give your font and background a good amount of contrast. Bright yellow fonts on white backgrounds are the reason I don’t use MySpace – don’t make it the reason I’m not reading your blog.

Any other tips for keeping websites useable? Post them in the comments.

Tags:

This post was written by

You can visit the for a short bio, more posts, and other information about the author.

Submissions & Subscriptions

Submit the post to Reddit, StumbleUpon, Digg or Del.icio.us.

Did you like it? Then subscribe to our RSS feed!



  1. By Jessica Doyle posted on September 27, 2006 at 3:06 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    A usability issue that could be hard on the reader eyes, is there not being enough space between images and text especially when the image is small and left or right aligned where the text flows around it within the paragraph.

  2. By Josh posted on September 27, 2006 at 3:24 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Keep It Simple Stupid.

    People should come back to your site because you have something interesting to say, not because of all the pretty colors you decided to show you recently learned were available.

  3. By Joe Clark posted on September 28, 2006 at 6:12 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I’d prefer to specify as many fonts as possible. We aren’t making Swiss Modernist corporate annual reports. And no frigging Arial, OK?

  4. By Ben Bleikamp posted on September 28, 2006 at 6:26 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Joe – what do you mean? My point is that on a given website you don’t need more than 2 fonts in the body.

  5. By Chris P. posted on September 28, 2006 at 9:28 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Ha, I just went to Joe’s site — there are like 5000 fonts! Laff!