What The Font?! Identifying Fonts for eLearning Design

June 5, 2008

As eLearning developers, most of us are not graphic designers by trade or by training. Many of us have academic or corporate backgrounds. We are, to put it bluntly, visual design noobs. Hacks. Poseurs. We think white socks are perfectly fine with black trousers. And we couldn’t tell the difference between Helvetica and Microsoft’s tacky two-bit knockoff Arial if our lives depended on it.

So if we’re not graphic designers, and we can’t afford to hire a real graphic designer for our eLearning development team, how are we supposed to create visually compelling eLearning without a clue about what we’re doing?

Friends, the answer is simple. Ape the work of someone who does.

Whenever I come across a website with a visual design that inspires me, I take a snapshot of it and file it away. I find it helpful to browse this “digital scrapbook” of tasteful design whenever I’m starting a new eLearning development project. I look at the color schemes. The image styles. The fonts used.

And while mimicking a color scheme is a simple affair, duplicating a font style can be a real challenge. After all, if you can barely tell a serif font from a sans-serif font, how are you going to discern Futura from Avenir? You aren’t.

But never fear, WhatTheFont?! is here!

Simply upload an image containing the font you like and WhatTheFont?!, or WTF from here on out (no, not that WTF), will do its darnedest to tell you exactly what font it is.

I feel an example is in order.

Imagine you stumble across a refreshingly (or annoyingly) honest blog about eLearning design called, oh, say, eQuixotic. And say you are struck - inspired even - by the visual symphony that frames its verbose grandeur.

“This man knows what he is doing!” you cry. (Ah, not so! But I digress…)

And imagine you are attracted in particular to the title font used in the site’s banner. Why, you would just love to use this exact font in your next eLearning project. But how can you determine what that font is?Simple. Go to WTF. Upload the banner image. WTF will automatically attempt to recognize each character. Like so:

You may have to help it along by filling in some of the character boxes. It seems to struggle with the dotted i in particular.Once you’ve ensured the correct characters are identified, click the Search button. And voila, WTF will identify the font with a surprising degree of accuracy:

Indeed, the font used for the eQuixotic site banner is Cholla Sans Regular. WTF FTW!

I love Web magic like this.

So go forth and imitate, my visually-challenged eLearning developer friends. There is no excuse for using ugly, amateurish fonts (Comic Sans, I’m nodding in your direction) in your next eLearning project.

The shame of hopping a free ride on someone else’s caboose will fade over time. Trust me.

Posted in Presentations, eLearning Design