The Rapid Elearning Blog

 

The Rapid E-Learning Blog - What is your elearning course telling your learners?

The video below shows how graphic designer, Brian Hoff, selected the right font for one of his projects.  There are many points in the video where he probably could have stopped, but didn’t.  No one would have known the difference.  But something kept him going until he found just the right look.

Click here to view video.

What kept him going is knowing that the typography does more than share the information to be read. It also communicates ideas or concepts visually because the font is more than text.  It’s a graphic element that contributes to what you want your learners to learn.

The reality is that many of us probably don’t put too much thought into the fonts we use. I have to admit that I don’t always put a lot of thought into the fonts.  I know many times I just go with my gut.  Sometimes I’ll use new fonts, because they’re new.  Or big bold ones to fill the space.

However, when we build elearning courses we need to consider the visual design as well as the instructional design.  They go hand-in-hand and are part of the overall communication process.  And in that case, the fonts we use play a critical role to the visual design and tone of the course.

Studies have shown that people will assign emotion or personalities to fonts.  Thus, if the font implies meaning, it seems important to match the appropriate font to the tone of your elearning course.

To give you an example of how fonts have unique personalities, check out this quick demo I built in Quizmaker ‘09.  Your job is to match the font to the picture. 

The Rapid E-Learning Blog - link to font personality demo

Click here to view the demo.

In this exercise, there’s really not a right or wrong choice.  The fact that you can look at an image and assign a specific font demonstrates that they do have personality and can contribute to what you communicate.

Note: For those who want to know how I built the demo, here’s a link to the Quizmaker ‘09 source file.  Feel free to pull it apart and look under the hood.  I used the Wilde Ride font that you can find here.

Ok, so now that you see fonts convey more than the text they display, how do you apply this to elearning?  Here are a few thoughts.

  • Develop a basic understanding of typography.  You don’t need to be a font geek or professional typographer.  But since you are using fonts and creating a visual medium, it makes sense to have a basic understanding of typography.  I am a big fan of the Non-Designer’s Design Book because it covers the basics of design and typography for those who aren’t pros.  Another good book is the Type Idea Index.  In fact, I like all of Krause’s “Index” books. It just depends on how much you want to learn.
  • Create a course style guide. I’m not a big fan of rigid corporate style guides.  But it is a good idea to at least create a style guide for your course.  It’ll help you think through the visual design and what you want to communicate.  And it provides some consistency so you’re not using too many fonts and crippling your design.
  • Set the tone of the course.  The typeface creates a first impression and sets the tone for the course.  How would the font used in a corporate compliance course be different than a course for high school students?  In developing a learner profile, you’ll want to consider the visual design that best communicates to them and which fonts support that style.  Here’s an interesting BBC broadcast on the Secret Language of Fonts.    
  • Sort fonts by style and emotion.  Just like you did in the exercise above, fonts can be sorted by style and emotion.  It might make sense to invest in an application that lets you sort your fonts.  Smashing Magazine has a good review of 25 Font Management tools.  Some are free and they cross multiple operating systems.  If you use any of them, do a Screenr video so we can see how they work.
  • Follow some professional graphic designers and typographers.  As I’ve mentioned in previous posts, a great way to learn is by deconstructing and replicating the work of others.  The same goes with analyzing good typography and design.  Pay attention to how the fonts are used on a page or web site.  Try some of those ideas in your elearning courses.  When I see an interesting layout or design, I create a screenshot and then save it for future inspiration.

You don’t need to be a professional typographer to build good elearning courses.  However, part of the course design is visual communication.  And in that sense, you do need to be aware of typography and how it contributes to visual communication.  It will only help your elearning courses be that much better.

Do you have any tips on using fonts?  Share them by clicking on the comments link.

Tidbits:

  • Community Manager, Dave Anderson, will be at TechKnowledge on January 27-29.  Check out his session, Dump the Templates! Create Custom Rapid E-Learning Your Way, or stop by the Articulate booth to meet him.
  • I’ll be in San Diego at the Training 2010 Training & Expo on February 1-2.  If you’re there, swing by the Articulate booth and say “Hi.”
Related Posts with Thumbnails


41 responses to “How Fonts Take a Starring Role in Your E-Learning Courses”

Hi,

I read the review of the elearning course that won gold medal at Articulate competition, by the Texas group! It was really fantastic. Thanks to you for including it here. It teaches some really valuable points to keep in mind when developing or reviewing a course. I have become a regular student of your blog and there is so much to learn…and learning from such experts is really an honor! :) thanks and keep teaching us :) I just love this blog a lot :) You are a wonderful teacher!

Fantastic tips! I think font choice is something we often ignore. And too often we make a style guide that must apply to all courses even when they do not work for all courses. Thanks Tom for pushing away from this.

