Clarity and legibility are essential in e-learning. Here are Saffron’s top tips on how to use some of the basic principles of typography not only to achieve legibility but also to bring interest and energy to your e-learning projects.
1. Create contrast
Always ensure that there’s a good contrast between the text and the background; never sacrifice legibility for aesthetic reasons. Contrast is also necessary to emphasise key points and focus the learner’s attention. This article describes the key principle of typographic contrast that every designer should know.
2. Build a hierarchy
Use typography to indicate the importance of the elements on the page. Have a strong and clear focal point and ensure that all other elements are arranged accordingly. Items that are logically connected should be grouped together, whereas elements that are not directly related should be arranged as separate entities.
3. Use a grid
Avoid random layouts by using a grid. This helps you to visually connect items with each other and achieve a more logical and structured layout. Mark Boulton describes how to use grid systems for web layouts in this article and although e-learning screens may require a simpler grid, similar principles can still be applied.
4. Allow space to breathe
Do not overcrowd the area with unnecessary elements. The blank area (‘white space’) is necessary to draw the learner’s attention to the key content and make the text easier to read. Create white space by increasing the leading (line height) and by maintaining clear margins around text and graphics.
5. Be consistent
Make sure your use of typography is consistent across all screens and if you are using a grid then make sure you use the same one throughout. Each screen of your course should provide a look that flows together as a clearly defined single project, and not as an autonomous entity with an individual layout.
Check back soon for a downloadable version of these tips, and don’t forget to visit regularly for top tips on all things learning and technology related!
