How_to_Use_Typography_to_Improve_Your_E-Learning

Table of Contents
Introduction 3
Typography Matters 6
Put a Face to Your Type 9
Set the Mood with a Good 11
Typeface
Is Your Typeface Easy to Read? 13
The Difference Between 14
Typeface and Font
Follow the “Rule of Three” 15
Are Your Typefaces Doing 16
Their Jobs?
The Art of
Selecting a Typeface 18
Stick with What Your Learners 19
Already Know
Pay Attention to Size 28
What’s the Perfect Size for 29
your Type?
Throw Your Weight Around 30
Set Leading to Control 32
Scanning
Apply a Good (Medium) 34
Line Length
5 Tried-and-True
Typography Tips 36
Create a Visual Hierarchy 37
Left Align Your Text 39
Take the Guesswork out 40
of Design with a Grid
Use Your Best Judgment 41
Familiarize Yourself with Serif 19
and Sans Serif
Pay Attention to the 21
Little Details

When it comes to your online courses, can you think of anything more
important than your learner’s attention? When you have it, you can
teach any topic under the sun. But when you lose it, well, you don’t have a
learner anymore.
You’ve probably heard that the key to getting—and keeping—a learner’s
attention is the engaging, meaningful, and utterly fascinating content in
your courses. This is very true. But you might be missing an important
piece of the puzzle. The way you present that content also makes a big
difference.
Enter typography—a valuable e-learning tool.
4

Typography is really just a fancy term that describes how we make our
words look good. Good typography captures your learner’s attention
and makes them want to read all your awesome content. Bad typography
makes them suddenly remember that they forgot to check Facebook or
their favorite news site this morning—and that they need to go do that
right now.
The truth is, while it’s highly unlikely your learners will ever notice
your awesome fonts and great spacing, they probably won’t get past your
welcome message if you don’t pay attention to these details. Typography
is one way you can create an inviting learning experience for
your learners.
If you’re publishing an online course next week and just realized you
don’t know a thing about typography, don’t panic. You don’t need to
be a font geek or professional typographer to get learners to read your
content. While mastering typography is indeed an art, it’s easy to learn
the basics, such as how to use different fonts and styles to highlight
important text. And these seemingly little things can have a surprisingly
big impact on your course’s success.
So let’s go ahead and get started. You’ll learn why typography matters
and how to:
• Select the right typefaces for your projects
• Use typography to set the right mood for your learners
• Properly size and set your type
• Make your content legible, readable, and engaging
• Help your learners navigate your courses
5

There’s a poster that reads, “Good typography is invisible. Bad
typography is everywhere.”
This rings true. If you’ve ever spent time on a website with fantastic
typography, chances are you didn’t notice it. You might have found the
site easy to read and might have lingered there a bit longer than you’d
planned, but you probably didn’t go home and marvel about the amazing
typography to your family.
Now consider this: What if that same site had truly awful typography?
It would have stuck out like a sore thumb. How long could you tolerate
a long article written in tiny font with chunks of text in all caps? Or a
funeral announcement in a comic book font? Such typographic sins might
have inspired you to instant message the link to your coworkers.
7

Before you even read the words on a page, you subconsciously notice the
way they’re displayed. Different styles evoke different tones, moods, and
emotions and alter the way you feel about the messages you’re reading.
When done well, typography can make the whole process of
understanding and comprehending information seem effortless. It can
keep people focused on your content, rather than on the effort it takes to
read it. And, most importantly, it can help your learners learn.
If you study how humans read on the web, you’ll see that people learn
more when they’re given well-organized, scannable, and concise content.
It’s a fact that’s supported by human memory and message design
studies, and it makes a lot of sense. After all, most people would prefer
clear, legible, and well-organized content over a bunch of gobbledy-gook
on a page.
8

Put a Face to Your Type
First impressions are lasting impressions. You wouldn’t wear a ratty old
tank top to a job interview, so why dress your online course in a typeface
that’s not right for your course’s material? Your typefaces and fonts are
your first chance to make a good impression, so it’s important to get
them right.
The first thing you need to know about typefaces and fonts is that they’re
sort of like your crazy, wonderful, and quirky family. They all have unique
personalities that set them apart from the pack.
Let’s take a look at how this works. This quick Articulate demo shows
how different fonts match different images. Your job is to match the font
to the picture. There are no right or wrong answers here. Just take a look
at the images and assign a specific font to each of them. You’ll see how
fonts can set the stage for your messages.
9

