<< Previous Page >> << Next Page >>

Navigation & Readability

This page discusses navigation styles, fonts, and contrast. These are all important considerations for any page design.


There are several basic styles of navigation. In general, the styles are identified by position and orientation on a page. They include:

  • Top
  • Left Side
  • Right Side
  • Bottom
  • Horizontal
  • Vertical




Top and side navigation are the most common. Right side navigation is relatively rare. Because it is so rare, it should generally be avoided because Web visitors are not used to it.

Bottom navigation is used when pages are long. This eliminates the need for the page visitor having to scroll back to the top of a page to access a link.

Bottom navigation using standard text links is often used on pages where rollover navigation is used elsewhere. Search engine robots often find it difficult, or impossible, to follow the image-swapping effects of rollover navigation. Standard text navigation allows the robots to easily catalog a page and follow the links.



On complicated sites navigation can be divided into primary and secondary categories. In the example to the right, the top navigation is primary. It is identical from page to page.

The side navigation is secondary. Each group of sub pages under the various primary navigation categories has its own custom navigation on the side. While the primary navigation is accomplished by image mapping, the secondary navigation consists of text links. The text links can be easily updated if necessary.

Putting all the possible links, both primary and secondary, on one page would make the page far too complicated and nearly impossible to use.





Text in Web pages is displayed by browsers using the fonts available in the viewer's computer. Most PC users have Arial and Times New Roman installed. Macintosh computers usually have Helvetica and Times. Arial is similar to Helvetica and Times is similar to Times New Roman. The vast majority of text presented on Web pages is limited to these fonts for both practical and technical reasons.

NOTE: Cascading Style Sheets (a technique for controlling presentation of elements in Web pages) allows use of non-standard fonts using @font-face rules. Details about how this can be done are at the W3 Schools CS3 Fonts page.








The page on the right illustrates good use of fonts. The headlines and main topic headers use a sans serif font that is easy to read. The text body uses a serif font, such as Times or Times New Roman, that is easy to read in blocks of text.





However, many designers find the standard Times, Times New Roman, Arial, Helvetica fonts to be dull. They will try to improve a site by using alternative fonts. This can now be accomplished using both traditional HTML Web safe fonts and the @font-face rules that are mentioned above.




Text Presentation

Because the Web is primarily a visual medium, and the main method for information presentation is text, how text is presented is an extremely important consideration. Which font to use is only one aspect that must be considered when building a Web page.

Normally, people do not read text one word at a time. Text is read in groups of words. The size of the text is a key element in determining how easy it is to read sentences. Text that is displayed too large is just as difficult to read as text that is too small.



Using the old font tag (which is no longer valid) the standard Web page font is "3." Sizes were specified smaller at "2" and "1," and larger starting at "4." Because the font tag and related size attributes are no longer used, alternate methods of setting font size are necessary.

Fixes font sizes are now specified using pixels as the unit of measurement. Proportional fonts sizes are determined by using ems or percent. Examples are on the right.

NOTE: Cascading Style Sheets use a different technique for specifying font size. For more information about CSS be sure to visit our Cascading Style Sheet online tutorial.




High contrast levels between text and background makes the text easier to read. Black text on white is the easiest. White on black, even though it is high contrast, is harder to read. Certain color combinations, such as red and blue, should be avoided because they result in extremely high perception problems.

At times style and message collide. As with anything, Web design styles change. Popular automobile colors change as do clothing fads. There is nothing wrong with this and it is perfectly normal. However, occasionally design fads will conflict with the primary goal of communicating a message.

There has been a trend to use low-contrast gray text on white backgrounds for Web pages. If you elect to try this, be sure to test your site on different devices, including computers, smartphones, and tablets. If the text is not readable, the site will fail in communicating the message.

Try reading the text below:

Can you read this? (Color #333333)

Can you read this? (Color #666666)

Can you read this? (Color #999999)

Can you read this? (Color #cccccc)



Analyze A Web Page

On the right are four examples of Web pages. Here are your questions:

  • One of the pages has a very complicated and "busy" background. The text blends in and is hard to read. Which page is it?
  • One of the pages has low contrast between the text and the background colors. These color choices make it hard to read. Which is it?
  • One of the pages has good contrast, good text alignment, and lots of white space. It is very easy to read. Which is it?
  • One of the pages on the right has fairly good contrast. But the text alignment makes it hard to read. Which page is it?

Use your mouse pointer to touch the images on the right to discover the answers.








The improved Web page

This page uses vertical
navigation on the left side



This page uses top horizontal

This page uses top horizontal navigation




This page uses primary

This page uses primary navigation at the top and
secondary navigation on the site


Check Your Fonts

Here are the most common "Web safe" fonts:

  • Arial
  • Helvetica
  • Times
  • Times New Roman
  • Verdana
  • Georgia

Here are some uncommon fonts:

  • Viking
  • Batavia
  • Courier
  • Onyx

How many of your fonts match those in the image below?

Demonstraton of fonts



This is an example of fonts that are used well


Alternate font use


Large text is hard to read because people can only read one or two words at a time.

Small text is difficult to read because many computer screens cannot clearly display the tiny characters. Also, small print is hard to see under the best of circumstances.

Here are common font sizes that are both fixed and proportional:

  • 6 pixels
  • 10 pixels
  • 14 pixels
  • .9 em
  • 1 em
  • 1.2 em
  • 1.4 em
  • 90%
  • 100%
  • 120%



Black text on white a white background is easiest to read.

White text on a black background harder to read than black on white.

This combination is hard to read because there isn't enough contrast between the text and background colors.

Red and blue is difficult to read because of perception problems. Sometimes the text almost appears to vibrate.


Page A

This page has a very busy background that causes the text to blend it. It is very hard to read.

Page B

This page has low contrast between the text and the background. This should be corrected for easier reading.

Page C

This page has pretty good contrast, but the center alignment makes the page very hard to read.

Page D

This page is the best because it has good contrast, lots of white space, and simple left alignment.

<< Previous Page >> << Next Page >>