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.

The human eye can see around 7 million colors. And that’s a rough best-guess number because no one truly knows the exact amount.

Your immediate thought might be, "But my monitor is rated to display 16.7 million colors (like this one). That’s more than double what my eye can see. Isn’t it physically impossible for the human eye to see them all?"

Yes and no.

It is not possible for your eye to see all 16.7 million colors at once.

It is possible for your computer monitor to be able to display more hues that your eye can see.

So yes, you can see them all (as far as we know). Just not all at once.

In plain English:

Your monitor renders color from what it’s capable of displaying. Those extra millions of colors allow it to have more hues to choose from. This in turn usually makes for more photorealistic/natural looking images.

A simple example:

If you look at an image of an apple on a computer monitor, the apple is red. But it’s obviously not one shade of red. It’s many shades.

If the monitor were only capable of 100 shades of red, the apple does not look realistic. Some parts of the apple will look a bit "cartoony" to the eye.

However when the monitor is capable of 5000 shades of red, this changes everything for the better. The monitor has more choice of what hues of red to use for its final rendered image. It can pick colors of red from anywhere within that 5000 instead of 100 – and more of them.

And of those 5000 shades of red, the monitor is not using all of them. Maybe it’s only using 750. Maybe less. Maybe more. It will use whatever is available to it to deliver an accurate representation of what it’s trying to display.

So in a nutshell: Your eye can’t see 16.7 million colors at once, but it can differentiate hues. Having a computer monitor that can display more colors is better. And at no time is your monitor displaying all of them (that would end up showing nothing but a solid white screen). Your monitor is designed to display what is deemed "true color" to the eye. Those extra hues count.

More colors = more hues = more realistic imagery.

To note, truecolor can best be described as "mostly true" or "what people are willing to accept as realistic accurate color representation on a computer monitor".

If you’re like most computer users, you’re using an LCD monitor as your primary computer display. And you’ve probably adjusted your monitor settings as best you could, but it still doesn’t “look right”. Some hues appear too blue while others appear too red, or maybe the black looks like a dark gray at best. Continued