A study in The New York Times demonstrated that typeface had a big
impact on credibility. About 45,000 people looked at identical words in
six different typefaces and rated how convincing the words were to them.
Despite the fact that the words are true regardless of the typeface, people
were more likely to believe them when they were written in subtle and
serious typefaces such as Georgia but took them far less seriously when
displayed in a typeface such as Comic Sans.
The moral of the story? Your typefaces reflect your personality type,
mood, attitude, and even your credibility. So it’s important to take care
when choosing them.
10

Set the Mood with a Good Typeface
You’ll probably never hear anyone say, “Next Valentine’s Day, let’s crack
open a bottle of wine and look at some great typography.” But typography
does help set the mood. Before learners even read a word or click a link,
your typefaces influence the way they feel as they explore your course.
It’s safe to say that a typeface doesn’t really have the power to move
people to tears or convince your learners that they should quit their jobs
and join the Peace Corps. But typography goes far beyond merely telling
a story—it shows learners what they can expect to get out of your course
and convinces them that your course is indeed worth their time.
So when selecting a typeface, a good rule of thumb is to choose one that
matches your learners’ expectations.
Let’s say you’re creating a course on financial security. You’ll probably
want your typeface to convey a sense of security and protection. In other
words, you don’t want to use a fun, silly font such as Taco Modern. For
serious content, a formal, traditional typeface such as Georgia is a far
better choice.
11

Here are some helpful tips. When you’re browsing through different
typefaces, ask yourself two important questions:
• What are you trying to teach your learners?
Something serious? Something fun?
• How do you want your learners to feel when they’re on your
course site?
Excited? Studious? Relaxed? There’s a font for all those things!
Then look closely at each individual typeface and ask yourself the most
important question: Does this typeface accomplish your goals? If it
doesn’t, don’t sweat it. You have countless others from which to choose.
12

It’s a good idea to find several different typefaces that work well for the
mood and tone you’d like to create. Because once you do, you’ll need to
consider a few general guidelines to narrow down that list to the perfect
typefaces for your course.
Is Your Typeface Easy to Read?
First and foremost, consider legibility and readability. If your text is
hard to read, whether it’s because of tiny fonts or an overcrowded line of
words, your learners will just skip it. This might sound harsh, but it’s true.
And you won’t get a second chance to win them back.
The good news is that if you simply select a typeface that’s legible, odds
are good that your learners will stick around. So before we get into the
nitty gritty of what makes one typeface better than another, make a pact
with yourself right now. If a typeface makes your text hard to read, you’ll
get rid of it. No questions asked. Just part ways as quickly as possible.
13

The Difference Between Typeface
and Font
Now, when we talk about typeface, we’re not talking about font (although
many of the same rules apply to both elements). While the two terms are
often used interchangeably, they’re not the same.
A typeface, also known as a font family, is a group of characters (including
letters, numbers, and punctuation) that share a common design or style.
Arial is one example of a typeface.
A font is a collection of characters that includes letters, numbers, and
symbols of one variation of a typeface (such as Arial Bold or Arial Italic).
It’s the mechanism that allows you to display a typeface’s characters on
your screen. A typeface can be made up of several fonts that share similar
design characteristics.
14

Think of three sisters in a family. While they may all look alike, they
likely have different heights, weights, and features. It’s the same with
three fonts within a typeface—they share the same general design and
characteristics, but they’re each unique in their own way.
Follow the “Rule of Three”
There are thousands of typefaces out there—and even more fonts within
them. To keep things simple, follow the “Rule of Three,” which states you
shouldn’t use more than three typefaces in one project.
If you mix and match too many typefaces, you’ll over-complicate your
design and make your text harder to read. If you use only one, no matter
how spectacular it might be, your learners won’t get the visual cues they
need to figure out which content is most important. And they’ll probably
get bored seeing the same typeface over and over again.
Think of typefaces like graphic road signs; a few, well-placed signs will
help the reader navigate through the content. But too many can distract
and confuse. When in doubt, you should always choose simplicity.
Of course, now that you understand the difference between typeface and
font, you know that there are multiple fonts within a typeface. So even if
you limit yourself to just three typefaces, you’ll still find a wide variety of
fonts within those typefaces.
15

