Web Page Legibility

If you want visitors to your site to read what you write, you need to make sure they can actually see the text on the page. Several things that prevent people from being able to read text:

Color. Black text on a white background is the easiest to see (high contrast). If you use color, use dark text on a light background or the reverse; avoid bright colors.

How easy is it to read this? Or this?

Here's a color combination I've run across several times...
Text size. Older people have difficulty reading small text (10 pt or smaller), yet they are using the Internet in increasing numbers. And as my over-40 coworker often reminds me, italics are hard to read as well.
Background images. Busy background images make it harder to read text. Animated backgrounds should never be used. (I once visited a site with an animated thunder-and-lightning background. Needless to say, I didn't stay very long.)

Is this an ugly background or what?
Can you read this text easily, compared to the rest of the page?

Remember that not everyone will share your artistic tastes. Also, including this background image forced you to download an extra 49k.

If you do use a background, it's best if it stays in the background by being subtle, both in color and pattern. Keep in mind that non-Christians may not be enamoured of fish/cross/burning flame backgrounds (see How to Annoy Atheists).
Animations. Need I say more? No one likes trying to read text while there is a blinking/flashing/moving thing nearby. In my opinion, this also applies to mouse trails and buttons that slide up or down after you scroll; any movement not intentionally and directly caused by the reader is distracting.
Pop-up ads/windows. You certainly can't read an article when there's something in front of it. This not only applies to pop-up advertising (which there is no excuse for subjecting your visitors to), but your own "Please bookmark my site/sign up for my mailing list/buy my book" pop-ups. It also applies to sites that require a special cursor, plug-in or Tinsel 8.0 - every page asks the user to download or install something, until they give in and install an unnecessary feature they don't want or leave the site.

On the other hand, here are some tips to make your articles easier to read and navigate:

Use sans-serif fonts. Some fonts are easier to read than others. In general, sans-serif ("without feet," or smooth) fonts are easier to read online than serif fonts. I use Verdana, which was designed to be easy to read online.
Sample text in sans-serif font (Arial). The quick black fox jumped over the lazy dogs.
Sample text in serif font (Times). The quick black fox jumped over the lazy dogs.
Use 12-pt font sizes or relative fonts. Ideally, you should use relative font sizes, either by using the font tag (e.g. <font size=-1>) or by using the relative size keywords in your style sheets (e.g. font-size: smaller or font-size: x-large). This enables readers to control the actual font size via their browser. If you absolutely must hard-code the font size, use 12-point or larger font sizes.
Proofread. All articles should be proofread. Spell-checking isn't good enough, as it doesn't catch errors like "if" for "of" or "your" for "you're." Mistakes are distracting to readers and lower the credibility of the author (see How to Annoy Atheists).
Switch web hosts. There are several web hosting companies that will host your site for free without forcing pop-up advertising on you. Some places don't require ads at all or only require that you put their logo on your home page. It doesn't cost that much to pay for ad-free hosting either; you can definitely get it for less than $10/month. See Death to Pop-ups for details.

Back to Usability articles

How easy is it to read this?	Or this?
Here's a color combination I've run across several times...