Finding Your Type: Fonts And Their Influence On Learning

Typeface and fonts have a subtle but powerful impact on how online learners react to, view, interact with, and learn online content. Yet fonts have been overlooked as elements of online learning design. Read on as Mary Burns explores the power of the mighty little font in eLearning courses. This post was first published on eLearning Industry.

Using Readable Fonts And Type Sizes: How To Write And Organize For Deeper Learning (Part 2)

With hundreds of fonts available, choosing the right one for making your content readable may be a daunting task. In the second and final part of this article we’ll solve this problem.

This post was first published on eLearning Industry.

7 Tips To Create Visually Appealing eLearning Courses

You've spent countless hours creating your eLearning content and perfecting your eLearning course layout, but is your eLearning course going to catch the learner's eye? In this article, I'll share 7 tips on developing visually appealing eLearning courses.

This post was first published on eLearning Industry.

How To Improve Your Content Experience With Typography

3 Ways To Improve Your Content Experience With Typography 

Trying to get engagement in your eLearning courses is a difficult task at the best of times. Those engaging with your content have developed more sophisticated attitudes towards what makes for a good Learning Experience. The proliferation of high quality content sites across the web, and the increasing ease of access to free or almost free content editing and publishing tools, means that it's not enough to simply create an eLearning course and assume that it will be well received.

We need to be aware of the overall content experience that we present. An important aspect of the overall experience is the Typography that we use.

Usability.gov, a leading resource for user experience (UX) best practices and guidelines within the US government and private sectors, defines typography as referring:

To which fonts are chosen, their size, alignment, color, and spacing.

Wikipedia defines it as:

The art and technique of arranging type to make written language legible, readable, and appealing when displayed.

This article looks at just 3 of the fundamental typographic factors you should consider when creating your eLearning Content.

We'll start with simple unformatted text pasted into a MS Word document to highlight the impact that applying our typographical factors has.

Figure 1. Unformatted Text in MS Word

Figure 1. Unformatted Text In MS Word

1. Use A Typographic Hierarchy To Structure Your Page.

The typographic hierarchy is the system for organizing type that establishes an order of importance within the data, allowing the reader to easily find what they are looking for, and navigate the content. It helps guide the reader’s eye to where a section begins and ends, whilst enabling the user to isolate certain information based on the consistent use of style throughout a body of text.

Figure 2. Typographic Hierarchy

Figure 2. Typographic Hierarchy

All font sizes should be derived from the body text. The following steps can be used to define your typographic hierarchy:

  • Body text. 
    Text should be comfortable to read. For this example, it is set to 14px.
  • Primary heading.
    180–200% of the body text, so between 25–28px.
  • Secondary heading.
    130–150% of the body text, between 18–21px.
Figure 3. Text with Typographic Hierarchy Applied

Figure 3. Text With Typographic Hierarchy Applied

Other typographic hierarchical elements may be required; some further examples are as follows:

  • Tertiary heading. 
    100–125% of the body text, so between 14–17px.
  • Small text/Captions. 
    70–75% of the body text, so between 10–11px.

2. Use Vertical Spacing To Make Your Words Easier To Scan. 

We need to ensure that the line spacing and space between paragraphs allows the eye and brain to more easily decipher characters, words, and word shapes.

Figure 4. Vertical Spacing

Figure 4. Vertical Spacing

Paragraph spacing should be set equal to the Body Text size, in this case 14px.

Figure 5. Text with Paragraph Spacing Applied

Figure 5. Text with Paragraph Spacing Applied

Line spacing should be set to somewhere between 120–160% of the text size. Smaller body text requires increased line spacing in order to give each word room to breathe. It should be possible to fit a sideways ‘h’ between lines without it hitting the tops of d/b/t’s (ascenders) or the bottoms of p/q/y’s (descenders). In this case, the line-height used should be between 17–22px.

Figure 6. Text with Line Spacing Applied

Figure 6. Text With Line Spacing Applied

3. Adjust Line Lengths To Increase Readability.

Long lines of text are difficult to read. The ideal number of characters per line is 65–75. This length of a line of text is referred to as the measure. The measure is defined by the width of the body text rather than those of headings or sub-headings.

A line encompassing upper -and lower-case letters and numbers is 62 characters, an easy way of finding a comfortable measure, i.e. abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890.

Reduce the width of the column of text until it meets this 65–75 character limit.

Figure 7. Text with Line Length Measure Applied

Figure 7. Text With Line Length Measure Applied

Summary Of Typography Techniques Applied 

The animated gif below shows these changes being applied sequentially (may need to click to play in supported browsers):

Figure 8. Typographic Techniques Applied in Sequence

Figure 8. Typographic Techniques Applied In Sequence

All of the typographic principles detailed above are applied to the eLearning content shown below created using the Content Editor within the TopClass LMS. This particular content experience displays the content via a smartphone.

Figure 9. Presentation of eLearning Content

Figure 9. Presentation Of eLearning Content