Are Your Typefaces Doing Their Jobs?
We’ve determined that three typefaces is the magic number for online
courses, which generally have similar layouts. While your font styles
might vary based on your course context, you’ll still use them to do the
same basic things.
Your next step is to get a good grip on your key design elements—then
make sure you use them consistently. For most e-learning projects, you’ll
want to include:
• A typeface you can use primarily for headings, such as titles,
subtitles, callouts, and inline headings.
It should be your boldest typeface, since headings set the stage for the
rest of your content.
• A typeface you can use as your main body font.
Make sure it’s a super-legible one, since it will represent the meaty part
of your course.
• A typeface you can reserve for decorative text, such as pull
quotes or tips.
This one should do a good job of getting attention.
When selecting your typefaces, consider typefaces that were specifically
designed for the purpose for which you’re using them (display fonts for
headlines, body copy typefaces for body copy, and so on). If a font was
designed for display purposes, such as headlines or advertisements, it
probably isn’t the best choice for body text or any other large chunk of
text. Similarly, if a typeface was designed for body text, it won’t be as
impactful when it’s blown up to poster size.
16

Once you’ve decided which typefaces you’ll use for headers, body text,
and the like, you can differentiate various pieces of your content by
creating a uniform hierarchy of text sizes throughout your course.
For example, all your headings should have the same size, spacing,
and weight.
17

Choosing a typeface can be pretty tricky. If you’re daunted by all the
typefaces and details surrounding related fonts, don’t worry. You don’t
need to know all the ins and outs of typeface sub-classifications to create
visually appealing courses. So if you hear words such as “modern,”
“transitional,” and “old style,” disregard them. Keep it simple and focus
on your end goal, which is creating legible text.
Stick with What Your Learners
Already Know
Sure, it might be tempting to create new fonts or play around with all
those cool, ornamental typefaces. But, when it comes to fonts, novelty
may come at the cost of your learners’ comprehension. It’s okay to be a
little predictable and choose typefaces with conventional letterforms
that are clear, legible, and familiar to most people.
Familiarize Yourself with Serif and
Sans Serif
When you open the font list in your e-learning software, you’ll probably
see a lot of choices. But when you look closely, you’ll notice all the fonts
fall into two major typeface categories: serif and sans serif. Once you
understand these two categories, it’ll be easy to spot the differences —
and know why they matter.
19

Look at the capital T’s in Times and Tahoma. Notice how they’re
different in the graphic below.
A good way to understand the difference is to think of serifs as the arms
and feet that extend down and out on the letters of serif typefaces. Sans
serif typefaces don’t have these arms and feet.
Within these two categories, typefaces have many different features:
how wide the rounded parts of letters such as “d” and “p” are, how high
lowercase letters such as “c” are compared to the height of taller letters
such as “t,” how close the letters are to one another, and so on.
Even at the same point size, different typefaces take up different amounts
of space on your screen, so they impact your learners’ reading speed and
comprehension in a big way.
Both serif and sans serif typefaces are familiar to most people, but sans
serif is typically the preferred font for the web. In fact, researchers who
20

work with low-vision readers usually recommend sans serif typefaces for
both online and print publications.
While a number of typefaces could work for your project, it’s a safe bet to
choose a highly legible sans serif font.
Designers have argued for years about whether serif or sans serif
typefaces are more legible onscreen, but the jury is out on this topic.
So go with whatever typeface feels most appropriate for your project.
Assuming you’ve set your text to a readable size, it won’t matter whether
it has serifs or not.
If you find yourself on the fence about which typefaces to use, check out
the site typetester.org. It lets you compare different ones and see how
they look together before you commit to them.
Pay Attention to the Little Details
There are a lot of little ingredients in the recipe for a good typeface.
Your seemingly small decisions on height, spacing, stroke, tracking,
and kerning play a big role in what your typefaces communicate to your
learners. Ultimately, these are the things that make your content legible
and readable.
So take a few minutes to digest these important tips that can make your
type more appealing to your audience:
21

