Stop the Font Madness!

When designing your first web site, there is often an uncontrollable urge to use as many font sizes, styles, colors and boldness as you can find in your html editor.

It's understandable, your enthusiasm is bursting for your new creation and basically you design how you feel.

As good as it may feel, you may be doing more damage than good because frankly your visitor comes to your site with a much more controlled response.

The best way I can share what I'm talking about is with a real example. Following are two pages, using actual content given to me by a client.

The first page is what I call the font madness site.

http://www.wordnet.net/fonts/sample1.htm

It almost speaks for itself. This first sample causes more anxiety than excitement. The visitor has to work significantly harder to understand the general concept of the page.

Now, the second page uses exactly the same content but is laid out in a visually friendly format.

http://www.wordnet.net/fonts/sample2.htm

So let me ask you, what is the first thing that catches your eye in the second sample? If I did my job correctly, the first thing your eye wanted to do was scan the blue title areas.

This approach helps the visitor feel like they can scan and "take in" the entire page in only a few seconds without having to actually read the content. This effect is relaxing to the visitor and allows them to return to the area that catches them first emotionally. If they like what they read, they will probably read the entire page or at least move on to the next page you guide them to.

There are a few other methods used to make this page user friendly.

1. I used only two fonts, Times New Roman and Arial. In general, these are the only two fonts you will use on the web. Another little tip is that Times New Roman is easier to read as a small font, making it good for text and Arial is easier to read as a large font, making it good for headers.

2. I used only two sizes. One large for headers and a smaller font size for all text.

3. I used bold characters sparingly to highlight important items.

4. I used an off-set color (red) in only one place and it's used to highlight an emotional appeal. Even though this seems like a negative emotional appeal, the effect is the same, you read it because you are concerned about what "it" is that is going to cost you.

5. I used equal spacing between headers and text all the way through the copy.

6. I tried to stay away from large blocks of text that go on and on. Try to keep paragraphs to 45 words or less.

7. I used numbering in the first paragraph to break up a large block of text. Bullet points work equally as well.

When you get ready to update your web site, remember to put your visitor's response ahead of your own enthusiasm. Be consistent and keep it simple.