Basic typography for elearning design

Posted by Greten on 23 Nov 2019 under Tips

Typography is a significant factor in designing learning materials. Interactive modules, videos, and slide presentations typically have readable elements. If your lessons include a paper handout, or if you have hearing-impaired learners who need to rely on closed captions, the text is crucial to transmitting the lessons to the learners.

In deciding the right typography for your lessons, consider two factors: legibility and attention, the text must be easy to read and must retain the attention of learners. You would not want your lessons to cause eyestrain to your learners. Also, a text element in your slide should not try to draw attention away from another that is important to learning. For example, learners tend to ignore a textbox that contains important information because another textbox with a cutesy typeface immediately appears after it in the same slide.

Typeface

A typeface is a collection of characters with similar styles or designs. For example, Times New Roman refers to all alphanumeric characters and some symbols with curly tails at the tip. There are several kinds of typefaces; they usually fall under one of the three types.

Serif typeface

A serif typeface is a kind of typeface in which the characters have tails called serifs at the ends. The Times New Roman is a well-known example of a serif typeface. Other examples of serif typeface are Georgia and Liberation Serif.

On the left are the letters A, b, and C in a serif typeface. On the right are the same letters with the serifs or tails colored in blue.

The serif can be a short small line at each of the tips of a character. In some designs, they are curly and look like drops.

Sans serif typeface

A sans serif typeface is a typeface in which the characters do not have serifs. "Sans" is a French word that means "without". Hence, sans serif means without serif.

On the left are the letters A, b, and C in a serif typeface with the serifs or tails colored in blue.. On the right are the same letters with the serifs removed, turning them into sans serif characters.

The Arial is a popular example of a sans serif typeface. Other examples are Helvetica and Open Sans. Uppercase I and lowercase l are difficult to distinguish in sans serif fonts, so some fonts, like Verdana, will include serifs in uppercase I even though all of its other characters do not include serifs.

The main text of your learning materials, such as paragraphs, onscreen bulleted text, infoboxes, labels, and closed captions, should be in either serif or sans serif typefaces. These typefaces are much easier to read, human eyes are used to them, and more characters and symbols are available to them.

Script or cursive

Script or cursive are typefaces that mimic the cursive handwriting. Some examples of cursive fonts are Brush Script Std and Lucida Handwriting.

Two sets of Aa Bb CC written in two different cursive fonts: Brush Script Std and Lucida Handwriting

Some cursive typefaces can be used in the main text of your learning materials like serif and sans serif typefaces, while others should be treated as if they are design typefaces. However, you need to experiment on which one will work as the main text and which ones should be relegated to design. It can be an excellent effect if you want to animate the text as if it is being written on a chalkboard or paper.

Design typeface

Design typeface refers to a wide assortment of typefaces, mostly do not have anything in common with one another except that they are mainly designs or decorations. Use these fonts sparingly and only on bodies of text that do not convey important information that learners must absorb, such as unit, lesson, or slide numbers.

You can also use them on bodies of text that are part of the illustration. For example, you have a course on sales strategies, and on one of your slides, you have a picture of a fictional store. You want to make the store look stylish, so you use a fancy font to display its name. Since the name of the fictional store is not vital to learning, you can use a design typeface for it.

A cloud of several design typefaces spelling-out the name of each typeface.

Font

The term font is often confused with the word typeface. Sometimes, you will hear people referring to Arial or Times New Roman as a font. However, font really refers to the different variations within a typeface. For example, a 12 pt and a 72 pt Times New Romans are two different fonts. A bold Arial and an italic Arial are also two different fonts.

There are several different ways the fonts of a typeface may vary.

Font size

As its name implies, it refers to the specific size of a character. In most software applications, the font size has a unit of points (pt). There are 72 points per inch. Hence, the point is the same as pixels for standard web images where the resolution is 72 pixels per inch. The point is the measure of the height of the font, with the width of the letter varying proportionately to a given height.

Two letter As at different font size and height

