[Home] | [Articles Index]

Choosing Good Font/Background Combinations

Three Simple Guidelines

by Ted Kuik

Used effectively, seamless tiles or backgrounds at they are commonly called, can make a web page more visually appealing and add to the experience of those who visit the page. Used ineffectively, they become an eyesore, a distraction, and a reason to go somewhere else. In order to make good use of backgrounds, it is often helpful to keep certain basic aesthetic principals in mind. Although these principals are somewhat intuitively obvious, it is not hard to find examples of pages on the internet which ignore them.

1. Choose font/background colors which will not "clash" with eachother.

It is almost always a bad idea to choose a text color and background color which contrast with oneanother in a discordant manner

This is hard to read. This is easy to read
So it this. As is this
This too. And this

2. Make sure there is enough contrast between the font and the background.

On the other hand, choosing a font that is too close in color to the background will obviously cause readability problems as well. (In the most extreme case, where the two are exactly the same, the text will be completely invisible).

Low contrast is hard to read High contrast is easy to read
and causes eye strain. which is just
Who needs that? what a reader likes!

3. A fairly simple background is often best.

Usually it is a good idea to pick a background tile that is fairly uniform in appearance, something with a fairly limited range of color and not too much contrast. The first reason for going with a fairly uniform background is that it is less likely to look too "busy" and distract the reader from the text. Also, any other aesthetic rules for choosing good font/background combinations become more difficult to apply when one has to choose a font color to match a background which contains a wild array of colors.

This is a fairly busy background so it competes with the text and distracts the reader to a fair degree. This background is more muted and competes less with the text, thus making for a web page that is easier to read. This background has a narrower range of colors yet and competes for the reader's attention even less, making it still easier to read.

Of course, a plain color with no variation whatsoever would be the simplest background of all (and is sometimes appropriate), but that can make a page look too plain, particularly if the page consists primarily of text and lacks borders or color variations to give it some visual appeal..

While this is combination of a plain grey background and black text is easy to read, it has a certain sterile, boring quality to it. This combination of a somewhat varied grey background and black text is still quite easy to read, but it is more visually interesting.

Conclusion

The preceding three "rules of thumb" by no means exhaust the principals one can use to develope web pages which are both easy to read and pleasant to look at. Readers interested in learning more about this and related subjects are invited to explore the links below:

For Further Study

Color Theory and Mixing - An interesting 16 lesson tutorial by wetcanvas.com - Cyber Living of Artists

The Color Wheel Company - A site where you can buy (you guessed it) your own color wheel. They have a nice section covering some of the aspects of color theory.

Mundi Design Studios - A very slick site dealing with web color theory and other aspects of web page design (portions require Flash plug-in).

WebVoodoo's WebDesignClinic - Resources covering a wide variety of topics related to web page design, including tutorials on Paint Shop Pro and other popular software packages. There is a handy search box you can use to search the site for "color" or whatever topic you are interested in.

www.worqx.com - Web site design & development. There is an informative and detailed section about color theory.

 
 

Last Revised October 26, 2004

© Copyright 2004, Ted Kuik/Kuik Computer Services. All rights reserved.