Recommended
More Related Content
Viewers also liked
Viewers also liked (16)
Similar to Typography for E-Llearning Designers
Similar to Typography for E-Llearning Designers (20)
Recently uploaded
Recently uploaded (20)
Typography for E-Llearning Designers
- 2. HELLO! I am Liliana Cotoară. Instructional Designer / E-learning Developer Meetup veteran / I ❤ to think in magic You can find me at @lilianacotoara.com
- 3. “Good typography is invisible. Bad typography is everywhere.”
- 4. Typography rules » Understand how fonts are classified » Choose fonts that match your audience » Be consistent » Create hierarchy » Create contrast
- 5. Understand how fonts are classified Serif
- 6. Understand how fonts are classified SerifSerif serif
- 7. Understand how fonts are classified Serif
- 8. Understand how fonts are classified Serif
- 9. Understand how fonts are classified Serif
- 10. Fonts should match the e- learning content. How would a font used in corporate compliance be different than a course for high school students? Choose fonts that match your audience
- 11. Be consistent
- 12. Create hierarchy with size Calibri 14pt Calibri 12pt
- 13. Create hierarchy with size Calibri 20pt Calibri 12pt
- 14. If information is organized, it is more likely to be read and more likely to be remembered. Create hierarchy with proximity
- 15. If information is organized, it is more likely to be read and more likely to be remembered. Create hierarchy with proximity
- 16. If information is organized, it is more likely to be read and more likely to be remembered. Create hierarchy with proximity
- 17. Nothing should be placed on the page arbitrarily. Create hierarchy with alignment
- 18. Nothing should be placed on the page arbitrarily. Create hierarchy with alignment
- 19. Use grids and guides in your designs to ensure your text is lined up. Create hierarchy with alignment vs.
- 21. Create Contrast
- 22. Typography rules » Understand how fonts are classified » Choose fonts that match your audience » Be consistent » Create hierarchy » Create contrast
- 23. THANKS! Any questions? You can find me at » @ www.lilianacotoara.com » liliana.cotoara@gmail.com
Editor's Notes
- Serif fonts have little “feet” or lines attached the ends of their letters. Serif fonts include small decorative lines or embellishments on the body of the character. Serif fonts appear more traditional in appearance and are best used for printed text. 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” 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 fonts are fonts that appear to be handwritten. Some script fonts look more formal or elegant than others and are best used sparingly for emphasis. 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.
- Decorative fonts are any other fonts that don’t fit into any of the above categories. Decorative fonts are usually quirky and are best used for emphasis. Should never be set as long blocks of text and never as all caps.
- It’s important to remember that certain topics and subject matters work well with certain fonts, and vice versa. A fun course for children or teens on a lighthearted subject could make use of a cute, decorative, or whimsy font. That same font would not work so well for a serious financial course. Your font style should match your content. Take a look at the fonts below to see how confusing it can be when the font doesn’t match the content. How would the font used in a corporate compliance course be different than a course for high school students? What are you trying to teach your learners? Let’s say you’re creating a course on financial security. You’ll probably want your typeface to convey a sense of security and protection. In other words, you don’t want to use a fun, silly font such as Taco Modern. For serious content, a formal, traditional typeface such as Georgia is a far better choice.
- As with all types of design, consistency matters! Inconsistent design creates a distraction, is confusing, and is a sign of sloppy development. When using fonts in eLearning, always be consistent. Once you decide upon a font style, size, and color for heading, body, and emphasis text, use them religiously! Overall continuity in design helps learners know what to expect and how to find information easily throughout the course, as they only have to get used to one structure and can then focus on the content. Keep text location consistent from screen to screen, above all, and use similar formatting. If you use bullets, use them the same every time. Always place headings and subheadings in the same place. This will allow for maximum readability, as inconsistency can confuse learners. The number of fonts you use is an important consideration too. While it’s okay to work with just one font, it can make the course stale. Use no more than one or two fonts, three at most. They create hierarchy and interest but can easily be overdone. There are thousands of typefaces out there—and even more fonts within them. To keep things simple, follow the “Rule of Three,” which states you shouldn’t use more than three typefaces in one project. For example, choose a combination of fonts that complement each other: Helvetica Neue and Garamond (Here are other 20 perfect font pairings). This will enable you to have some variety and visual contrast without becoming too much. If these slides were a meal, the variety of options on your plate would leave you with some level of indigestion. If you want to enhance the professional look and feel of your slides, you should ensure they are consistent.
- you cannot contrast 12-point type with 14- point type; most of the time they will simply conflict. If you are going to contrast two typographic elements through size, then do it. I recommend not using all caps. You probably use all caps sometimes to make the type larger right? Ironically, when type is set in all caps it can be up to twice as long as the same words set in lowercase, so you have to make the point size smaller. If you make the text lowercase, you can actually set it in a much larger point size, plus it’s more readable.
- Here is the same example, except this time the headline is bolded and a larger font size:
- See how much our headline pops now? Your eyes go right to the headline and right away you know what this slide is all about
- The principle of proximity states that you group related items together, move them physically close to each other so the related items are seen as one group rather than a bunch of unrelated bits. The purpose is to organize the information. If information is organized, it is more likely to be read and more likely to be remembered. very often in beginner’s designs, the words and phrases and graphics are spread all over the place, filling corners and taking up lots of room so there wont be any empty space. There seems to be a fear of empty space. The body of a text should occupy 25-40% of the screen, with line spacing in proportion to the text size. The key thing to avoid is a dense "brick" of text, which loses the eye quickly. Resist the urge to adjust margins to fit in more text; if you can't make it more concise, pick a more condensed typeface or go down a font size. A small font is easier to read than a cramped one. In this example: the headlines and the body don’t look connected. There is a lot of white space available here, but it’s all broken up. And there is white space where it doesn’t belong like between the headline and the related text.
- very often in beginner’s designs, the words and phrases and graphics are spread all over the place, filling corners and taking up lots of room so there wont be any empty space. There seems to be a fear of empty space. The principle of proximity states that you group related items together, move them physically close to each other so the related items are seen as one group rather than a bunch of unrelated bits. The purpose is to organize the information. If information is organized, it is more likely to be read and more likely to be remembered. The body of a text should occupy 25-40% of the screen, with line spacing in proportion to the text size. The key thing to avoid is a dense "brick" of text, which loses the eye quickly. Resist the urge to adjust margins to fit in more text; if you can't make it more concise, pick a more condensed typeface or go down a font size. A small font is easier to read than a cramped one. In this example: the headlines and the body don’t look connected. There is a lot of white space available here, but it’s all broken up. And there is white space where it doesn’t belong like between the headline and the related text.
- very often in beginner’s designs, the words and phrases and graphics are spread all over the place, filling corners and taking up lots of room so there wont be any empty space. There seems to be a fear of empty space. The principle of proximity states that you group related items together, move them physically close to each other so the related items are seen as one group rather than a bunch of unrelated bits. The purpose is to organize the information. If information is organized, it is more likely to be read and more likely to be remembered. The key thing to avoid is a dense "brick" of text, which loses the eye quickly. Resist the urge to adjust margins to fit in more text; if you can't make it more concise, pick a more condensed typeface or go down a font size. A small font is easier to read than a cramped one. White space is key in organizing your screen and maintaining flow. Without it, content takes longer to read and is more frustrating, as readers must first analyze the page visually to distinguish one element from the next. Keep a solid space barrier around your words to prevent the eye from wandering in the wrong direction. Studies, in fact found a 20% increase in comprehension due to effective use of whitespace. So make sure an ample amount of space surrounds the text. In this example: the headlines and the body don’t look connected. There is a lot of white space available here, but it’s all broken up. And there is white space where it doesn’t belong like between the headline and the related text.
- the principle of alignment states that nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page. Lack of alignment is probably the biggest cause of unpleasant -looking courses. Our eyes like to see order; it creates calm, secure feeling. Plus it helps communicate the information.
- the principle of alignment states that nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page. Lack of alignment is probably the biggest cause of unpleasant -looking courses. Our eyes like to see order; it creates calm, secure feeling. Plus it helps communicate the information.
- Those with a keen eye for design can spot alignment issues from a mile away. An easy way to help solve your alignment issues is to use grids and guides in your designs to ensure your text is lined up. Another important tip is to remember that left-aligned text is much easier to read than centered text. Now, it’s usually no biggie for learners to scan a center-aligned photo caption or button text and get what it means; but anything more than a single sentence, such as paragraphs or bodies of text, should be left-aligned in your courses. You should also try to stick with one type of alignment and be consistent with it throughout your design. A grid is a layout created with intersecting horizontal and vertical lines, which you can use to structure content and organize graphic elements, such as images and text. Grids allow you to organize your content easily and consistently. Typically, a design based on a grid will be very readable and have a professional, polished look and feel. And a side benefit to using grids is that they remove a lot of the guesswork from adding new content to each slide.
- Contrast is one of the most effective ways to add visual interest. Contrast can be created in many ways. You can contrast large type with small type; a graceful oldstyle font with a bold san serif font; a cool color with a warm color etc. Finding a font combination with a level of contrast that’s “just right” isn’t a step-by-step process, but is usually the result of a mash-up of personal taste, practice, instinct, and observation. Learners focus on what’s different. When everything on the slide is different, there’s no contrast or focal point. Contrast is a really important design concept because it helps learners distinguish and visually organize the slide elements. Contrast also plays a large role in directing the learner’s eye to what’s important. http://mashable.com/2013/11/21/font-games/#W9ei09HQokqw
- Contrast is one of the most effective ways to add visual interest. Contrast can be created in many ways. You can contrast large type with small type; a graceful oldstyle font with a bold san serif font; a cool color with a warm color etc. Finding a font combination with a level of contrast that’s “just right” isn’t a step-by-step process, but is usually the result of a mash-up of personal taste, practice, instinct, and observation. Learners focus on what’s different. When everything on the slide is different, there’s no contrast or focal point. Contrast is a really important design concept because it helps learners distinguish and visually organize the slide elements. Contrast also plays a large role in directing the learner’s eye to what’s important. http://mashable.com/2013/11/21/font-games/#W9ei09HQokqw