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)
Stylistic Alternates
Many fonts have alternate characters to solve a specific challenge or add stylistic flair. Source Sans (Paul Hunt) has alternate letters that create a warmer tone. Bookmania (Mark Simonson), has gestural swashes.
Ultimately, your typeface choices will come down to your budget. Typefaces have varying price points. The price can depend on whether you choose to host the font files or use a hosting service. As you may know, webfonts are different file formats (.woff2, .woff) than formats used on your operating system (.ttf, .otf).
Every designer or distributor has a different pricing model, though they are generally easy to understand and compare. Here are four popular models:
Your other budget consideration is the performance budget. Tim Kadlec describes it as follows:
A performance budget is just what it sounds like: you set a “budget” on your page and do not allow the page to exceed that. This may be a specific load time, but it is usually an easier conversation to have when you break the budget down into the number of requests or size of the page.
Make your developers and visitors happy by establishing a performance budget. If your site feels fast, it improves a visitor’s experience and overall impression of your brand. The file-size limitation forces you to make deliberate typeface choices, improving the overall consistency and quality of your design.
Fonts render differently on Apple and Windows devices. To combat this, type foundries undergo a thorough process called manual hinting, greatly improving rendering on Windows. As high density pixel screens become more prevalent, hinting will become less important.
To cover your bases, check your site on a range of browsers and devices, or use BrowserStack.
Bold Monday
Commercial
DSType
FontFont
Frere-Jones
Google Fonts
Hoefler & Co.
Indian Type Foundry
LostType
LudwigType
Monokrom
MyFonts
OkayType
Optimo
OurType
Process Type Foundry
Production Type
Rosetta
Mark Simonson
Suitcase
Typekit
Type Together
Type Network
Typofonderie
Typotheque
Webtype
Village
Graphic designer Bonnie Siegler said it best: “Your choice of typeface is as important as what you do with it.” With so many great foundries, resources, and tools out there, your options are almost endless. I hope this article provides a foundation for experimenting with new typefaces in your own work.
For more type tips, check out talks and writing by Stephen Coles, Jessica Hische, Indra Kupferschmid, and Dan Mall. This article is greatly indebted to their generous contributions to design criticism and education.
Reid Hitt
Associate Design Director
Bio bio bio
ExpandTheRoom
ExpandTheRoom