How to Choose the Right Typeface for Your Website

Five Factors to Consider

Part 2 of 3 PreviousNext

3. Solve for your project’s unique challenges.

Each typeface has specific features to solve unique design challenges. Some typefaces are better suited for your project than others. Here’s 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 superfamily (Joshua Darden)

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.

Optical Sizes

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.

A range of weights and widths

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.

Language support

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:

Font features

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:

Tabular figures

Tablet Gothic (Veronika Burian, José Scaglione)

Tabular figures are numerals with uniform widths, which are handy for infographics and tables.

Stacked Fractions

Giorgio Sans (Christian Schwartz)

Stacked fractions can be used in infographics, recipes, and tables.

Stylistic Alternates

Source Sans (Paul Hunt)
Bookmania (Mark Simonson)

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.

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

Read the next post now