Font Games and Interactions for E-Learning Designers

E-Learning Challenge #51: Challenge | Recap

One of the things I enjoy most about instructional design is finding the right visual voice that reaches learner and helps them understand a new skill or concept. That’s why I found Tom’s recent post on font learning games so engaging.

Fonts are one of those elements we all use but know little about. Rather than overloading users with theory, he uses the games to engage learners of all skill levels by getting them to interact with the letters.

I liked the KernType game so much I rebuilt the game in Articulate Storyline. Here’s how it turned out:

View the Storyline version of KernType | Video tutorial | Source file

I was able to recreate the same options for adjusting letter spacing, viewing my result, and comparing my result to an expert solution. The only thing I couldn’t do was constrain the drag motion horizontally. That’s okay because I had still captured the overall essence of the activity using the tools I had available.

When you’re designing, you are rarely—if ever!—going to be creating a constraint-free course. The key is to master your tools and get a little help from the Articulate community.

Before we get into this week’s challenge, take a second to browse a few more games and interactions designed to help you learn more about fonts and typography.

Shape Type

If you’ve struggled using (or pronouncing) bezier, this is the perfect time to practice creating curves with the pen tool.

Shape Type

Interactive Typography

Designed and coded by Aaron Bloom & Erin Kendig, this interaction helps students learn basic type anatomy and classification.

Interactive Typography

Cheese or Font

If you love cheese as much as you do fonts, you’ll love this cheesy font game.

Cheese or Font

As course designers, you don’t need a degree in type design, but you should have a fundamental understanding of how type works. And that’s what this week’s challenge is all about!

Challenge of the week

This week your challenge is to create an interaction that teaches one or more basic principles of typography. This is a slightly bigger challenge than usual because it requires some content and interaction design. 

Here are some ideas to get you started:

  • Type terminology - Create an interactive glossary to introduce learners to common vocabulary terms.
  • Anatomy of a typeface - Create an interactive guide using markers or callouts.
  • Font quiz - Ask learners to identify fonts by name. Games like Arial vs. Helvetica are a great way to learn.
  • Leading, Kerning, and Tracking - Create a learning game to help learners apply basic adjustments to line and letter spacing.
  • History of type - Create a timeline interactions to let learners explore the history of type.
  • Combining typefaces - Quiz learners on appropriate font combinations.


You can use Storyline, Studio ‘13, or PowerPoint, to design your font game or interaction.

Share your e-learning work

  • Comments: Use the comments section below to share a link to your published project and blog post.
  • Forums: Create your own thread in our E-Learning Heroes forums and share a link to your published demo.
  • Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
  • Twitter: If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.
  • Facebook: Reply to this Facebook post with a link to your font game or activity.


Last week’s challenge

Before you type out this week's challenge, take a look at the creative webcam videos you and your fellow community members shared in last week's flat design challenge.

Flat Design for E-Learning Graphics: Challenge | Recap

Wishing you a font-tastic week, E-Learning Heroes!

More about the e-learning challenges

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Even if you’re using a trial version of Studio ’13 or Storyline, you can absolutely publish your challenge files. Just sign up for a fully functional, free trial, and have at it. And remember to post your questions and comments in the forums; we're here to help.

Jackie Van Nice

@ Jeff: You are indeed perfect and I'll certainly change that score on your permanent record. Since I know precious little about typography I referred to 5 different sources and found conflicting terms and definitions throughout, so I finally gave up and just did my best. Thanks for letting me know and I'll see what I can do to correct it. :) @Dianne: Thank you! I'm so glad you like it. You have enormous flexibility in your style too, you know! SL2 is a lot of fun. You'll like it - and of course you can try it out for free. Running it on the same computer as SL1 is no problem. You just need to add that 8th day on to your week so you have time! @David & @Nick: Thank you so much! I'm glad you liked it too. :) As I was brainstorming I knew I wanted to take advantage of the new... Expand

Jackie Van Nice
Andrew Sellon
Jackie Van Nice