Overview of typography for eLearning
Typography is, simply put, the arranging of text on a page or slide. When designing for online usage like e-learning, the principles are slightly different than for print design but beat all, good design is a sweet design. If the text on your website isn’t readable, you’ll not sell your product, and in e-learning, the learner may not comprehend the content, so in both cases, it is a fail. Let’s take a look at some of the type of basics you should know about to help you build better e-learning courses. There are two main sorts of fonts, serif, and Helvetica fonts. Serifs are the little tails on the letters. The type that has these little tails is called the serif type. Any type without serifs, sans meaning without in French, is Helvetica types. Notice that each one of the fonts on the left has little tails, albeit each font is extremely different, and therefore the fonts on the proper haven’t any tails because they’re sans serif. Here, you’ll see how serif and Helvetica type appears in paragraph form. The serif type on the left is easy to read in printed format, but most developers prefer sans serif type for online viewing. Serifs make the letters more distinctive and easier for our brains to recognize. They also subtly help connect the letters of the word, making it easier to read in printed format. When we are talking about online type, sans serif fonts are considered better for smaller text and low display monitors. New readers such as young children can read sans serif text more easily. Whichever you choose, make sure it’s readable.
Keep the important text in a larger size or bolder font. Don’t make the line spacing too tight. Test your courses on multiple computers and devices to make sure everyone can read them. Let’s go over some basic terms we use when we are working with type. The imaginary line that the type rests on is called the baseline. The descender is the part that goes below the line, and the ascender rises above the line. The stem is the part of the f that rests on the baseline. A quick word about letter spacing, or in this case, tracking. Be mindful of readability at all times. In this case, I think the bottom example is too tightly tracked for online learning, although it would be perfect for print design. Let’s take a look at some kerning examples. Like tracking, kerning deals with space between characters, but in this case, it’s referring to the space between two characters. Here are some common character combinations that have too much space between the letters. Capital A and capital W, capital A and capital V, capital LY, and a capital T with most lowercase letters. These are all common examples of character combinations that have too much space between them. Let me show you a little bit more about kerning. So here, I’m on Adobe Illustrator, and let’s take a look at how you can track and kern your text. I have a line of type. I’m going to triple-click to select it, and I’m going to use my keyboard shortcut. On a Mac, it’s Option + left arrow. On Windows, it’s the Alt + left arrow. See how the letter spacing is getting tighter? And if I use Option + right arrow, or on a Windows computer, Alt + right arrow, I can make the letter-spacing wider, and I can do the same thing if I’m in between two individual letters, so here I have a W. If I just simply click between the letters and use those same shortcuts, so Option + left arrow on a Mac, Alt + left arrow on Windows, see how I’m making the letter-spacing tighter, and I can do the same thing with the shortcut using the right arrow. So again, this top one is considered tracking, because it’s covering all of the characters, and the bottom one is kerning, because I’m just dealing with two individual characters. Leading or line spacing is another factor to consider when setting up your slides. Leading is that the space between the lines of type. If it’s too loose, it can be difficult for the learner to follow, and text that is too tight can also have readability issues. You need to strike the right balance. The example on the left is too loose in its line spacing. The one on the right is appropriate. Another thing to keep in mind when you lay out your copy is contrast. If your text is unreadable, you’ve failed, no matter how nice the slides look. These examples are low-contrast and hard to read. The top two examples are high-contrast, easier to read, and work well against the background. Don’t sacrifice readability for design. And finally, a word on hierarchy. Make sure the learner reads in the order you want them to read. Here, the headline is larger in both instances and even bolder in the one on the right. These treatments draw your attention there first. That’s what we want to guide the learner where you want them to go. A little extra space between thoughts is also a nice break. It gives the learner a moment to digest one thought before moving onto the next.