How to Choose the Right Typeface for Your Website

Five Factors to Consider

Part 1 of 3 Next

If you design and build websites, you probably feel confident using typefaces. However, when it comes to choosing typefaces, you may have trouble knowing where to look and what to look for.

As Associate Design Director at ExpandTheRoom, I design digital products for a variety of brands, from small non-profits to large publishing companies. Part of my role is ensuring we choose appropriate typefaces for our projects. Based on my experience, here are five factors to consider when choosing typefaces for your website or product.

1. Understand the brand and audience.

When you begin a project, it’s important to fully understand your brand and audience. At ETR, we ask our clients questions like: what are your brand attributes? How do you differ from the competition? What value do you provide your audience? What are your visitors primary and secondary reasons for visiting your site? This information will lay the groundwork for informed type decisions.

Your typeface choices are part of an overall approach aligned with your brand and goals. Typefaces communicate your brand’s personality, helping your visitors know they’ve come to the right place.

Connect typefaces to brand attributes

Here are three groups of typefaces conveying three different brand attributes: sophisticated, trustworthy, and friendly. Notice how different styles of typefaces can represent the same attribute.

Sophisticated Typefaces

Sophisticated sans typefaces Vinter (Frode Bo Helland, Sindre Bremnes), Sanomat Sans Text (Miguel Reyes, Christian Schwartz, Vincent Chan)
Sophisticated serif typefaces Nocturno (Nikola Djurek), Bely (Roxane Gataud)

Trustworthy Typefaces

Trustworthy sans typefaces Ebony (Veronika Burian, José Scaglione), Synthese (Jean-Baptiste Levée, Gilles Poplin)
Trustworthy serif typefaces Brando (Mike Abbink), Abelard (Barbara Bigosińska)

Friendly Typefaces

Friendly Sans Typefaces Bligh (Luisa Baeta), Berlingske Round (Jonas Hecksher)
Friendly Serif Typefaces Marcia (Victoria Rushton), Quando (Joana Correia)

How do you know what attributes typefaces represent?

One way is to examine how type is used in the wild. For example, if you need a typeface for a news site to feel approachable and credible, look to how other news sites are using type. Here are two amazingly helpful resources:

  • Fonts In Use

    An extensive archive of typographic design in different industries and formats.

  • Typewolf

    A daily blog covering type trends.

2. Consider your content and how it will be read.

Typography needs to be appropriate for your most prevalent content—whether it’s articles, videos, images, products, listicles, or cat pictures.

Flama (Mário Feliciano), Adelle Sans (Veronika Burian, José Scaglione), Echo (Ross Milne), Bligh (Luisa Baeta)

You can’t get a complete sense of how a typeface will perform without trying it in context. This reveals a typeface’s unique qualities and how well it supports the content. Luckily, there are many helpful tools and tactics:

How do you know a typeface’s intended use?

Fontstand and Fonts In Use tag fonts with helpful keywords like “on-screen reading,” “editorial design,” “cultural festival.” You can also go straight to the source and see what a type designer has to say. This description of Susana Carvalho and Kai Bernau’s Algebra explains the designers’ intent:

“Its loose spacing gives a remarkably comfortable texture in text, and its crisp detailing gives a distinctive and serious feeling at display sizes…its clean lines make it appropriate for contemporary use in modern magazine design.”

How does content influence type?

Here’s a real-world example. Say you’re designing a new recipe website. Your target demographic is a busy parent planning meals for their family. They browse for recipes on a mobile device while on the go. Through conversations with the client, you’ve also learned that the brand embodies the joy of cooking and that the art direction calls for elegance and simplicity.

With this information, you can establish three guideposts:

  1. How the content will be read. Visitors are browsing quickly. Primarily on mobile, they are scanning recipes, which are made of lists and media: ingredients, instructions, images, and videos.
  2. A clear hierarchy will guide visitors to the right recipe. Headings, buttons, navigation, and lists are opportunities to explore different typographic treatments: borders, capitalization, color, icons, and different fonts.
  3. Brand attributes. In order to be on-brand, the typefaces should feel elegant, joyful, and simple.
Kepler (Robert Slimbach) and Sofia (Olivier Gourvat)

After trying out different typefaces, you pick two: Sofia, a joyful sans and Kepler, an elegant serif. Sofia is simpler and used for frequent elements (buttons, ingredients, instructions, navigation).

Kepler is more ornate and gives headings some personality. Appropriate typefaces used in meaningful ways make the overall design functional and on-brand.

This is the first part in a three-part series.

Read the next post now