Fonts for Dummies

You may be thinking “I don’t know anything about design, how do I deal with type in my project?” “Should I make the text on my video neon pink?” “Why is my bellybutton on backwards?” We can help you with two out of three of those questions. Let’s get started.

The font of a text controls how we see the letters on our screen. It can be a powerful feature of good design. But like any power, it can be dangerous if it falls into the wrong hands. Good type can make the difference between confusion and communication. Here are some basic tips to avoid a font fail:

1. Choosing a font

Remember when there were only a handful of fonts to choose from? Nowadays there are almost too many options. Want your text to look like it was written by a 4th grader? There’s a font for that. Want your text to look like it was eaten and spat out by a grizzly bear? There’s a font for that, too. All those possibilities can distract you from your purpose: getting your audience to read and understand your message.

Take road signs as a good example. Did you know most official highways signs are written in the official “Highway Gothic” font? It was designed to be read quickly and accurately. Imagine the chaos and confusion if road signs were written in Papyrus. Let us all take a moment of silence to give thanks for Highway Gothic.

sign

Now let’s look the Book of Kells, an illuminated manuscript from the early Middle Ages. Its text is aligned closely with its spiritual purpose. Its pages are ornate, intricate, and visually arresting. It is meant to be studied closely and slowly.

bok

Figure out where your project falls within that range. Are you I-40W or a medieval monk? Let your purpose guide your font choice.

2. Styling: Keep it simple

The following example should hurt:

KeepItSimple

Blueforest Studios is not responsible for any injuries that may occur as a result of looking at this image.

Just because you can apply five different strokes, a gradient fill, drop shadows, and ten different fonts doesn’t mean you should. If your text is meant to be read, legibility should be your number one focus. Styles should be applied with the greatest reserve and good reason.

3. Bring it together

Now that you know how your individual letters will look, you can begin deciding how they will sit on the page or screen. Make a hierarchy and apply it consistently. Decide how your headers will look compared to your paragraph text. What about links and sub-headers?

A great example of this comes from Pelican Books’ clean, crisply designed website.

pelicanbooksWithout thinking, we know exactly where our eye should go. Scrolling through their site is easy and intuitive.

4. Observe fonts in their natural habitat

Type is everywhere. Pay attention to what works and what doesn’t.

Take Budweiser’s 2015 Super Bowl commercial. It features a bold sans serif centered in the frame. There’s no voice over, so they need the words to do the talking.

Screen Shot 2015-03-25 at 9.07.52 AM

5. Go forth and font

Here are some resources to get you started:

Font Squirrel – Great collection of free, professional fonts.
Dafont – A glut of everything from basic to illegible.
Art of the Title – Online collection of movie title typography. A good starting point for references and ideas.
The Design Blog – The best way to develop your design intuition is to absorb good design. The Design Blog is a perfect way to marinate in the latest and best.