Go Large with Your X-Height
X-height is the measurement of the height of the lowercase x in a font.
It’s important because larger x-heights translate to more legible text.
Not convinced? Compare the two font faces in this image. Even though
they’re both set at the same size, the Arial font looks bigger because of
its x-height.
When selecting two or more typefaces to work together, choose ones that
have a similar x-height. When the proportions are similar, they’ll work
nicely as a pair to deliver your messages.
22

Open Up Your Apertures
Counterform (the open space between your letters) helps learners
recognize words. If you choose a font size that is too big or too small, you
might end up smashing or expanding the counterforms. This makes it
harder for your learners to read your text.
If you’ve ever tried to read a bad photocopy of text, you’ve already
experienced this first-hand. If the copy is too dark, the open spaces are
filled in and the text is really hard to read.
Legible typefaces have open apertures. That’s the opening in letters such
as C, A, and E. You’ll want to use typefaces such as Verdana that use open
aperture, which creates more visual space.
23

Choose Strokes That Are “Just Right”
Legible typefaces also have generous strokes—but not too generous. If
your strokes are too thin, they’ll get lost. If they’re too thick, you’ll lose
space in the letters. Like Goldilocks’ perfect porridge, they should be
“just right.” So try playing around with several different fonts, comparing
the differences in stroke thickness and how it impacts legibility.
24

Be Generous with Your Spacing
When you pack too many words into a tight space, you make it difficult
for your learners to recognize letterforms and sentence structures. Their
eyes have to work overtime to fill in the visual gaps between the shapes in
all those words, and that makes them read your content more slowly.
Fortunately, there’s a quick fix for this problem: Be generous with your
spacing and your learners’ eyes will be able to move as quickly as their
brains allow.
25

Check Your Fonts for Kerning and Tracking
Kerning is the spacing between pairs of letters. You can use it to add
or subtract space between your characters to create a more visually
appealing layout. Kerning is automatically set in most fonts but you can
adjust it if you need to.
26

Tracking (or letter-spacing) refers to the amount of space between a
group of letters or large chunks of text. You can use tracking to change the
overall appearance and readability of the text, making it either more open
and airy or more dense.
While automatic settings usually work well for both kerning and tracking,
you might want to adjust them to change the tone of your course. Tight
spacing can make it harder to read and can create an association of
fast talking, whereas wider spacing increases legibility and creates an
association of a more objective voice. So if you need a subtle way to
change your tone, try adjusting these settings.
If it seems like we’re talking a lot about spacing, there’s a good reason
for that. It’s because good spacing makes life easier for your learners,
especially when you’re feeding them dozens of pages of meaty content.
Check out these 5 recommended font combinations from Google Web
Fonts. Google does a nice job of showing how much of a difference good
spacing makes when you’re working with long blocks of text.
27

When it comes to fonts, size really matters. That’s because too-small
fonts can be hard to read, especially for older people or people who aren’t
used to reading online. And too-large fonts can make even the most
sophisticated course look like a kid’s book.
This can be a problem, because if your text is too big or too small, or if
the spacing is too wide or too narrow, your learners probably won’t read
it. That’s why, in general, it’s a good idea to keep your font sizes within a
normal range. Of course, you might come across a few exceptions to this
rule as you create your course. For instance, in some cases, you might
want to use extreme text sizes to emphasize small snippets of text. When
in doubt, ask someone else to eyeball it and tell you if it’s legible to them.
What’s the Perfect Size for Your Type?
So how big should your type be? Let’s start with the easy part—body text.
Most designers set their body text at 12-point or higher. Go a little bigger
(16-point) if you really want to make sure people can easily read it.
29

There are a few things to consider when sizing your type. An older
audience will likely prefer larger fonts due to deteriorating eyesight that
often comes with age. And it should be noted that two different fonts
at the same font size don’t necessarily appear the same size. A font will
appear smaller if it has a smaller x-height, so take this into account when
choosing a size, too.
For headings, things get a little more complicated, because it really
depends on your project. For the most part you’ll want to choose a
heading size that’s larger than your body text, but other than that it’s best
to play around with sizes until you find the one that’s right for your needs.
It should be large enough to draw attention to the heading but not so big
that it becomes a distraction.
Some designers say it’s best to stick to 14- to 24-point sizes for headings.
You’ll want to use your best judgment, but generally anything larger than
that might make your text look large and clunky.
Throw Your Weight Around
Fonts come in different weights as well as different styles. Just like your
current weight dictates how well your jeans fit, your type weight dictates
how much of a visual impact your words have.
Book and Roman weights work best for body text and other large chunks
of text, while bolder weights fit fantastically with things like headers and
text that needs a bit of a spotlight.
30