In word processors, presentation software programs, typesetting applications, and elearning authoring tools, the font size is available in a drop-down menu, but you can also type it in. The number does not display any unit, which is implied to be the point.

Font weight

The term font weight refers to the thickness of the typeface. The most common font weights are regular, which is the default, and bold, which you can set by selecting the text and then clicking an icon or by pressing Ctrl B. Depending on the font and the application, other font weights include semi-bold, medium, light, and thin.

If you know how to code CSS, you can set the font weight as numbers from 100 to 900, with 100 being the thinnest and 900 the thickest. However, you are likely to see the difference only in Macintosh or Ios.

Font styles

Italics, underline, and strikethrough are among the different font styles. You can use italics and underline to emphasize keywords or key phrases in your learning materials, while you can use the strikethrough to imply that something is deleted. For example, you can show a character thinking of something to do and then decided not to do it. You can display the text of what they are thinking in a thought cloud, and then replace it with the same text in strikethrough font style.

bold | underline | strikethrough

Font position

There are three font positions: default, subscript, and superscript. The default is the position that you will use for almost all purposes. The superscript and subscripts are used to show mathematical equations and chemical formulae. Superscript is also sometimes used to denote references depending on your inhouse writing style.

Letter spacing

The space between characters in a text can be described as leading, tracking, or kerning.

Leading

Leading, also called line spacing, is the gap between adjacent lines within the same paragraph or item list.

Several applications allow you to adjust the leading of a text using the number text field, drop-down menu, or slider. In most applications, the number corresponds to the size of the font. For example, a line spacing of 1 is the standard line spacing for that given font size, a line spacing of 2 means double space, and a line spacing of 1.5 means the space between the lines is half of the height of the line. Meaning, if you have bigger fonts, the leading with the same number is going to be bigger.

A lorem ipsum text with three lines. The line spacing is labeled.

This is particularly jarring for Adobe Captivate because the numerical field that controls its leading has the unit pt or point following it, although line spacing does not reflect the entered number of points.

Tracking

If leading is the spacing between lines of text, tracking is the spacing of characters within a text. Since the characters have different sizes and shapes for a given font, tracking is the space between the leftmost part of a character and the rightmost part of the next adjacent character.

Showing here are the character spaces between letters A annd V and letters M and L.

Similar to leading, there is also a default tracking for a given font size. In several applications, you can change the tracking to make the letters more spaced-out or more compressed. A useful trick in typesetting is to reduce the tracking a little so that you can move an orphan word to the previous line, if your style guide calls for it, without the difference in tracking being noticeable to the naked eye of most people.

Kerning

Kerning is the adjustment of space between two adjacent characters that, due to the shape of these characters, looks like have larger space than usual if tracking is the sole measure of space between the characters. Look at the example below.

Same illustration of A V and M L as previous, except that here, the kerning is activated and A and V no longer have much space compare to M and L

A and V have the same tracking as M and L, but it looks like there's a larger space between A and V due to their shapes. If the kerning is enabled, the gap between A and V is closed.

Not many applications have controls for kerning. In those that have, kerning is switched on and off with a checkbox or a slider. In Articulate Storyline and Adobe Captivate, kerning is already on by default, and you cannot switch it off. In MS Office applications, you can turn-on kerning with a checkbox, and set it to apply to a specific font size.

Application of typography in elearning

Did you get feedback that the onscreen text in your elearning module is difficult to read? Or perhaps, a label in fancy font tends to catch the learners' attention away from the text with the information they need to learn? You can play typeface, font styles, and spacing to obtain what is optimal for learning. Ensure that you have consistent styles for the same kind of onscreen text: textbox, infobox, closed captions, and labels for diagrams. Text within illustrations that are not meant to be memorized can vary widely as long as they don't take attention away from more the important bodies of onscreen text.

Bibliography:

Last updated on 26 Jun 2020.

Share your thoughts

* Required. Your email will never be displayed in public.

Instructional design and educational technology for effective learning