Web Site Building · Layout and Design · Type and Colors

What this is about:

Now for a little discussion about typography; size and color, and background colors; for your web pages. We're far from experts, but some observations over the years have led us to opinions about what looks good and what doesn't, what's readable and what isn't. Stick with the classic type faces for your web presentation. Though it may seem fun, it's best to avoid the ones that are comical or edgy. Trust us, your visitors won't come back.

Choosing Your Palette

Work With a Color Wheel We tend to think that type any smaller than 12 points is difficult to read on a computer monitor. With today's modern browsers it's easy to change type size on the fly, but who wants to mess with that when doing your daily surfing. So when building your pages, keep your type size large enough to read; assume that your visitor has their default size at 12 points. In other words, etiquette says it isn't wise to reduce the size of the type below the default type size.

The human eye cannot focus on red and blue at the same time. Trying to read red type on a blue background or vice versa causes extreme eye fatigue. (Stare at the blue cell below for ten seconds and tell us you don't agree.) Your visitor will bail out before you can say "back button."


Never, ever use blue type
on a red background.

Even worse, is red type
on a blue background.


Warm colored type with
warm colored backgrounds.

Cool colored type with
cool colored backgrounds.

 

It's just an opinion, but we think that warm colors such as red, brown, orange and yellow look better together in combination. Likewise, cool (no, not kewl) color combinations like blue, green, gray and white make for a more appealing presentation. What do you think?

Working With Contrast

Keep the contrast low. We've seen lots of web pages that use white type on a black background. It looks cool at first, but it becomes difficult to read in long articles. Light gray type on a dark gray background is much easier to focus on, but is still not the best combination of colors for text intensive pages. No matter what colors you're using, keep the contrast reasonable. If your background has a value of, say 20%, and the type has a value of 80%, it presents a subtle look that's easy on the eyes and is graphically appealing. Avoid the extremes.


White type on a
black background.

Gray type on a darker
gray background.

Light pink type on a
purple background.


Dark gray type on a
light gray background.

Light green type on a
dark teal background.

Navy type on a light
blue background.

 

Finally, if you are featuring huge amounts of text for information purposes, present it as black or dark gray type on a white background and let your reader choose with browser settings how the type will be displayed. Remember to make the font size large enough that we don't need our reading glasses. Otherwise, be creative, just don't get too bright or use too much contrast between colors, unless of course your readers are snowboarders.