My tip is to also be very thoughtful on font size. In my opinion, font size should be consistant throughout the course and large enough that it can be read with ease (e.g. 14 or 16). It irks me when I see very small font size on a page and it appears they chose a a small font size so more text can be fit on the screen. If you need to shrink the font to 10, then consider being more concise with the content or add a page.

Thanks again.

Tom,

First off, that fonts video is one of the funniest things I’ve seen in a long time. I showed it to some other (non-designers) and they didn’t think it was all that funny!

Anyway, can you research and write a little about kerning, anti-aliasing and all that stuff. I ply with those setting in graphics programs but can’t tell what they do, and when rendered in PowerPoint or other media, I can’t tell which is better.

Thanks!

Another good book for fonts and visual design in learning is Creating Graphics for Learning and Performance: Lessons in Visual Literacy by Linda Lohr. It incorporates not only some basic typography lessons but also how contrast, placement, etc., can affect those visual elements. Thanks for the article! Mailbox, open mailbox!

January 12th, 2010

Whole books and theories have been developed on font design and selection. This is a great post Tom.

@Laurel: I totally agree with you on the Lohr book, it’s a very good resource. A couple other that I have relied on heavily in the past are Slideology (Duarte) and Presentation Zen (Garr).

What a great fonts demo! That’s one of the best demos I’ve seen in awhile. BTW…yep, I selected those same six fonts. That was a cool way to make a point.

Another helpful blog post, Tom!

Creating a course style guide…

I have a new client and we’re collaborating on a course style guide on this first project together.

I’m simply using an Excel worksheet to list the style and usage for the online course. It’s opening the client’s eyes to consistency issues, and the need to create their own in-house style guide.

@jenisecook

Hi Tom,

I am a little disappointed that your blog fails to recognize what us “old fart typographers” knew since the 1920s, and that is “sans serif type fonts have much lower ratings for readability and “data” retention. Just because sans serif is usually the “default” font, it does not mean that the human eye and its attached brain went through a giant change when Steve Jobs and Bill Gates came along.

Georgia is a type face designed specifically for the computer screen but it would appear that their are millions out their in the blogasphere who think that because you use sans serif, you should know. OR, where I can I trade in my old eye balls for a set of new ones?

Cool reference to font managers. I’ve used Suitcase for years and couldn’t function without it. I put a quick screencast together on some of the features I most use: http://screenr.com/v71

A lot of those font managers Smashing lists is pretty good. The most important feature to look for is font activation. How easy is it to turn on only the fonts you want to use. Fonts take up system resources and most of us don’t work with more than a few fonts at any one time. Font managers let you load up your computers with hundreds, thousands of fonts and only “activate” fonts you’re currently using.

@Anton: Good points. However I’d add that readability and data retention are only one part of the puzzle. In the case of the post it’s about how the font fits into the tone and visual design of the courses. Kind of like what a set designer might do for a play.

Another consideration is that serif might be better for reading, but when you increase the font size, some of those considerations are diminished. Thus, a title or a screen with limited text can do fine without a serif.

Tom:

My comment was directed at your blog and its use of type fonts. I realize that when you increase the font size and reduce the message to a few words, serif fonts can work fine. My concern is that if you are coming across as a font “guru”, that fact should be reflected in everything you do.

[...] How Fonts Take a Starring Role in Your E-Learning Courses » The Rapid eLearning Blog – Tom Kuhlmann offers some insight and suggestions for selecting typefaces. [...]

@Anton: While I understand your point, I don’t agree with it. The world’s big enough for more than Georgia for online text. I also think this conversation supports the essence of today’s blog post. The intent of this blog is to offer tips and tricks in a light and informal manner. Georgia is a good font, but hardly the font that supports the visual design that I desire.

More on the font stuff. My concern is that we don’t get too crazy with these and run into issues with not having certain fonts on certain computers but if we can mix up the basic fonts it is good.

@DD: Good point. If you share project files or PowerPoint files, it’s good to pass along fonts to go with them. However, if you publish to Flash, then the fonts on each system are less a consideration.

Hi. Whenever I build a project to show in an interactive board or to published on the Web, I am usually very careful about the fonts I use and my experience with students says that fonts are a great way to convey the gist of the subject.
One of the things I frequently do, to prevent getting to school or to another computer (than mine) and realising that all is out of the previous configuration, is turning words into images (jpeg or png). These way you NEVER have problems with fonts and you always keep everything in order.

@DD – So true. One way to ensure designers don’t get too crazy is by working with fonts from a single type family. I put a quick screencast together on a couple basic ways to achieve emphasis through using a single font family. http://screenr.com/y11

January 13th, 2010

They say ignorance is bliss … for me a font, is a font, is a font! I am very new to e-learning as a designer (more as a complementary resource to my coaching and training) and would never have thought about. This said, I gues, a font is somewhat like a voice isn’t it. Sexy and saltry or harsh brash.
Tom, how dare you wake me up from lala land! Well, what a wonderful article to point us all in a particular direction and even more generous of you Tom to share resource for those of us likely to want to learn even more. THANK YOU!

