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
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.
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.
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
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
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.
|About the contributor