With thousands of fonts to choose from, selecting the right ones for your e-learning project can be a big decision. If you’re not bound by corporate fonts and style guide rules, you might be tempted to get creative and use some really unique fonts in your design.
And once you’ve selected your fonts, you still have to choose your formatting options—like what color to use and whether to make it bold or underline it.
That’s a lot of decisions! And given that the way your text looks can literally make or break your learners’ ability to absorb your content, all of these decisions are super-important. So how do you ensure you’re making the right call?
In this article, we’ll go over some important questions to ask yourself during the design process to make sure your text looks great and enhances readability for your learners.
1. Are my fonts easy to read?
Obviously, this is the most important question to ask. After all, if learners have a difficult time reading the on-screen text, it will hamper their ability to understand the content.
When you're considering a font, try typing out a few sentences to see whether the text is clear and easy to read. Favor fonts with clear block letters that are easy to scene over fancy cursive fonts that are difficult to read.
Take a look at this example to see the impact a font style can have on readability.
2. Is my text big enough?
When you have a lot of text content, it’s tempting to reduce the font size to squeeze it all on one slide. But the smaller the text, the harder it is to read. You don’t want your learners to strain their eyes when taking your course.
So how small is too small? Most web designers agree that anything under 12 points (16 pixels) is pushing it. And ideally, it's good to shoot for size 16 (21 pixels). If that surprises you, take a look at the example below.
The example on the left has a title that’s size 14 and body text that’s size 12. The one on the right has a title that’s size 40 and body text that’s size 18.
Which one’s easier to read?
If you’re used to making e-learning courses with font sizes as small as 9 or 10, you may find it difficult to switch to size 16+, but once you do, you’ll notice how much easier it is to read the text.
Using a larger font size makes your courses easier to read for everyone—including low-vision learners.
3. Does the color of my text stand out enough from the background?
Another thing to consider is whether the color of your text stands out enough from the background. If the font color and the background don’t have a high enough contrast, it can make your text hard to read. Take a look at this example to see for yourself:
Do you see how much harder it is to read the text on the left than it is to read the text on the right? The only difference is the color of the text.
If you’re unsure about the contrast of your text against the background color, try using a color contrast analyzer app (like this one) to pinpoint the level of contrast and decide if it’s high enough.
According to WCAG standards, the contrast between the text color and the background color must be at least 4.5:1 for small text* and 3:1 for large text**. That being said, it’s best to shoot for a 7:1 contrast for small text and 4.5:1 contrast for larger text. That way you’ll meet the enhanced WCAG criteria and ensure that the vast majority of your learners can read it without needing to use contrast-enhancing technology.
4. Does the formatting make my text hard to read?
If you’re looking for a way to make text stand out, you may be tempted to put it in italics or underline it, for example. And you might think that visually your text looks better centered or justified. But did you know that could actually make it harder to read?
Take a look at the examples below:
Do you see the difference text formatting can make when it comes to legibility? Let’s unpack these text-formatting choices a little further:
- Underlining text. In addition to being hard to read, underlined text can confuse learners.That’s because underlined text usually indicates a clickable hyperlink. So unless the text is a link, it’s best to skip underlining it.
- Italicizing text. Italicized text is harder to read because the letters have jagged, not straight, lines. Instead of using italics, try putting your text in bold. Bolding text draws attention to your text without reducing its readability.
- Aligning text. Centered text is harder to read because the starting place of each line is different, requiring greater effort whenever learners skip to the next line. Justified text may look nice—because the left and right sides match up—but it’s also harder to read, since the spacing between words is uneven. For these reasons, it’s best to stick to left-aligned text.
5. Are my font choices appropriate for the topic?
When choosing font styles for your course, make sure you consider both your audience and the subject matter of the course you’re building. A playful handwritten font might work well for content that is casual in tone, but not so much in a course on a more serious topic.
Can you imagine a nursing course using the fonts on the left in the image below?
The whimsical font feels totally out of step with the subject matter. The fonts on the right have a serious vibe that is more aligned with the topic of nursing.
6. Do my fonts complement each other?
It’s important to choose fonts that work well together. There’s no definitive way to mix and match fonts. It’s often about trying different combos until you find one that looks good. One tip for ensuring your fonts balance each other out is to pick a thicker font for headings and a sleek, simple font for body text.
In the image below, you’ll notice the image on the left uses two chunky fonts, making it difficult to discern the heading from the body text.
It’s a good idea to look at the fonts you’re using and consider whether they balance each other out. Do your headings stand out? This is important because you want the headings to grab the learners’ attention.
7. Am I using too many fonts?
It’s best practice to stick to a maximum of two to three fonts throughout your course. This allows you to choose a heading font, a body font, and perhaps a third font for things like quotes or captions.
Using two or three fonts throughout your entire course keeps things clean and consistent. If you use more than that, you’ll veer toward disorganized and chaotic.
Take a look at this example:
And now look at this one:
See how much more cohesive the second example looks? Instead of using four different fonts, it only uses two: one for the headings and one for the rest.
8. Do my fonts work in multiple languages?
If you’re going to translate or localize content, this is an important consideration. Some fonts don’t have the characters and symbols needed to display text in other languages. If you’re going to translate your courses, consider this up front when making your font selection, and test the fonts to make sure all the symbols and characters you need are available.
For example, some fonts don’t have the “ç” character that’s used in French. If that’s the case, they’ll often sub in that same character but in another font, as shown below:
And that’s actually the best-case scenario! Sometimes they’ll simply replace the character with another letter or a symbol, like � or □.
So, you can see why this may be less than ideal! That’s why it’s important to ensure the fonts you choose support all the special characters needed for the languages you plan to localize your course into. Thankfully, most fonts specify the languages they work for in the description, so it’s fairly easy to check.
Wrap-Up
Next time you’re faced with the decision on which fonts to use for your course or how to format the text, ask yourself these eight questions. Doing so will go a long way toward helping you deliver a clean, streamlined course that’s easy to read.
For more tips, check out these articles:
Follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.
*small text: smaller than 14 bold or 18 regular
**large text: larger than 14 bold or 18 regular
Published 6 years ago
Version 1.0
