Simplify your font selection

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.

Comments

  1. says

    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. Josh says

    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.