Typography Plays a Key Role in eLearning UX

Written By

Pamela Hogle

December 05, 2017

Typography, a much-neglected element of visual design, can have an enormous impact on how learners perceive and understand eLearning content. Visual design elements like color scheme and font contribute to the overall message that content conveys; they also affect the UX, user experience—the way a learner feels while navigating through an eLearning module.

Learning Solutions recently examined how colors influence learners. Typography can have similar effects on learners’ mood and ability to comprehend content. Pairing an effective color scheme with appropriate typography can give eLearning content a boost by adding to learner engagement while reducing cognitive load.

Elements of typography

According to Ankit Oberoi, writing in the Kissmetrics Blog, “Typography is where art meets text.” Though Oberoi’s marketing-focused blog post is about the importance of typography in influencing customer behavior, the goals—and principles—are equally applicable to eLearning. “Typography is a tool through which you can add personality and style to your text,” Oberoi states. (See References.) Typography includes:

  • Typeface or font. The typeface is the design of letters, numbers, and characters; a typeface might also be called a “family” of fonts. The font is a specific style of typeface: Arial black or Georgia italic, for example.
  • Size. The size of print type is set in points. This measure is often used to describe digital text, but it is more accurate to describe the size of a web font in pixels. The point size measures the height of a typeface from the top of an “ascender,” a tall letter like an h, to the bottom of a “descender,” a letter that dips below the line, like a g. Type that is 1 inch tall measures 72 points. Converting points to pixels, unfortunately, depends on the resolution of the image. If screen resolution were 72 pixels per inch (ppi), it would be a one-to-one conversion. The W3C CSS standard defines a pixel as 0.75 points or 96 pixels to an inch. What this means for designers is that a 16-pixel font is approximately the same size as a 12-point font.
  • Line length. The width of the text box or the horizontal measure of a line of text, the line length, affects ease of reading and is therefore an important consideration in design. Very short lines force readers to refocus more often as they return to the start of a new line, while very long lines might slow their reading; either of these extremes can impair comprehension and increase cognitive load. Line length should be between 45 and 75 characters, with 66 characters commonly cited as an ideal length.
  • Leading, kerning, and tracking. These refer to spacing. Leading (pronounced “ledding”) is the space between lines of text; kerning is the space between individual characters, which is generally designed by the type designer but can often be tweaked; and tracking refers to the overall letter spacing of a passage of text. Adjusting the space can make a block of text feel open or crowded and can also affect ease of reading and therefore cognitive load.

Learning Solutions columnist Mark Lassoff offers a deeper dive into typography terms and conventions in “Raise the Bar: Understanding Typography for Online Learning.”

Choosing a typeface

The choice of a typeface and font has bearing on the legibility and readability of content. Legibility refers to the ease of identifying individual characters, while readability applies to words, phrases, and sentences. Both affect how quickly learners can read and how much effort is required to comprehend text—a contributor to cognitive load. Additionally, “the typeface will set the tone for the entire website, and a poor choice could send the wrong message or thwart the intended atmosphere,” according to Jan Constantin, writing for Smashing Magazine (see References).

Lettering artist Jessica Hische offers a wealth of advice for selecting type. She advises looking at the size of a font family—how many weights and variations are available? Having options beyond roman, bold, and italic available offers myriad visual design possibilities. An additional consideration that affects learner experience: x-height, which is the height of lowercase letters. Fonts of the same point size vary considerably in their x-height, and this affects the readability of text, especially captions and other text set in small fonts.

Including typography as an element of visual design means considering the appearance of the font—and of a page with text set in the font. Set up some test pages, and look at the spacing of the characters and the type itself: Is it round, with wide characters? Or is it condensed and narrow or angular?

An unsettled question among designers is whether a serif typeface or a sans serif typeface is preferable for body text. Those who favor serif type argue that serifs—small lines at the end of a stroke in a letter—guide readers in distinguishing letters, thus aiding legibility. This argument is more compelling for print works than for web content, though, since the resolution of print works is considerably higher than that of screens. At digital resolution, the serifs risk becoming distractions that slow down reading. Similarly, at small sizes, sans serif type is clearer and easier to read.

Finally, for those considering sans serif typefaces, Hische advises using the Il1 test: “Type a capital I, a lowercase l, and a number 1 next to each other. If you can’t tell the difference between these characters, you may run into some trouble when setting the text,” she writes.

Once you’ve settled on a typeface, consider size. In Smashing Magazine, D. Bnonn Tennant argues that 16 pixels should be the minimum size used for body text online. Tennant’s article is addressing marketing professionals, but, again, the argument provides sound advice for eLearning designers as well. Using at least 16-pixel type makes the text easier to read, particularly for learners over age 40. “If people won’t read it, or if they can’t read it or understand it, then what’s the point of having it?” Tennant muses. Books are typically set in 10-point type, but most people sit between 20 and 24 inches (51 to 61 cm) from their computer screens, which is farther than most people hold printed reading material. The 16-pixel type, which is about 12 points, takes the greater distance into consideration.