Tom, I think your blogs are wonderful. I especially like that you share your source files with us! I admit that I ‘borrow’ some of images for some of the stuff I create!

Good suggestions, as always. A few of the fonts in the demo (e.g. College, Times, Paris 1970, Stencil) seem to match their photos based on the name of the font as much as its “personality”. As an experiment, it would be interesting to see if the matches users make would be as consistent if you used a generic text string in place of the font name.

I can appreciate the use of fonts, and their effect on learning. One caution I would have is when course work is being created for an international audience. While most fonts can handle our standard US alphabet, many have difficulty when trying to convert into other languages. If a student is utilizing a localization software, and do not have the settings adjusted to convert to a default font, many words will become garbled machine code.

I discovered this while trying to translate some web pages for a software company I worked with. We were translating our help text from English into Spanish, Italian, German, French, Czech, Russian, and many others. Our fonts were created internally. We ended up having to create additional characters for the Cyrillic alphabets.

Great article.

Tom, thank you for sharing this post. Many people take the use of fonts for granted. You gave some great tips that will help me as a budding instructional designer. One that I will keep in mind is about keeping a course style guide. I also save layouts that I find interesting. Thanks for suggesting the BBC broadcast, The Secret Life Of Fonts. I will be definately watching that soon.

@Matt: good point. It’s always important to consider your audience. Since the fonts are considered more as a graphic in this post, then you have to determine if the effect works for a different audience.

@John: I probably could have used fonts that were as obvious, but time’s of the essence. :)

So cool video. I like this article very much.

Your post is so true pictures, color, type and graphics are definitely more captivating then plain boring black and white text. Statistics show that this is actually true. Dr. Ruth Clark actually believes that a balance of white space and graphics/images on the page significantly improve learner retention rates.

If you are implementing a new training plan for your organization be sure to find out how your users/clients or employees learn best.

Great post! Like others have pointed out, it’s easy to fall into the habit of going with a particular default font. But choosing a font carefully can clearly help us convey a message, suggest a tone, or inject some personality. I also enjoyed the demos. Thanks!

January 23rd, 2010

Like always Tom’s directions and suggestions are so helpful. Please, besides fonts, tones and all that do not forget CONTENT. When you know content (SME) the rest is just practice to develop the presentation.

Astrid Case

Our office has little to no budget to purchase fonts…where can I find good fonts to use in my courses so I’m not always using arial, verdana and times new roman?

@Lisa: there are a lot of free fonts, like dafont.com. You need to read the license in the read me files. Some are only for personal use. Another option is to go to the CD racks in computer stores. Many times you’ll see Cds with hundreds of fonts that are relatively inexpensive.

[...] already looked at how fonts are more than the text you read.  As a graphic element, they convey meaning and play a role in the message you communicate. [...]

[...] Fonts count – howto choose the right typography for your audience, in this article and video post. [...]

August 6th, 2010

Fascinating & tidy looking site, I’ll share it with my friends!

Not only fonts, but the placements and colors also have helped. However, it all depends on what your objective is. Personally, I prefer use just only the Serif or Tahoma in case of the fancy fonts look good in short period.

Tom,

I enjoy your blog. The information you post on your website has helped me become a better graphic designer and has helped me become a better developer of training. Thank You! If I would have been employed as a trainer especially in e-learning, I probably could develop the best trainings based on creativity and presentation, thanks to your blog. I have a M.A. in HRD and participated in some other programs and I still look forward to your email to see what topics you come up with.

[...] more pointers, visit http://www.articulate.com/rapid-elearning/how-fonts-take-a-starring-role-in-your-e-learning-courses. You’ll find resources about the impact of different fonts, how to “sort fonts by style [...]

[...] more pointers, visit http://www.articulate.com/rapid-elearning/how-fonts-take-a-starring-role-in-your-e-learning-courses. You’ll find resources about the impact of different fonts, how to “sort fonts by style [...]

[...] to reach out to others, even those using different platforms. They’ve had some great posts on fonts, PowerPoint Presentations, and using audio in courses, among other things. If you’re an [...]

[...] < Visual Design < djager Get flash to fully experience Pearltrees How Fonts Take a Starring Role in Your E-Learning Courses The video below shows how graphic designer, Brian Hoff , selected the right font for one of his [...]

[...] Bold fonts: Fonts are interesting because they display text that we read. But they’re also graphic elements that convey meaning and speak to your visual voice. We learned about this in an earlier post where we matched fonts to images. [...]

[...] Мы ранее обсуждали эту тему в другом посте, когда подбирали шрифт к картинке. Щелкните по картинке, чтобы посмотреть [...]