How to Use Typography to Im

Table of Contents

Introduction 3 Pay Attention to Size 28

What’s the Perfect Size for 29 Typography Matters 6 your Type? Put a Face to Your Type 9 Throw Your Weight Around 30 Set the Mood with a Good 11 Set Leading to Control 32 Typeface Scanning Is Your Typeface Easy to Read? 13 Apply a Good (Medium) 34 Line Length The Difference Between 14 Typeface and Font 5 Tried-and-True Follow the “Rule of Three” 15 Typography Tips 36

Are Your Typefaces Doing 16 Create a Visual Hierarchy 37 Their Jobs? Left Align Your Text 39 The Art of Take the Guesswork out 40 Selecting a Typeface 18 of Design with a Grid Stick with What Your Learners 19 Already Know 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.

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.

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.

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.

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/heloisa- kinder/2/267/a96 and on Instagram at https://instagram.com/helokinder/.