Typography Plays a Key Role in eLearning UX

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

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 withappropriate typography can give eLearning content a boost by adding to learnerengagement 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 blogpost is about the importance of typography in influencing customer behavior,the goals—and principles—are equally applicable to eLearning. “Typography is atool through which you can add personality and style to your text,” Oberoi states.(See References.) Typography includes:

• Typeface or font. The typeface is thedesign 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 orGeorgia italic, for example.
• Size. The size of print type is set inpoints. This measure is often used to describe digital text, but it is moreaccurate to describe the size of a web font in pixels. The point size measuresthe height of a typeface from the top of an “ascender,” a tall letter like an h, to the bottom of a “descender,” aletter 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 theimage. If screen resolution were 72 pixels per inch (ppi), it would be aone-to-one conversion. The W3C CSS standard defines a pixel as 0.75 pointsor 96 pixels to an inch. What this means for designers is that a 16-pixelfont is approximately the same size as a 12-point font.
• Line length. The width of the text box orthe horizontal measure of a line of text, the line length, affects ease ofreading and is therefore an important consideration in design. Very short linesforce readers to refocus more often as they return to the start of a new line, whilevery long lines might slow their reading; either of these extremes can impaircomprehension and increase cognitive load. Line length should be between 45 and75 characters, with 66 characters commonly cited as an ideal length.
• Leading, kerning, and tracking. Theserefer to spacing. Leading (pronounced “ledding”) is the space between lines oftext; kerning is the space between individual characters, which is generallydesigned by the type designer but can often be tweaked; and tracking refers tothe overall letter spacing of a passage of text. Adjusting the space can make ablock of text feel open or crowded and can also affect ease of reading andtherefore cognitive load.

Learning Solutions columnist Mark Lassoff offers adeeper 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 thelegibility and readability of content. Legibility refers to the ease ofidentifying individual characters, while readability applies to words, phrases,and sentences. Both affect how quickly learners can read and how much effort isrequired to comprehend text—a contributor to cognitive load. Additionally, “thetypeface will set the tone for the entire website, and a poor choice could sendthe wrong message or thwart the intended atmosphere,” according to JanConstantin, writing for Smashing Magazine(see References).

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

Including typography as an element of visual design meansconsidering 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 typeitself: Is it round, with wide characters? Or is it condensed and narrow orangular?

An unsettled question among designers is whether a serif typefaceor a sans serif typeface is preferable for body text. Those who favor serif typeargue that serifs—small lines at the end of a stroke in a letter—guide readersin distinguishing letters, thus aiding legibility. This argument is morecompelling for print works than for web content, though, since the resolutionof print works is considerably higher than that of screens. At digitalresolution, 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, Hischeadvises using the Il1 test: “Type a capital I,a lowercase l, and a number 1 next to each other. If you can’t tellthe difference between these characters, you may run into some trouble whensetting the text,” she writes.

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

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

How typography affects learning

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

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

Typeface also affects the tone of content. “Withincommunications research, many experts suggest that typefaces can convey mood,attitude, and tone while having a distinct persona based on the font’s uniquefeatures. 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 tofonts displayed onscreen. The 20 fonts chosen for this survey resulted in fivefactors based on prevalent personality traits. The factors each contained fontsthat were related by typographic features. The factors provide designers withsome guidance in terms of which type of font is best suited to differingpersonality expressions. Such knowledge can be used to set the tone of onlinedocuments.”

Typography, combined with other aspects of visual design, canlead learners to become more—or less—engaged with content. Kevin Larson andRosalind Picard studied the effect of typography on engagement. They based theirwork on research showing that when people are more engaged with a task, theyestimate that the task took less time, and, conversely, when a task isdifficult or they are not enjoying it, people tend to overestimate the time ittook. 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 anarticle. Their study supports this hypothesis, which indicates that goodtypography in eLearning design could enhance learner engagement.

The effects of typography can be related to associationsthat learners are not even aware they’ve made. Mikael Cho theorizes: “Oneexplanation for why some fonts make you feel a certain way is because of deeplinks in culture.” He cites as an example negative associations with Helveticatypeface among many American citizens, possibly related to the fact that the USgovernment 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 meaningattached to them,” Cho writes. “You don’t want to choose a font that is easilyassociated with something in our culture that’s markedly different than thevibe you’re trying to give off.”

Learn more

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

References

Bayer, Mareike, WernerSommer, 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 BritishComputer 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 Elementsof Typographic Style Applied to the Web (note: click on the title at top tobrowse the index). Based on: Bringhurst, Robert. The Elements of TypographicStyle. Vancouver, BC: Hartley & Marks, 1992.

Shaikh, A. Dawn, BarbaraS. Chaparro, and Doug Fox. “Perception of Fonts: Perceived Personality Traits and Uses.” UsabilityNews, 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.