When you use bolder weights, it helps to think of using boldface as
shouting. You can quickly call attention to certain content with a bolded
word or two, but if you use too much you might give your learners
a headache.
If boldface is shouting, a light typeface is a raised voice. A light typeface
works well for body text when it’s typeset a little larger than normal.
But we recommend using it carefully. Because these thinner strokes can
make your content harder to read, they’re not ideal for long blocks
of content.
31

Set Leading to Control Scanning
Leading (also known as line height) is the amount of space between your
lines of text. While it’s a relatively small detail, leading controls the way
your learners scan your content.
Because people scan text both horizontally and vertically, if the line
height is too tight, they might find themselves scanning down the text—
even if they didn’t intend to. On the other hand, if the line height is too
loose, the lines of text appear disconnected, which makes it hard to
scan vertically. Yikes, so many details! If you’re feeling like Goldilocks
searching for her perfect porridge, there are a few things you can do to get
it right.
For starters, you can make your type more readable just by increasing
your leading a little above the browser default (which also allows more
space for subscript and superscript characters). See the difference
between the three paragraphs below.
32

In the example above, the third paragraph has an increased leading,
giving the text a bit more room to breathe and making it a little easier on
the eyes. Just be careful—if you make the line height too high, like in the
second paragraph, you’ll run the risk of making your text even harder to read.
In general, we recommend making sure your leading is higher than your
text size. When working with single-spaced text, you might assume that
text set at 12pt would require leading of 12pt, but that’s not always the
case. Set the leading at least three pixels higher than your text size to
prevent ascenders and descenders from crashing into each other.
Some designers like to set leading even higher (at 150% of their text size).
To find your ideal size, play around with your settings. Your goal is to
make your text super-easy to read, so just eyeball what works.
33

Hint: If you want to sound like a design connoisseur when talking shop
with your co-workers, be sure to pronounce leading to rhyme with
“heading,” not “needing.”
Apply a Good (Medium) Line Length
Learners often skip over too-long or too-short lines of text because
they’re just too hard to read. And who could blame them? When text isn’t
laid out properly, it can be difficult to read and comprehend.
If you hold up a two-column handout next to a single-column handout,
you’ll clearly see why line length is so important. Even if both handouts
have the exact same content, the shorter line lengths are much more
appealing, simply because they’re easier for our brains and eyes to
process.
34

It can be tricky to find the right line length for your text, but the good
news is that a medium line length works well most of the time. We
typically suggest setting your line length to medium (60 to 80 characters,
including spaces and punctuation). It’s also a good idea to set your text
to be fluid so it adjusts and wraps as people resize their windows or play
around with their table settings.
While each of these little things makes subtle differences in how your
words appear, you won’t break your design if you miss a few of them. The
most important thing with choosing typefaces, fonts, and measurements
is to make sure your learners can easily decipher your letters.
There’s a trick that designer Jessica Hische recommends to make sure
you’ve picked good typefaces—the Il1 test. Type a capital I, a lowercase
L(l), and a number 1 next to each other. If you can’t easily see the
difference between these characters, it’s a red flag that your typeface
might not be easy to read.
35

Create a Visual Hierarchy
When designing e-learning, it’s helpful to define your course’s basic
structure before you start thinking about content. You’ll clarify which
parts of your course are most important and start building a visual
hierarchy for your content.
A visual hierarchy tells people where to look and which pieces of content
in your course are most important. It also gives learners a sense of how to
actually read through your course material with visual cues and flow.
Typography is one of the most helpful tools when it comes to identifying
hierarchy and structure. It lets you look at each piece of your content
and visually prioritize it. For example, if you want readers to look at your
welcome message first, you can give it a big, bold headline and a unique
font. Or you can use more subtle visual cues for things such as body copy
or figure captions.
Earlier we talked about selecting three typefaces—one for headings, one
for your main body text, and one for things such as pull quotes. When
thinking about your visual hierarchy, think of your headings as your
primary-level content. It’s the stuff that will draw in your learners and get
them to look at your secondary-level content. Consider using elements
such as strong colors and dominant typefaces to really make this pop.
Your decorative content, such as pull quotes and hot tips, is your
secondary-level content. You can use it to pull out the juicy bits that
support your main body text. To make this content more appealing, try to
use elements that make it scannable and draw in your learners.
37

