Visual Design Primer Part 2: Typography and Font Usage

Posted At : July 22, 2009 3:41 PM | Posted By : Chris Van Wingerden
Related Categories: e-learning, instructional design, visual design

In our previous post we looked at some critical issues to keep in mind when thinking about image and animation use in an online learning project.

The old saying might be that a picture is worth a thousand words, but in e-learning you really can't get away from words completely.

But text in an online learning experience is more than just words on the screen. It is also a key element of visual design. It's especially important to especially ensure that the visual design of the text presentation best supports the learning that needs to take place.

Here are some key concepts to keep in mind when you think about using text in your online learning course.

Typography
Typography is the art and technique of setting written subject matter in type using a combination of fonts, font sizes, line lengths, leading (line spacing), and letter spacing. When dealing with typefaces, always limit yourself to full families of fonts, and only mix serif and sans serif fonts based on the structure of the project.

As a general rule:

  • Avoid having two consecutive lines that end with hyphens
  • Widows and orphans (one word on a line by itself) are undesirable
  • Tighten text (decrease letter spacing) no more than -3
  • Kern (manually adjust the space between letters and words) on titles/word-marks to improve letter spacing

    • Note: Typographic controls such as kerning and leading are often not available in applications meant for online display. They may be still used to good effect when preparing text as an image for online display, as in this example:

    Here's a link to a good general overview of the subject of typography.

    Fonts are the visual families that you choose to use to display your text. Microsoft has a great site to spend time at if you are new to typography and fonts. For example, it explains what TrueType fonts and ClearType fonts are. It also gives a great overview of typography in general.

    General Font Information for Web-based Training
    Since text will carry the bulk of your learning content, it will be very important that it display clearly. Here are some guidelines for text use:

  • Fonts should be a minimum of 14 points for online learning. People above the age of 40 and people with visual perceptual deficit may have problems reading text if it is smaller.
  • Place text on an uncluttered background, distinctly separate from other screen elements. There should be a clear contrast between text and background elements.
  • Provide plenty of white space, and keep your columns of text narrow (8-12 words).
  • Try not to use more than two typefaces in your project. When using more than one typeface, make them quite different.
  • Use a typeface that is easy to read on-screen, for example Arial or Verdana. Small serif fonts such as Times New Roman are difficult to read on a monitor.
  • Make sure the spacing between sections of text in the project (between headings and main content, between paragraphs, etc.) is consistent.
  • Be aware that underlined fonts may be confused with active links to information and could be frustrating for learners.

    Fonts and Color
    It's always tempting to add a bit of color to your text to help it stand out, but generally you should use color cautiously on text.

    For example, you should avoid using a font color against a background color that is adjacent to it on the color wheel, since the text will blend in with the background. Pick colors that have enough contrast to be easily read. Use dark colors for text. Generally, bright or light colors used for body text makes this text difficult to read.

    Avoid using colors which are opposite each other on the color wheel as they will be distracting, and may cause the illusion of 'vibration', as shown in the example below.

    Online learning is a visual medium, but text will inevitably still play a role in almost every online course you create. Following these guidelines will help make sure you are using text in the best ways possible, all in an effort to improve the effectiveness of the learning experience.

    Next post: Color theory

    Chris Van Wingerden is Vice President Learning Solutions at dominKnow Learning Systems

    • Comments (0) | Print | Send | 504 Views
    Share this Article
    TweetBacks
    Comments

    There are no comments for this entry.

    [Add Comment] [Subscribe to Comments]
    BlogCFC was created by Raymond Camden. This blog is running version 5.9.4. Contact Blog Owner
    Technology Blogs