Portfolio Design: Legibility

Back to Portfolio Phase 3 | Back to Portfolio Rubric

Although the Web provides a wide set of design choices, it is important that the final page design be easy to read. Below are some guidelines for increasing legibility.

Font Size

Your fonts should be a minimum of 9 points in size. Smaller fonts are more difficult to read, especially for the more elderly eyes of potential portfolio reviewers.

Font Face

  1. Sans-serif fonts like Verdana, Arial and Helvetica are generally recommended over Times New Roman and Comic Sans MS because they are generally easier to read on computer screens. If you want to use special fonts, be sure set to a large size (e.g. 12-16 points).
  2. If you use colored text, you may want to make it bold face to increase legibility.
  3. You have the most freedom with headlines, titles and navigation buttons. This is the place to experiment with fonts and colors.
  4. Avoid italic styles since the slant makes them less legible on a screen. Bold face can be used in the place of italics.

Color Contrast

The contrast in lightness/darkness between the text and the background must be far enough apart so that the text can be easily read. This is one reason black text on white backgrounds are so popular, even on the Web.

You are not restricted to just black and white, but you want to avoid shades that are too close together. Some "subtle" contrasts can be too subtle for some readers. Note that different colors such as red and green may actually be the same shade (or darkness). In black and white, red and green both become mid-gray.

Another caution is to avoid bright colors together like Christmas red and Christmas green or hot pink and yellow. When bright colors are right next to each other, they can cause an illusion of vibrating edges called "simultaneous contrast" which makes pages harder to read. One tip is to either use either darker or lighter versions of colors or to separate bright colors with a neutral white, gray or white.

Links to Other Sites

 

Top of Page

Back to Teaching With Technology Certificate Main Page