AbleDesign - Tutorials

Web Design Tutorials - Beginning Design Considerations

Font and font colors

This one will be a no-brainer for most of you, but there are a surprising number of folks who just don't seem to get it. Unless you are going out of your way to make people not visit your site, make sure to choose fonts, font colors, and page colors and backgrounds that will be legible on your pages.

An example of very poor font color and background choice

Even eye exams are not that unpleasant! Beyond just making the text legible on the page, there are several guidelines to follow in order to pick the right font for the job:

  • Use Arial for easier reading on the computer screen.
  • Use consistent subheads (subtitles) that are closer in appearance to the text that follows them than to the text above them.
  • Keep the number of fonts to a minimum - generally one or two per page.
  • Keep all text left justified for easier reading, i.e. do not center all of your text.
  • Use dark colored fonts on a light background, and vice versa.
  • Don't use too many quotes - emphasize words with italics or bold (better than multi-colored) font.
  • As discussed in the Reason to Return tutorial, avoid using large, unbroken blocks of text.

Anti-aliasing

Anti-aliasing is a graphics term for producing images such as text with smooth edges. This is most significant with image formats such as GIF that used a fixed (and limited) number of colors in the color palette. Anti-aliasing is accomplished through approximating the colors between bordering colors and blending them for smoother transitions. Your graphics program should have an option to toggle anti-aliasing on or off.

Take a look at the following two examples:

Text that is not anti-aliased
Not anti-aliased
Text that is anti-aliased
Anti-aliased

Now look at the same two images magnified 5x:

Text that is not anti-aliased
Not anti-aliased
Text that is anti-aliased
Anti-aliased

As you can see, the anti-aliased version produces much smoother and more professional looking images. File size is a bit bigger, but the increased size is generally well worth it in terms of improved appearance.

Anti-aliasing is most needed when the object and background colors are highly contrasting, such as the black and white example above. If you were to place the black text on a grey background, anti-aliasing probably would not be necessary (of course, it also wouldn't be very legible). The reason is that the colors which would be used to approximate bordering colors would be very close to both the background and foreground colors (note the shades of grey in the enlarged anti-aliased example) and would not make much difference.

Next Tutorial
Back to the Tutorials Index



Home | Services | Pricing | Portfolio | About Us | Contact
Support | Programs | Purchase | Tutorials | Site Map

© 1999-2017 AbleDesign.com - Web Design that Can!