Text content often makes up the bulk of the courses that we develop. Because of this, typography—the art and technique of arranging type—plays a large role in the viewer’s experience and the courses’ usability. To the untrained eye, good typography often goes unnoticed yet can give the viewer a pleasing experience not unlike that of a good digital interface, whereas bad typography might completely deter viewers. Not only does typography affect readability, it can set the mood for your message and even determine how effectively and efficiently your message is retained. While part of good typography is creative intuition, craft and technique are important and can be honed with careful considerations. Below are three considerations that will help improve your typographic technique.
Consideration 1: Typeface choice
When choosing a typeface, you must consider the scalability. It should be readable on a large screen as well as on a small mobile device screen. Letterforms that are very thin or ornate often do not read well at small sizes. It is helpful to first view the typeface at varying sizes before making the final choice. Using two typefaces creates contrast between different levels of information.
Sticking with no more than two different typefaces with a variety of weights is the safest route. Using three or more different typefaces tends to create a look that is not cohesive, which you do not want.
Consideration 2: Typesetting
The space around the text can be just as important as the text itself. Too much or too little space creates a struggle for the viewer. To maximize readability, we have to adjust the spacing to a comfortable balance. This adjusting of type and space is called typesetting. In basic typesetting, two common terms that are important to know are “tracking” and “leading.” Tracking is the space in between each letter. Leading is the vertical spacing in between each line of text. Matthew Butterick, typographer and author of Butterick’s Practical Typography, says that leading should be “120–145% of the point size.” Anything more is too loose and anything less is too tight.
Line length is also very important in typesetting. When the line of text runs too long, our eyes can grow tired. A margin at the end of the line allows our eyes to rest and readjust. Each line length should run “an average of 45–90 characters” according to Butterick’s Practical Typography. You can also pick up cues from print design; for example, breaking up large bodies of text into columns helps to add visual interest as well as shorten line length.
Consideration 3: Contrast
Contrast helps to call attention to something or create hierarchy. As mentioned earlier, using two typefaces helps to differentiate varying levels of information. Using a serif with a sans-serif, for example, creates contrast. Other ways to add contrast is by changing up color and size.
When choosing text colors, you must consider whether or not the text color contrasts enough with the background color. Pale blue text on a gray background does not read very well on-screen. Reversed out text is also hard on the eyes, so if you are going to have reversed out text, it is best to keep it to a minimal amount of text.
The main point is that we want to make it as easy as possible for text to be read. By taking the time to consider your typeface choice, typesetting, and type contrast, you can reduce the friction between the viewer and the course’s usability.
Sources:
1. A Guide to Web Typography
http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
2. Improving UI Design Through Better Typography
http://www.awwwards.com/improving-ui-design-through-better-typography.html
3. Butterick’s Practical Typography: Typography in Ten Minutes
http://practicaltypography.com/typography-in-ten-minutes.html
