ONE OF THE MOST OVERLOOKED aspects of web design is the use of fonts. There are several different aspects of font usage that are key to producing a highly readable online text. More importantly, font usage plays an important role in maintaining the viewers attention and enhancing the overall look and feel of the site, arguably leading to repeat visits in the future. This article briefly examines four key elements of font usage, and provides simple interactive excercises to help you better understand font design principles.

The idea of using contrasting colors for background and fonts is mainly used to make headings or areas stand out on the page. Web designers should experiment with different shades of colors to find a combination that is visually appealing to the eye. Keep in mind, colors that are appealing to one culture may not be appealing to another. Thus, depending on the purpose of your web site, you should avoid extreme combinations that are displeasing to the eye and could potentially drive visitors away from your site. Colors combinations that are "warm" and "happy" are the safest bet. Also, colors that are representative of the product or service are also safe to use.

For example, when I say "UPS" what colors do you think of? Brown with gold or white lettering, correct? Although this combination may seem unattractive to the eye, it is effective in triggering the correlation between the world renowned company and the colors that we are so familiar with. Take a moment to visit their web site to see this concept first hand. Pay close attention to the use of brown, gold, and white.

The exercise below illustrates the design concept of font color contrast. First, select a background color, then mouse over a font color to view the contrast between the two.                                 EXERCISE: Font Color Contrast

    Background color 
    Font color              

The use of font size can also be used to make sections stand out. In general, most designers will use a font size that is equivalent to size 10 to 14 point font. Again, depending on the purpose of your site, you will want to maintain consistency with font sizes throughout your site. A font size that is too small may be so distracting and cumbersome that viewers will not want to return, much less read the text!

For instance, notice how a bigger font is used at the top of this article. It grabs the reader’s attention and provides the reader with an immediate cue as to what they will be reading about. Furthermore, it is a visual indication that this particular page on the web site is a different topic. It allows the reader to make this association and decide whether or not they want to continue reading.

The exercise below is a sample of a few different font sizes in Arial font. Click on a font size at the bottom navigation bar to view a sample.

EXERCISE: Font Size 

                                                                 Select a font size below 
                                                                

Many designers make the mistake of not aligning their text in a fashion which promotes easy reading. Left indented and centered text are the most common format, but also can seem very plain at times.

Alignment should also be used to group certain ideas or related information together. This way, the reader has a visual cue as to what the text is going to be about. For instance, notice how that many web sites align their navigation bar at the top of or the left of the page? Keeping the navigation aligned in this fashion allows web surfers to navigate faster through sites, and makes for easier comprehension of how a site is organized.

The exercise below is shows the five most common types of alignment. Left and center alignment is used in a lot of the web sites we see today. Right alignment may be used to group text close to a graphic picture. Justified text is used in media like magazines and newspapers. As a web designer, you'll have to decide which format fits your site the best. Use the exercise below to see how the different types of alignment match up with each other. 

EXERCISE: Font Alignment 

Header 
Body 

Font type is also considered font face, or font style, or font character. Indeed, there are now thousands of different font types available to web designers. In general font type should be should reflect the character or vision of the site. If you are designing a business oriented site that provides information, you probably want to use a very readable text. On the other hand, if you are trying to attract a younger audience, you might want to go with a font that is more urban and hip.

Novice web designers often make the mistake of using some "cool" looking font on their site that turns out to be rather unreadable and annoying to the the average viewer. If you have an unusual font, you should only use it for your logo to establish your identity. The remainder of the site should be used in an industry standard font. Despite all of the new fonts on the market, using some of the fonts you see in the exercise below are a sure way to maintain readability and cohesion within your site.

EXERCISE: Font Type 

                                                            Choose a font type below:

Understanding the simple design principles of font usage on web site can make your site a more visually appealing and enjoyable site. Furthermore, knowing the psychological affects of these techniques will help you better organize and present your information to the viewer and encourage them to return to your site again and again.

Brian Cabalic
SDSU Educational Technology