Selecting Typefaces

Legibility describes how easy it is to tell one letterform from the other. A typeface's legibility is determined by its design: stroke width, serifs, the presence of certain design elements, etc.

To choose the correct legibility level, think of the text function. For example, the typeface used for body text in a newspaper or book needs to be highly legible. On the other hand, high legibility is not a priority for decorative typefaces used for headings, as they are short and meant to be seen at a glance.

To achieve high legibility, choose typefaces with:

• Conventional letterforms: Readers are used to them and will easily recognize them.
• Generous spacing: Tight tracking makes it more difficult to make out individual letters, which slows readers.
• A tall x-height: It makes the difference between certain letters like c and e more clear.^[1]

Readability measures how easy the text is to read. It depends on several factors: type style, size, tracking, leading, color, and other properties all combined. High legibility doesn't equal high readability. For example, a highly legible typeface can have low readability in small size, low contrast, or altered tracking and leading.

To choose a font with suitable readability, think of your text purpose and message. If your message is complicated, it makes sense to use a high readability font to not hinder the audience's understanding.

However, research shows a correlation between the effort it took to read the text and the ability to remember that information for later.^[1] In short, it's all about balance. If the text becomes too difficult to read, readers may give up or become more confused. But if it's too easy, they may become bored.

To improve readability:

• Choose typefaces designed for your purpose. Use display fonts for headlines, body copy typefaces for body copy, etc.
• Apply left alignment (with ragged right edges) instead of justified. This makes it easy to follow the natural flow of the text.^[2]
• Make sure your line height is at least 1.5 times greater than the point size of your typeface for multi-line texts. If the lines are too close, it's difficult for the eye to stay on track.

Appropriateness refers to how suitable a typeface is for a specific task. This is quite a subjective measure, and it isn't easy to quantify it. For example, a casual script like Comic Sans is not an appropriate font for a banking app.

Experience of working with a typeface and learning about its history and original purpose can help assess how appropriate it is.

The attributes to consider when deciding if a font is right for the task are:

• Design intent
• Expected aesthetics
• Mood
• The designer's personal choice

When choosing a typeface appropriate for a task, consider the design intent behind creating the typeface. What was it made for?

For example, the Beware typeface was made for art and fashion projects.^[3] With its elegant aesthetic, it's a good fit for an art website heading. For the body text, it's better to choose a font with higher legibility or a font designed specifically for computer screens.

Many popular typefaces have detailed write-ups and reviews, so look up the information before making a choice.

When choosing a typeface, consider the aesthetics that users expect from your product. Your typeface should conform to the image expected by the target audience.

Imagine you are designing a website targeted at children. Think about what kind of impression it's supposed to make. Probably something light-hearted, energetic, and free-spirited.

Now look at typefaces that you are considering and try to describe them with a few words. Hoops! is a whimsical and playful typeface, while Copperplate looks serious and elegant. In this case, Hoops! would make a more appropriate typeface for the product.

The mood you want to create is another subjective attribute you need to consider when choosing a typeface. Unlike other factors, it can't be separated from the meaning of the text itself. This means that the same message can be perceived differently when written in different fonts!

For example, choosing a high readability "cute" font can make the message look romantic. In the TV show Once Upon a Time, Snow White and Prince Charming often say to each other, "I will always find you."^[4] What they mean is, "No matter what obstacles life throws my way, I won't give up on you." A romantic font can help convey this mood.

At the same time, if you pair the message with a "scary" font, the same line will look creepy and menacing.

When choosing fonts, it's crucial to understand the content hierarchy of your design. This will help you create the typographic hierarchy.

To create hierarchy, ask yourself the following questions:

• What types of text content will be used in this product?
• How many fonts do I need to cover all these types of text?
• Can one typeface provide enough variation with bolds, italics, and small caps?
• Do I need more than one typeface to create more distinction in the hierarchy?

You can use a mind-mapping tool or make a traditional outline to see as much as you can before you start choosing typefaces.

Anachronisms refer to chronological inconsistencies. In the context of typography, it means using a type that doesn't belong to a particular historical period.

An example of anachronism in typography would be using a script reminiscent of Medieval Europe for a text about Ancient Egypt. Typefaces like Carolingian Minuscule and Pfeffer Mediæval evoke associations with the Middle Ages. Considering that the latest Ancient Egyptian dynasty ended at least 200 years before the Middle Ages, neither typeface is a good fit for the topic.

To avoid anachronisms, do your research and learn the history and origins of fonts. This is especially important when deviating from standard sans serif and serif typefaces.

Typographic clichés involve fonts that are overused or too obvious for a specific topic. For instance, Papyrus is often used for "ancient" themes (especially Ancient Egypt), and Comic Sans is commonly used for humor. Relying on these choices can make your design feel unoriginal and uninspired.

How can you steer clear of these clichés? Take time to explore less obvious font options. If you instantly pick Lithos for a Greek restaurant, you’re likely falling into the cliché trap. Instead, look for typefaces that convey the message with more nuance and creativity.

Extended type families are made up of several type families. They consist of typefaces that share essential characteristics while preserving their individual features.

For example, the ITC Stone type family consists of several subfamilies containing both Roman and italic in medium, semi-bold, and bold. All designs share the same cap height, lowercase x-height, stem weight, and general proportions.^[5]

The benefit of choosing an extended type family is having fonts for a variety of use cases. You don't need to find typefaces that don't clash, because extended type families have a very uniform, orderly mood and aesthetic.

When deciding on the font, it's important to consider the context in which the font will be used. Where will it appear? What message will it communicate? What kind of impression does it need to produce? Look for fonts that will match your design goals in terms of readability and appropriateness.

Let's take as an example a heading for a financial advisor service website. It needs to be elegant and legible — but not necessarily as legible as the body copy. It also needs to produce the impression of trust, reliability, and professionalism. The client suggests either Playfair Display or Lobster.

While both typefaces are stylish and highly legible, their aesthetics are quite different. Playfair Display is a classical typeface with a modern feeling that takes inspiration from the 18th century. Lobster, while a sleek and aesthetically appealing font, has a more playful personality. Moreover, it became the victim of its own success and has been heavily overused. In this case, Playfair Display is a much better fit for the job.