The subtle art of choosing typography and how to approach it.

When I think of choosing typography, I think of a craft similar to choosing a plate for a meal. Think fried chicken served in a white plate vs fried chicken wrapped in a newspaper. The plate or the newspaper does not determine how the chicken will taste. But it will determine in what context the chicken should be consumed.

Historically, fonts were developed to make copies of written text at large scale — a revolutionary invention of its time. But as centuries passed by and copying became a widespread phenomenon, fonts took over a more complex role. The job of typography today is to be the vessel for the content that’s being presented, in addition to bringing attention to itself. Think about every time you stumble upon a beautifully designed website and wonder why it felt so easy to read!

The skill of choosing typography is an abstract one and the millions of fonts available online doesn’t make the job any easier. But, we can still think of a few basic principles to keep in mind.

1. Understand the content first.

As designers we have a habit of not taking time to read. In most cases, we make our choice of fonts with lorem ipsum as filler material.

I do not agree to this approach.

We must not forget that — our job is to bring attention to the content first. This can only happen when we try to understand what is being written. To demonstrate why reading content is important before we start choosing fonts, let’s look at the example below. It tells us nothing about the choice of fonts we must make.

But, the paragraph below will give us a few ideas on possible fonts we might use.

2. What is the structure of the written content ?

Content on digital mediums would rarely ever have a linear structure. Especially in websites and apps, content is designed to have various contexts, perspectives and hierarchies. Understanding the internal structure gives us clues to how many different fonts and variations we would require to present the content efficiently.

Let’s take an example:

In point 1 below, we see a block of content that invites a user to stay connected. This is followed by an explanation for why and then- a call to action. Laid out plainly, it feels cumbersome to read.

In point 2 however, we use two fonts. The section suddenly becomes easier to read.

3. Does our content need images and graphics to be presented ?

For most digital content — illustrations, animations and photographs are inseparable. We must take time to understand the relationship between visual material and written content.

For some parts, images would be more important and content only acts as aids to understand the images. The opposite is also true. Again, in some other sections, images/graphics would share an equal hierarchy. A better understanding of this relationship, makes our choices of typography better.

Let’s take the example below.

The variation in fonts between Example 1 and 2 isn’t huge. But notice how Example 2 does a better job of setting clear contrast between the heading and the image. As if, the font is saying — read me first.

4. What degree of ornamentation should we strive for ?

Over ornamentation takes the user away from the story. Under-ornamentation does little to bring attention.

Choosing typography for a website about a horror film studio should not compel us to go choosing fonts with obvious horror elements. But this does not imply, our choice must incline towards plain. Remember — readability always trumps aesthetics but it shouldn’t be our sole goal.

Take this hero section for example.

An obvious choice of typography without paying attention to nuances might end us with examples like the one below. Difficult to read. Although, the horror element is clear.

In the example below however, readability is maintained. The choice of typography in this case signifies bold and tilts towards an element of surprise.

5. How many fonts must we choose ?

Understanding the scope of our design project is important. How much written content must we accommodate and what is the purpose of the application or website we are designing for. If our website spans 100s of pages with different contexts, we will always be safer in choosing different styles from a same family. If our project has a smaller scope, say a microsite, we can perhaps play around with numerous fonts.

In my opinion though, less is always better. One is acceptable, two is excellent. Use 3 when 2 might not be enough.

We must not stress the audience with the trouble of remembering multiple fonts. But we must also not be happy with obvious choices. The correct balance will always be in its nuance.

Conclusion.

The correct way to approach choosing typography for any design project should always be content first. All fonts have unique features, but these visual features are just ornamentation if they have nothing to say. Just like the job of the newspaper or the plate is to bring attention to the fried chicken served, our job is to choose the correct vessel for the content. We become better at it every time we take steps to understand, analyze and think about what’s being written.