Here we look at how good use of fonts can improve learner experience and, in turn, bring better elearning results.
How to work with fonts in your elearning materials
Typefaces are like people – they have faces and families, personas and functions. They also have voices. Think of a well-designed website where you can read the information clearly, versus a page with very small fonts where you have to squint and hunch over the screen to read, or one with undecipherable fonts.
The application of type in any written material is of vast importance as it carries the information we want to access or learn, and any mistreatment of type will be an obstacle in the way.
The terms typeface and font are commonly used interchangeably, even though they mean different things.
A typeface is the type family such as “Arial” or “AvantGarde”, while a font is what you actually use on your computer, the different variations and weights (italic, bold, narrow, wide, black etc…), which are used to draw attention through differentiation and emphasise certain ideas.
Classification
There are two main factors for typeface classification – formal such as Scripts and Decorative, and historical such as Old style and Transitional. However, for the purposes of our topic, we will stick to these main 4 categories:
- Serif: These fonts have flairs coming off the end of the letters’ terminals, stems etc… They’re more formal and traditional in appearance, and initially designed for printed medias. Examples are Times New Roman, Georgia and Baskerville Old Face.
Personality: Serif fonts have a serious and refined look, evoke a classical and timeless feeling, and they’re formal, traditional, stable, reliable and respectable. - Sans-Serif: This category of fonts lacks the presence of many serifs. They have a more modern look and are best suited for screen use. Examples include Arial, Helvetica and Verdana.
Personality: They have a modern feel to them because of their clean lines and simplicity. They’re neutral and universal, sensible and straightforward. - Script: These fonts usually represent handwriting. Some of them are more elegant than others. However, it’s a poor choice for body text. If needed, only use it sparingly to emphasise ideas. Some examples include Comic Sans and Vivaldi.
Personality: Script fonts have a variety of moods related to them. Because of their hand-written nature, they feel more personal, fancy and elegant. Sometimes they are seen as more feminine, romantic and pretty. - Decorative: These are the fonts that don’t fit into the other categories. Traditionally they’re used for signage designs. Decorative fonts are informal and diverse, and can be used as headlines, but not with large blocks of text. Some examples are Inline, Grunge and Stencil.
Personality: Decorative fonts have the widest variety of moods, but overall they’re characterised with being casual, unique, high spirited and embellished.
For good font combinations and pairing you can visit https://www.creativebloq.com/typography/20-perfect-type-pairings-3132120 and keep in mind that not all of them are good candidates for elearning materials.
Hierarchy
Hierarchy refers to the arrangement of the information in each slide in a way that is easy for learners to identify the more important from the least important. This can be achieved with the use of font, size, spacing and contrast.
Font size
Fonts vary in their readability, so it is difficult to recommend a specific number. For example: a 12-pt Arial is different than Calibri, and the difference can be more drastic in other cases.
With this in mind, the standard size for body text is 12 pts and no less than 10 pts for screen viewing, and between 14 to 16 pts for tablets and phones. So it is important to know first-hand the devices that will be used most commonly to view your course.
For screens, it is recommended to use sans-serif fonts such as Arial or Verdana, as they are more readable – especially for lower resolution screens – while serif fonts can be used for headings to create some character and contrast.
Spacing
Spacing can make the learner experience more pleasant if done properly. A good line spacing and separation between paragraphs will make text blocks look like graphical elements, rather than a dense “brick”. The recommended distance between lines is between 1.15-1.5.
It is also recommended to have around 75 characters in a line, since long lines will make the eye struggle to catch the beginning of the next line, and short lines will make the eye bounce quickly from line to line – both cases are uncomfortable to the eyes.
It’s also good practice to align the text to the left and avoid centred text, as the eyes are drawn to the top left side of the screen for important information, and moves downward in a similar fashion line by line.
Contrast
Contrast acts as a guide to your readers as they navigate through the materials. This can be achieved with the appropriate use of visual design, such as the placement of specific types of information in boxes, breaking your text into appropriately spaced paragraphs, and the variation of text size, weight and colour to emphasise hierarchy.
Make sure to utilise white space by making the body text occupy about 25-40% of the page. Use good separation between the text and graphical elements so that the slide doesn’t feel too crowded.
Emphasis
Emphasis is when you want to point your reader’s attention to a certain word or idea, either within the body text or your hierarchy, which can be useful. However, excessive use of it might confuse and misguide your learner.
Try to avoid underlines, bold text, italics and all caps in body text. Underlines usually signify hyperlinks, and try to keep the use of bold text for titles and headings in general. Italics can be used to point out specific terms, and avoid all caps as it is perceived as shouting.
For body text, aim for colours that contrast well and don’t irritate the eyes. The best option is black text on white background. Try to avoid uncomfortable combinations such as red on grey or yellow on white etc…
In any case, remember that black on white has been shown to be the most legible combination.
Legibility
Legibility is the ability to distinguish one letter from another within a typeface. This is a very important point to keep in mind as it is easy to get carried away with the choice of fonts to express your creative nature at the expense of readability – always opt for legibility!
The recommended typefaces for elearning use are sans-serif fonts such as Verdana, Arial and Calibri. Some serif typefaces can be used for body text such as Georgia and Times New Roman. However, they are better suited to be used as titles.
A good practice is to check how the font compresses and displays on the final platform of your course. Some fonts transfer better than others. It’s a good idea to go through this first to avoid later disappointment.
Consistency
This refers to making a system and committing to it. In terms of type, make sure to apply the same type family, colour, space, weight and size to the same conditions. Also, keep your typeface families to a minimum. If you have a typeface with wide weight variations you can build your course with only that set.
Or you can use one type for the titles and another for the body text, it could be a combination of serif and sans-serif, but not more than that as the text becomes cluttered and confusing. This is a general rule for all of your design elements, and you’d want to stick to a similar look and feel across all of your course.
eLearning examples
Let’s examine a few examples from elearning slides to see how paying attention to the simple rules mentioned earlier can make a great difference on the look and quality of the course.
The first example is by Permast from dribbble.com. It’s clear from the first glance that this is a well-designed slide, as the visual design language is consistent in the iconography, colours and graphical elements, the hierarchy of text is clear through the variation of size and weight of the font, and the use of one typeface while playing with weight and size made the look interesting, while keeping all the elements belonging to each other.
There’s a good separation between the graphical elements and the text, which made the slide breathe and feel spacious, and this is mainly caused by the good application of white space.
The second example is from anotherbrightidea.ca. There’s a lot of empty space in the slide, yet some areas feel crowded and compressed due to the attempt to cramp a lot of information in a small space. The hierarchy is not clear as the text in the button “Confirm” is bigger than the body text, as well as the check boxes. The body text seems to be the smallest of all, even though it’s the most important information on the page.
The line space between the choices is much bigger than in the question body text. Even though choice of typeface is not problematic, the application of capital versus small versus light makes things harder to figure out.
In the final example, I tried to make the same slide look good and bad. Let’s start with the bad version…
Even though the title is positioned in the top-left of the slide, its importance is compromised by its dimmed grey colour. Another factor is using uppercase for the subtitle. This threw off the balance of the hierarchy and the natural reading flow.
The hierarchy is also compromised in the names and positions, where the font choice and size combined with poor line spacing made everything equal in importance and too close to each other, so it’s even harder to read.
Finally, the choice of Comic Sans for the CEO quote is not a good one – it replaces the corporate business feel with a childish vibe, which is not the intention here.
In contrast with the previous example, this one below shows the fixed version of the slide with proper hierarchy. The title has a semi-bold font and a larger size than the subtitle, so it’s more prominent in size and position.
Similarly, in the names and positions of the staff there is proper line spacing, size and text weight highlighting the names more than the positions. And finally, the quote font is replaced by Myriad Pro to maintain the appropriate corporate feel and professionalism needed for this kind of information.
Typeface choice might seem like a small thing compared to the complicated process of creating and designing an elearning course. However, following these few rules can enhance the experience of your learner, produce better elearning results, and give your work a much more polished and professional look that for sure will be appreciated.
