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.
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.
Here are three groups of typefaces conveying three different brand attributes: sophisticated, trustworthy, and friendly. Notice how many kinds of typefaces can represent one personality trait.
[caption id="attachment_842" align="aligncenter" width="700"]
Vinter (Frode Bo Helland, Sindre Bremnes)
Sanomat Sans Text (Miguel Reyes, Christian Schwartz, Vincent Chan)
Nocturno (Nikola Djurek)
Bely (Roxane Gataud)
Ebony (Veronika Burian, José Scaglione)
Synthese (Jean-Baptiste Levée, Gilles Poplin)
Brando (Mike Abbink)
Abelard (Barbara Bigosińska)
Bligh (Luisa Baeta)
Berlingske Round (Jonas Hecksher)
Marcia (Victoria Rushton)
Quando (Joana Correia)
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:
In addition to brand and audience, 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:
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:
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.
Each typeface has specific features to solve unique design challenges. Some typefaces are better suited for your project than others. Here are a few bells and whistles to look for before committing to a typeface: superfamilies, optical sizes, a range of widths and weights, language support, and font features.
Freight (Joshua Darden) superfamily
A collection of typefaces from different genres is called a “superfamily.” Freight (Joshua Darden), shown above, has a sans, serif, and slab serif. Typefaces in superfamilies are designed to be used together, but can be used separately.
Some families have size-specific styles or “optical sizes”, each optimized for rendering text at a certain size. In the above example, Freight has several options for headings, body copy, and captions.
Text typefaces are designed to be comfortably read in long blocks of body copy, while display typefaces are intended to catch readers’ attention in headings.
A text typeface with contrasting forms and large apertures (the openings in letters a, g, e), making it ideal for long reading at small sizes. JAF Bernino Sans (Tim Ahrens, Shoko Mugikura).
A display typeface with similar, geometric forms and small apertures (on the g and e), making it ideal for headings and short text. Scandia (Eric Olsen).
Comparing the above typefaces, you’ll notice differences that make each appropriate in specific settings. JAF Bernino has simple, contrasting letter shapes, making it an excellent text typeface, legible at small sizes. Scandia has a bit more personality and similar letter shapes, making it better suited for display and short labels for navigation and buttons.
It’s useful to be aware of conventions of size-specificity in type design, though some typefaces can handle both text and display settings.
Check out examples of superfamilies and optical sizes on Fonts In Use.
Freight Sans (Joshua Darden) has six weights at three widths.
Text typefaces usually include at least four styles: regular, bold, regular italic, and bold italic. Larger type families can have a spectrum of weights as well as condensed and expanded widths. The styles share an underlying structure, creating contrast within a narrow range.
Search tool on Indian Type Foundry’s website
Typefaces support specific languages. You can check a typeface’s language support on the designer’s site or on a retailer like MyFonts. Many popular Latin-based typefaces will support Western and Central European languages. Here are a few foundries supporting non-Latin scripts: Commercial, Dalton Maag, Google Fonts, Hoefler & Co., Indian Type Foundry, Type.today, Typotheque, Typotheque Arabic, and Rosetta.
Abril Text and Display (Veronika Burian, José Scaglione)
Numerals for text and display
Numerals (or “figures”) come in different styles. Oldstyle figures blend into body copy because they ascend above the x-height and descend below the baseline, mimicking lowercase letters. Lining figures are the height of capital letters, so they work best for headings, buttons, and lists. Often, the default numerals in a typeface will be either oldstyle or lining, and alternate styles can be enabled using the CSS property “font-feature-settings.” Here are more features you can access using CSS:
Tablet Gothic (Veronika Burian, José Scaglione)
Tabular figures are numerals with uniform widths, which are handy for infographics and tables.
Giorgio Sans (Christian Schwartz)
Stacked fractions can be used in infographics, recipes, and tables.
Source Sans (Paul Hunt)
Bookmania (Mark Simonson)
Reid Hitt
Associate Design Director
Bio bio bio
Shannon Ruetsch,
Head of Experience Design
Kerrin McLaughlin,
Associate Experience Designer and Researcher