Monospace vs. Proportional
When it comes to fonts and numbers, there are two main categories: Monospace and Proportional. Monospace fonts have the exact same width allotted for each character. This makes it perfect for aligning columns of numbers. Notice in the image below: the sets of numerals on the left are in a Monospace font and are perfectly aligned. However, in the example on the right, the "1" and the "2" are closer together than others in the column, showing that it's a Proportional font.
Tips for Designing Numerical Data
There are two types of numerical data you can display in your eLearning courses: Statistical data (first image below) or Sets of Data (second image, used for measuring or analytics). Most people find it easier to remember approximations than actual figures. For example, you might find it easier to remember which entrée on the menu is most expensive, as opposed to memorizing all the entrée prices.
As a designer, I always try to add graphics or shapes when possible to help tell the story. In the image below, to demonstrate that 20% of the staff had completed the Compliance Training, I used color to help tell the story. The light blue represents the 20%, and I also used it on the "20%" text, for continuity. This is much more effective than just reading statistics in a paragraph of text.
Instead of just saying "sales increased 50% in the first quarter," why not illustrate it? In the image below, I used an icon of a chart with an upward arrow and the 50% is larger. This is much more effective than the simple two lines of text in the example on the left.
Use graphs to display numbers. I often create graphs in Adobe Illustrator because it has options for different types of graphs. You can even create a custom graph using your own graphics. Sometimes I create my graphs directly in Articulate Storyline using shapes (in the image below, that's exactly what I did using lines, text, and simple shapes).
Pictograms are another great way to display data. In the image below, you can see how many donuts were sold at each location and compare locations at a glance. Pictograms help learners compare content and retain what they have learned.