I have been a long-time reader of both UseIt.com and Web Pages That Suck. Both concentrate on what’s called web usability.

Web usability can be defined by answering a simple question: How easy is it to use your web site? A large portion of ease of use comes from your selection of colors and fonts.

Color: Foreground and Background

Black on white is always better than white on black.

To some this may seem confusing because one would assume white on black is better. However the problem with that is text to the human eye tends to "fuzz" when reading white on black, be it in print or on-screen.

The only time white on black ever works is when the fonts are oversized and thick. But if you do that with your web design, the text is just too big.

If using color: Dark on light is better than light on dark.

Color: Links should be a primary color

On a computer monitor, the best link colors for black on white are the primaries of red, green or blue. Or in hexadecimal values: #ff0000, #00cc00, #0000ff.

Links are meant to be seen and should contrast against non-linked text.

Font: Links should be underlined

Although there is no rule that says "all links must be underlined", people expect a text-based link to have a line under it signifying a link to somewhere else.

Another reason for underlined links is to accommodate the color blind. Without the underline, many literally can’t distinguish a link from regular text.

There are some instances where non-underlined links are okay, such as buttons. When it is very obvious that the text represents a button, the lack of a line under the word is fine. For example, the top navigation bar PCMech is button-style. If read as a sentence it makes no sense so it is easily assumed they are button links.

Font: People usually prefer serif

This is another one of those instances where people are so used to a specific typeface that it’s okay.

Serif fonts are better known as "Roman" style, like Times New Roman and Georgia.

Sans-serif fonts are serif fonts without the serifs (i.e. the little "accents" at the end of strokes), such as Arial, Helvetica, Trebuchet MS, Verdana and so on.

The default font in nearly all web browsers is always serif – even on Linux (in Ubuntu, Firefox follows the global font settings and it’s usually Bitstream Vera Serif).

Windows users are obviously very used to seeing Times New Roman as it’s been around for a very long time.

Why serif and not sans-serif? Why do people prefer this? It’s because newspaper and books use it most. That’s what we’re used to seeing, therefore serif is the better way to go.

Font: Minimum 14-pixel size is recommended for main text

Monitor resolutions are increasing but the fonts are appearing smaller as a tradeoff. Years ago you could get away with 11 and 12-pixel font sizes on web pages, but the bare minimum these days is 14. It has to be that else you run the risk of people not being able to read what’s on your web site or blog.

14 pixels of font size on a Windows system using CSS is any one of the following:

• 14px
• .88em
• 10.5pt
• 88%

If you want to play it safe, use the standard 16px; the CSS font-size rule for that would be:

• 16px
• 1em
• 11pt
• 100%

Quick tips for when you encounter a site with bad design

Bad design is when the fonts are too small, the pages are white on black and so on. You can skirt around these issues easily by doing the following:

1. Know your zoom controls.

All modern browsers (IE, Firefox, Opera, Chrome, etc.) have zoom controls. Know them and use them. CTRL and plus-key increases, CTRL and minus-key decreases, CTRL and zero resets to default.

2. "Turn off" the design.

Firefox-specific: Click View, Page Style, No Style. The web site will then look like it was made in 1999, but it will be a nice plain-jane black on white with a serif font and easily readable.

I especially recommend this method for viewing MySpace pages as they are in my opinion the worst-designed pages on the planet.  Watch how much easier (and faster) it is to get around with No Style selected. The difference is like night and day.

To re-enable: Instead of No Style choose Basic Page Style.