In this article, I have attempted to show how you can improve your content experience with typography. It addressed only a small subset of the myriad of typographical features worth considering. The three discussed provide very quick and easy ways to dramatically improve the overall content experience, i.e.

  • Typographical hierarchy,
  • Vertical spacing, and
  • Line measure.

This post was first published on eLearning Industry.

7 Tips For Using Bullets In eLearning

How To Use Bullets In eLearning

While some say that bullets don’t belong in eLearning, others create online courses that seem to consist entirely of bullet point lists. However, a truly effective, and digestible, eLearning experience lies somewhere in the middle. Use too many bullets and the key ideas get lost in the shuffle, while not using enough may lead to cognitive overload. Here are some helpful tips on how to use bullets in your next eLearning course:

  1. Stick to a single format.
    Keep your bullet point formatting consistent throughout the entire list. If your first bullet is a short phrase without punctuation, then all of the other bullets should follow the same rule. Generally speaking, full sentences should end with a period, while fragments do not require any punctuation. Whenever possible, use under ten words for each bullet point, as it provides learners with snippets of information without overwhelming them.
  2. Include a subheading in each bullet point.
    If your bullets are going to include sentences instead of short phrases, add a subheading to highlight the key idea. Write a brief headline and bold or italicize it in order to draw the learner’s attention. Otherwise, your learners aren’t able to get the information they need quickly by simply scanning the bullet point list, which defeats the purpose of using bullet points in the first place.
  3. Follow the Three-Line Law.
    Keep your bullet point content to three lines or under. If you need any more room than that, you may want to consider breaking the list down into two or three different bullet lists to prevent cognitive overload. For example, if you realize that one of your bullets is turning out to be a paragraph long, then it may be time to give that idea its very own bullet point list. In addition, it’s best to keep your lists to 5 items or under. Keep in mind that bullets in eLearning are supposed to highlight the key takeaways, so that learners can get a grasp of the concept in a fraction of time. If you include 10 bullets, then they simply won’t absorb and remember every point.
  4. Each bullet stands alone.
    Every bullet point starts fresh, which means that it should not contain transition words, such as firstly, lastly, etc. If you would prefer to put them in a certain order, then you may want to opt for a numbered list or just stick to the standard paragraph format. Bullet points in eLearning should also be semicolon free, as there is no need to link them together. The fact that they are all contained within the same bullet point list automatically creates an association.
  5. Stories and walkthroughs are not bullet-worthy.
    There is some eLearning content that is simply not intended for bullet points. Stories, detailed walkthroughs, and emotionally-centered eLearning content are prime examples. If you are trying to convey a particular feeling, stick with a paragraph-based story. If you need to provide a step-by-step tutorial, go with a numbered list. Concrete facts, such as characteristics or traits, are ideally suited for bullet points, as well as more complex concepts that can be broken down into brief ideas or thoughts.
  6. Bookend bullet lists with the key takeaways.
    It’s a proven fact that the human brain tends to remember items that are first and last on a list. When they are skimming the first item on the list their attention is still fresh. They are interested in learning more about the topic. Then their attention gradually gets pulled in other directions as they come to the middle of the list. Upon reaching the end, they shift their focus back onto the content and prepare to dive into the rest of the eLearning course. For this very reason, put the most important takeaways at the start and end of your bullet lists. If there are key ideas that they absolutely need to absorb before the end of the eLearning course, then make sure to make them the bullet bookends.
  7. Bullets can be beautiful.
    Who says that bullet points have to stick to the traditional format? If you want to make your bullet lists more attention grabbing and visually pleasing, get creative and add icons, images, and interactive buttons to your bullet lists. Here are just a few of the ways you can make bullets beautiful:

    • Choose an appropriate image that represents each bullet point, then use it in lieu of a black circle. For example, if the first item on your list of “edibles to avoid” is fried or processed food, include an image of donuts or French fries. There are a variety of royalty free photo and clipart sites where you can find the perfect image.
    • Opt for an empty box that your learners can check once they’ve read the item. This makes it more interactive and allows them to keep track of what they’ve already learned. You can also leave space under the item so that they can jot down their own notes or observations.
    • Spread your bullet list out over the page or integrate it into a stunning infographic to boost learner immersion and make it more engaging. Your learners are more likely to remember the items on the list if they are presented in full color, complete with a themed background and border.

The needs of your learners and the learning objectives are the two most essential elements to consider when using bullets in eLearning. Use these tips to boost knowledge retention and simplify subject matter. Remember, content delivery is just as important as eLearning content development.

Also interested in learning other ways to increase the effectiveness of your eLearning course? The article 6 Tips To Improve eLearning Course Navigation highlights top tips to significantly improve your eLearning course navigation.

This post was first published on eLearning Industry.

Typography In eLearning: 5 Key Tips For eLearning Professionals

5 Key Tips To Use Typography In eLearning