Finally, your main body text is your tertiary-level content. It’s usually the
least prominent text on your pages. That’s because, when your primary
and secondary content are doing what they’re supposed to do, your
learners will be curious to read this text without any extra prodding from
you.
Here are a few visual elements you can use to support your visual
hierarchy:
• Size:
People will almost always read larger text before smaller text. Just be
careful not to use too many different sizes on a page or you’ll end up
with a messy layout and some very confused learners.
• Color:
To grab your audience’s attention quickly, use a strong color to
emphasize content. And choose colors that go well with your content.
A course on teaching might use bold primary colors, but one on
security might use gray and blue. Learners associate colors with
certain topics and feelings, so make conscious decisions about what
colors you choose.
• Contrast:
You can easily highlight important text if you contrast darker objects
with lighter objects. For example, you can draw attention to important
words and phrases by bolding them. Or you can use a heavier font on a
section of content to signal the reader to look there first.
38

Left Align Your Text
Want to know the secret to making your course design appear more
organized? It’s alignment. How you align your text has a major impact on
how people will read and perceive it.
There are four common ways to align your text: flush left, flush right,
justified, and center aligned. Flush left is the alignment that’s used most
frequently in online courses. When you use this alignment, your left
margin is even and predictable and your right margin is irregular.
Flush left alignment is a good choice for most e-learning projects. It
creates consistent word spaces so that there are no big holes inside the
lines of text. This makes it easy for readers to scan and read your content.
39

You might want to consider using some of the other alignments in special
cases. For example, while you never want to use flush right alignment
when you’re working with chunks of text, it can be useful for sidebars,
captions, or other small bits of text. And center alignment works well for
titles, pull quotes, and other snippets of information. However, you’ll
want to avoid using it for long chunks of text because it’s not very easy on
the eyes.
Take the Guesswork out of Design
with a Grid
Before you start working on your project, we recommend sketching it out
on paper to get a clear idea of how you want it to look. Once you decide on
a particular layout, a grid can help you execute your ideas.
A grid is a simple way to organize your content on a page, using any
combination of margins, guides, rows, and columns. You can use your
grid to define rules for the width of margins and columns, the space
between items, the size of your images, and your text alignment.
One grid, or a collection of grids, can be used across an entire project
to achieve a consistent look and feel. In a finished product your grid is
invisible, but it helps you develop a solid course layout.
For more information check TheGridSystem.org.
40

So there you have it! We’ve gone through the basic guidelines and best
practices for good typography. Now that you’ve learned the ins and outs
of what makes your content more legible, easier to read, and pleasing to
your learners, we’re confident you’ll find that good typography will come
to you naturally.
This e-book focuses on how your typography decisions can make or break
the visual design and tone of your course. If you’d like to learn about
additional e-learning elements and tactics you can use to improve your
visual and instructional design, be sure to visit E-Learning Heroes, our
community site of more than 200,000 e-learning developers. You’ll find
great articles, discussions, downloads, and other resources to help you
build beautiful, effective, and engaging e-learning.
And if you enjoyed this e-book, please feel free to link to it from your own
site and share the link on your social networks.
Helô Kinder (pronounced: [eˈlo]) is an instructional designer/web developer at UC Davis in
Davis, CA. She enjoys all things typography and applies elements of typography to her projects
to create a pleasant user experience. Helô is an avid zentangler and graphic artist in her spare
time. She lives with her husband and two teenage children, and often she can be spotted walking
around town with her dog, Guido. Connect with her on Twitter at @helo_kinder, on Facebook
at www.facebook.com/heloisa.kinder, LinkedIn at https://www.linkedin.com/pub/heloisakinder/2/267/a96
and on Instagram at https://instagram.com/helokinder/.
Copyright © 2015 Articulate Global, Inc.
All rights reserved.
www.articulate.com
42