Day 29: Demystifying typography

Let’s jump back in time shall we?

What if the text on your screen looked like this:

You’d probably think it’s a joke right? Or maybe some company bringing the old 80s back. Imagine having to read this post on a wall of green text like that…

Well thanks to someone in particular, you don’t have to. It was 1984 and that someone was obsessed with calligraphy and typography after dropping out of college.

So he took a class that changed his perspective forever.
“I learned about serif and sans serif typefaces, about varying the amount of space between different letter combinations, about what makes great typography great. It was beautiful, historical, artistically subtle in a way that science can’t capture, and I found it fascinating.”

That someone was Steve Jobs, Apple’s founder.

His crazy idea of introducing different “fonts” to the Mac in the mid 80s, was what made it possible for people to finally express themselves digitally with emotion, clarity and variety.

Compare our previous green “robo text” to this:

You can imagine the reaction when people first saw it. And why Apple among other factors was able to make big moves in the market.

Going back to today, typography is still considered for the brave nerds or professional designers mostly, but that doesn’t mean that you as a business owner shouldn’t be able to take advantage of its secrets. Especially if it means increasing conversions at the end of the day.

You see, while often overlooked, typography actually plays a huge role in building up and establishing your brand, generating interest and making your messaging clear.

And it’s not only the art and technique of designing each letter and character. It’s also about their arrangement and spacing. Every little detail can change the way you convey your message.

The times of Gutenberg’s printing press are long gone. Now most of the job is being done for us and it’s never been easier to pick and choose fonts that are good enough, even if you’re a newbie.

Before diving in, a few housekeeping items…

What should you look for in a typeface?

What’s the difference between fonts and typefaces? You’ll hear about them interchangeably, but basically a typeface is a font family (say Helvetica), while a font, is the specific variation and style a typeface is used in (i.e. Helvetica Neue bold).

Knowing the basics of the anatomy of typefaces can also be useful. Especially if you want to communicate effectively with a designer. In any given typeface, the 5 most important elements to keep in mind are:

  • Serifs: the decorative strokes used to finish the ending of a letter. Typefaces that don’t have these are called “Sans serifs”.
  • Baseline: this is the line where letters sit.
  • Cap height: the distance from baseline to the top of the capital letter.
  • X-height: the distance between the baseline and the top of the lowercase letters.
  • Counter: the empty space inside letters like A, O, B. For open letters like C for example we call it Aperture.

Here’s a quick visual (with more terms):

All you need to know here is that to make a typeface easy to read you’ll look for big apertures, large counters, ample x-heights, and character shapes that are obvious and easy to recognize. Everything in moderation of course, as too much of it can result in the opposite effect.

Now that we speak the same language, let’s look at how you can find your fonts.

Finding your fonts the quick and dirty way

Let’s face it, you don’t have 10 years to sift through huge typography tomes and slog through trial and error to become a natural at typography. That’s not even your goal. You just want to improve what you have on your site right now (or come up with something new), so people can effectively understand what you’re about, and buy.

The best way to start thinking about your fonts, is to start with your brand.

What is your business or product like? Is it clean and simple? Authoritative or techy? Nerdy? High-class and fancy?

Based on this, you’ll begin shaping an image of the kind of typefaces you want to use. Keep this in mind:

  • Sans serif fonts are great to convey simplicity and friendliness.
  • Squared-off fonts will immediately signal authority and toughness.
  • Monospace fonts (each character occupies the same space) are great for document-related text.
  • Didone fonts fit nicely with luxury, classy brands.

Once your main “mood” is clear, look at some examples online of potential fonts you can use, like these (free).

By now you should have a rough idea of 3 to 5 fonts you might want to use. Let’s move to the next step.

How do you pair fonts together?

Important: never use more than 2 fonts (3 if you’re REALLY good). The reason apart from it being hard to fit more than 2 fonts in the same design, is that a lot of different fonts jumbled together, will probably make the design look weird and break the harmony. This will distract your readers. Big no no.

Now, narrow down your list of fonts to 2 keeping in mind that:

  • Using the serif + sans serif combination is usually a pretty good idea.
  • Serifs are great for headings, especially bold and aesthetically pleasing ones.
  • Sans serif fonts are super legible and great for body text.
  • Don’t use fonts that are too different from each other. You want the page to look like it was designed with intent, not randomly.
  • Don’t use fonts that are too similar either. This will create visual conflict and readers will have a hard time.
  • If you can find a good combination AND the fonts are in the same family (i.e. Helvetica), even better. That’s a sign that they were designed to be together.

Given these rules, if you want to make it even easier, here are some tools you can use to quickly find good combinations. These examples will also give you ideas for how to style (bold, italics, underline aetc.) your fonts to make the text easier to skim:

Bonus: Just noticed an amazingly good-looking font on another website but have no idea what that is? Try this Google Chrome extension. Enable it and click on the font you like. It will tell you its name, size, style and more juicy details so you can “steal it”. 😉

That’s it, you’ve just shortcut your way to awesome and conversion boosting fonts.

Your homework

Simple, just look at your page/website and see if/where you can change your fonts so that they follow our guidelines and reflect your brand.