If you ask any graphic designer, they will tell you that typography is art; indeed, typographic details have been created from thousands of years of written language and when used effectively they can communicate great beauty. As eLearning professionals, we are expected to have some basic knowledge of typography, as no matter how many images, graphics, videos, or audio files we use, the main source of our eLearning content is text; and while good typography makes your work look professional, bad typography conveys amateurism. It is important to use typography in the right way; it affects readability, information processing, and the overall effectiveness of your eLearning course. No matter how high quality is your eLearning content, if it fails to attract and hold your learners’ attention, it will be simply useless. In this article, I'll share 5 key tips for great typography in eLearning, so you can make sure that your eLearning courses are not only readable, but also really, really beautiful.

  1. Know your fonts.
    Different fonts convey different notions, such as tradition, playfulness, professionalism, etc., so choose them wisely. Always keep your audience in mind when selecting fonts for your eLearning course: Depending on who you are addressing to, children, adults or employees, your choice should always be appropriate for them and for your eLearning content. Remember to never, ever, use more than three different fonts, as it looks amateurish. In fact, two fonts are enough; one for headings, and one for copy. A good rule to follow is never mix two different fonts of the same type, i.e. two different serif fonts or two different sans-serif fonts.
    There are 4 main font categories:

    • Serif.
      A very wide category which includes 3 subcategories: old style, modern, and transitional. Serif fonts have an extra horizontal stroke on each letter (serif) and are the best choice for print, as they are easy to read. They look formal and traditional. Some examples of Serif fonts are: Cambria, Garamond, Lucida Bright, Times New Roman.
    • Sans-serif.
      “Sans” means “without” in French, so these typefaces come without a serif on each letter. They are by far the most popular fonts for both web design and eLearning, and their “star”, the most well known and used, is the Helvetica font. Other examples include: Arial, Calibri, Gotham, Franklin Gothic, Lucida Sans, Tahoma, Verdana.
    • Script.
      Imitating handwriting, Script font letters have usually long tails and they are often used in wedding invitations. They are definitely not a wise choice for long text, as they can be difficult to read. Some examples of script fonts are: Comic Sans, Lucida Calligraphy, Script, Vivaldi.
    • Novelty.
      This is basically the “Everything else” category. Decorative, Artistic, Grunge, and so on, all these types of fonts can be difficult to read, so they should be used sparingly and only as an artistic element. Some indicative examples are: Broadway, Harrington, Monogramma, Stencil, Zag.
  2. Keep a consistent text layout.
    Inconsistency can sabotage readability, as it confuses learners; on the contrary, a consistent text layout helps them get used to the structure and focus on their eLearning course. To ensure consistency and the same look and feel on every screen, use the same text location and formatting. Grids will help you visually connect items with each other. Headings, subheadings, and bullets should also be in the same place.
  3. Stick to the standard fonts.
    Choosing fancy fonts can be tempting when you browse through font libraries, as there are literally hundreds of thousands fonts available out there. Resist the temptation; exotic looking fonts can rarely have a tasteful result, unless you know exactly what you’re doing. It’s best to stick to the standard ones, such as Helvetica, Verdana, Gotham, etc., as they are already installed on your learners’ computers and are displayed well on all devices.
  4. Aim for readability.
    In order to create pages that provide clear and easy access to your eLearning content, you need to keep a few things in mind:

    • Contrast.
      Contrast is a great tool for emphasizing key points, but too much contrast can be tiring. Get the balance right and set up contrast to direct your learners’ attention to important information. Always use white space to let your pages breath and maintain flow, as too much text makes the screen scattered and unappealing.
    • Font size.
      Again, think of your audience; depending on how acute is their vision, you can decide on different font sizes. In any case, a standard size for e-text is 12, whereas 14 and even 16 are often used. Anything below 10 should be avoided, as it hinders readability. Use different font sizes to create hierarchy; bigger font size for headings and titles, average size for copy, small size for footnotes.
    • Line length.
      Long lines are difficult to read. A general rule to follow is that a line of text should have more or less 75 characters. Also, consider using left-aligned text.
    • Spacing.
      Apart from effectively using white space between your text and images or graphics, you should break your eLearning content into as many paragraphs as possible, as paragraph breaks enhance readability. Moreover, experiment with line height, letter spacing, and word spacing, as the distance between words, letters, and lines of text significantly influence readability.
  5. Understand the online typography etiquette.
    Or else, there are some effective typography rules that need to be considered. Some points to avoid when creating your next eLearning course are: 

    • Underlining, as it signifies hyperlinks.
    • Italics, as they are difficult to read.
    • All caps, as they look like you are shouting.
    • Mid-sentence capitalization, as it slows down reading.
    • Centered text, as it is difficult to read.
    • Two spaces after a period, as they create awkward spaces; one space is the correct practice.
    • Bold text, as it is best used for headings.
    • Color text, as it is difficult to read; black on white is always the best choice.

Typography in eLearning is important; it helps conserve your most valuable possession as an eLearning professional: learners' attention. Keep in mind these tips when designing your next eLearning course, and make sure that your audience keeps reading.

Now that you know how to use typography in eLearning, you may be interested in learning more about fonts in eLearning. Read the article How And Why To Use Custom Fonts in eLearning and find out how selecting the ideal fonts can take the aesthetic appeal of your eLearning deliverable to a whole new level.

This post was first published on eLearning Industry.