Effective Use of Text on the Web

Volume I - Issue VII - July 2001

Design Principles

Jason Petersen
Graphic Artist - Web Developer

Effective Use of Text on the Web

Perhaps the most overlooked area of good web design is text selection. Most amateur web designers quickly choose font, text color, and paragraph formats without thinking about how the text will look and feel to the user. This is a big mistake. You may not be aware of it, but if you haven't taken some time to think about the text settings on your site, it could look completely different to every person who views it, and some may not even be able to see your work at all. While there is nothing you can do to ensure that everyone who views your web sites will see them exactly as you want them to, there are some things that you can do to help.

Understand What You're Up Against
Text on the web is one of the great unknowns - it is almost guaranteed that each person viewing your web site will see it a little bit differently. If you're not careful, however, some may see it a lot differently. Here's something fun to try: If you're using Internet Explorer click on View then Text Size and select Largest (Netscape users click View and then Increase Font several times). The size of the text on the screen is up to the user...and as a web designer that means your beautifully formatted pages will look entirely different to anyone who has a different text size setting. In addition to text size, many people who view your web pages won't have the same fonts as you do - this could spell disaster. If someone who is viewing your web page doesn't have the fonts that you have specified, their browser will simply substitute in a font that it does have. That font could be a foreign language or some cryptic code for all you know.

Ok, now that we have gone through just a few of the problems, let's talk solutions. Throughout the remainder of this article I will give you some basic tips that you can use to make sure that your text selection doesn't ruin your web pages. I'll also throw in a few hints and tips for text and paragraph formatting that you may find useful. And so, without further adieu, here is the graphic guru's guide to text selection:

Tip #1 - Common Fonts are a Viewer's Best Friend
One of the best things that you can do for yourself as you build a web page is to throw away all of your fancy fonts. Any font that you use that is uncommon or could be considered a "specialty font" will give the people who view your site problems. More than likely their browser will have to replace it anyways, and you take a chance that your fonts will be replaced with a less than desirable alternative. Just as a general rule, sticking with common fonts like Arial, Times, Times New Roman, Helvetica, or Verdana is a good idea. Almost all computers have theses fonts and you can rest assured that the fonts on your page will look the same to everyone. If you stray too far from the common fonts, it will without question cost you hits.

Tip #2 - One Size Does Not Fit All
The little exercise we did earlier was a good demonstration of just how little you control by way of font size. And while you can't force viewers to select a certain size, you can make sure that your pages will be functional regardless of Text size. First off, don't try to precisely line up graphics (like buttons) with corresponding text. Having a button and then some text next to it describing the button is a bad idea - someone with a super large text setting will see it all out of line. While the graphic and text block is a great tool, just remember that others will have different text size settings and design accordingly. Finally, never put words or text items together that will suffer if the text is wrapped - for instance, using a text block to describe an item, it's order number and it's price is just asking for trouble. If you need to make sure that something lines up - use a table.

Tip #3 - Avoid Noise
Let me see if I can show you a good example of noise:

The many fonts being used here are quite distracting, wouldn't you agree?

Don't let the wide selection of fonts available through EZ-PageBuilder go to your head. Pick one or two fonts that you will use throughout your entire site. Use only those fonts, and use them consistently. Here is a winning combination that I bet you're familiar with and didn't know it: Sans-Serif Headlines with Serif text. Before I explain further, let me explain the difference between a serif and a sans serif font. A serif font is simply one like Times New Roman, where each of the letters has a little "tail" on it. Sans Serif fonts are simply fonts "without tails" (sans is Latin for "not"). To demonstrate:

This is a Serif Font

This is a Sans Serif Font

Another Serif Font

Another Sans Serif Font

Notice that both of the serif fonts have letters with little tails and bases on them, while the sans serif fonts (as well as the font that you are now reading) are all just straight lines and curves. Why do I suggest that you might be familiar with a Sans Serif headline and Serif text - because most newspapers follow that format. They commonly use Arial for all headlines and Times New Roman for the articles.

Tip #4 - Break Up Big Chunks of Text
This is more of a formatting tip, but it still applies to text. Studies done by usability experts like Jakob Nielson indicate that people who are surfing the web rarely read more than two sentences into a paragraph. You may have noticed yourself scanning this article to see if there was anything that interested you - well, you're not alone. To get people to read what you are putting out on the web, follow these common guidelines:

Avoid paragraphs with more than 3-4 sentences if you can.
Break paragraphs up with headlines and bullets
Say the most important things at the first of every paragraph
Break up pages with lots of text into multiple pages linked together

Tip #5 - Use Color Creatively
You can really spice up your web sites by using color within the text. Too often I see web sites with only one text color. This is boring and can be monotonous. Now before you rush to turn your pages into an online rainbow-bright, let me explain. When I say use colored text, I don't mean that each paragraph should have a different color text. Usually, it is best to stick with black text (unless you have a dark background) and use color for headlines and words or phrases that you want to accentuate. Remember that color is good, and if used consistently and in the right places can be very attractive - used too much, color becomes annoying.

Conclusion
Hopefully these tips will at least get you thinking about the fonts and text styles you use on the web. You can really distinguish a professional web site from amateur work in the way that fonts and texts are used, and it will be well worth your time to learn how to do it right.