Most learners will have to strain to read text that is smaller than 16 pixels. Or they will need to figure out how to enlarge it. But the goal of eLearning is to draw people into the content—not force learners to struggle just to access it. “The harder your text is to read, the less of it will get read—and the less of what is read will be understood,” Tennant writes. Larger type can reduce the cognitive demands on learners by making accessing—reading—the content easier, improving comprehension in the process.

How typography affects learning

Though an essential component of visual design, typography has an impact that goes far beyond appearance. It plays a crucial role in UX and can even affect learning and retention of content. Several studies find that learners read more quickly when content is set in larger type—up to a point; overly large type can also slow readers down.

Large type is also found to produce a greater emotional response than the same words set in a smaller size. In describing the results of their study, which compared test subjects’ responses to smaller and larger text with previous studies of emotional response to photos, Mareike Bayer et al. write, “Our results showed a functional similarity across stimulus domains: An increase in stimulus size caused augmented emotion effects during sensory encoding, replicating effects of stimulus size for emotional pictures.” (See References.)

Typeface also affects the tone of content. “Within communications research, many experts suggest that typefaces can convey mood, attitude, and tone while having a distinct persona based on the font’s unique features. Each document should be rendered in a font that connects the mood, purpose, intended audience, and context of the document,” write Shaikh, et al. Their research confirmed this: “Users consistently attributed personalities to fonts displayed onscreen. The 20 fonts chosen for this survey resulted in five factors based on prevalent personality traits. The factors each contained fonts that were related by typographic features. The factors provide designers with some guidance in terms of which type of font is best suited to differing personality expressions. Such knowledge can be used to set the tone of online documents.”

Typography, combined with other aspects of visual design, can lead learners to become more—or less—engaged with content. Kevin Larson and Rosalind Picard studied the effect of typography on engagement. They based their work on research showing that when people are more engaged with a task, they estimate that the task took less time, and, conversely, when a task is difficult or they are not enjoying it, people tend to overestimate the time it took. Larson and Picard hypothesized that learners reading content set using “good” typography would underestimate the time spent and those reading “poor” typography would overestimate the amount of time it took them to read an article. Their study supports this hypothesis, which indicates that good typography in eLearning design could enhance learner engagement.

The effects of typography can be related to associations that learners are not even aware they’ve made. Mikael Cho theorizes: “One explanation for why some fonts make you feel a certain way is because of deep links in culture.” He cites as an example negative associations with Helvetica typeface among many American citizens, possibly related to the fact that the US government uses Helvetica for tax forms. It’s not only the way a font is used, either. “Because fonts are designed by humans, there is usually some meaning attached to them,” Cho writes. “You don’t want to choose a font that is easily associated with something in our culture that’s markedly different than the vibe you’re trying to give off.”

Learn more

To further explore the design of eLearning, join The eLearning Guild on January 31, 2018, for the Designing for Engagement Spotlight. And download the Guild’s eBook, free to registered members, 233 Tips on Graphics and Visual Design.

References

Bayer, Mareike, Werner Sommer, and Annekathrin Schacht. “Font Size Matters—Emotion and Attention in Cortical Responses to Written Words.” PLOS ONE, Vol. 7, No. 5. May 2012.

Beymer, David, Daniel Russell, and Peter Orton. “An Eye Tracking Study of How Font Size and Type Influence Online Reading.” The British Computer Society. 2008.

Cho, Mikael. “The science behind fonts (and how they make you feel).” The Next Web. 31 March 2017.

Constantin, Jan. “Typographic Design Patterns and Current Practices (2013 Edition).” Smashing Magazine. 17 May 2013.

Klein, Simon Pascal. “Achieving good legibility and readability on the Web.” kle•pas. 27 March 2011.

Larson, Kevin, and Rosalind Picard. “The Aesthetics of Reading.” Unpublished. 2017.

Oberoi, Ankit. “How Typography Affects Conversions.” Kissmetrics Blog.

Rutter, Richard. “Choose a comfortable measure.” The Elements of Typographic Style Applied to the Web (note: click on the title at top to browse the index). Based on: Bringhurst, Robert. The Elements of Typographic Style. Vancouver, BC: Hartley & Marks, 1992.

Shaikh, A. Dawn, Barbara S. Chaparro, and Doug Fox. “Perception of Fonts: Perceived Personality Traits and Uses.” Usability News, Vol. 8, No. 1. February 2006.

Soleimani, Hassan, and Elham Mohammadi. “The Effect of Text Typographical Features on Legibility, Comprehension, and Retrieval of EFL Learners.” English Language Teaching, Vol. 5, No. 8. July 2012.

Tennant, D. Bnonn. “16 Pixels Font Size: For Body Copy, Anything Less Is A Costly Mistake.” Smashing Magazine. 7 October 2011.

More Design

You May Also Like