A Brief Primer on Typeface Selection

When choosing typefaces, we need to be cautious. As typographers, we are responsible to our readers and to our texts, so it’s imperative that we make intelligent selections that meet the needs of both these interests.

One piece of advice that world renowned web designer Jason Santa Maria gives about choosing typefaces aligns squarely with this sentiment:

Find typefaces that are in our general realm of readability—the ones we use and read on a daily basis. Anything that hits on those points on the “legibility spectrum” will be best, and will be easier to read. The farther we veer away from that, the more difficult our designs will be to read. —Jason Santa Maria

This is sound advice. And, with the advent and wide availability of web fonts, our choices—indeed, our outlook as web typographers—has drastically improved.

So how do we choose?

Well, in my mind, typeface selection is both an art and a science; dependent, as it is, on equal parts intuition and sound rational analysis. Here are a few guidelines that will help you navigate the vast sea of typographic choice:

  1. Start with one type family (a font with a set of different styles) and challenge yourself to make the most of it. As Robert Bringhurst states:

    Most pages, and most entire documents can be set perfectly well with only one family of type…if you restrict yourself to faces with in one family you can have variety and homogeneity at the same time.

    Frutiger is a famous example of an extensive and versatile type family.
    Frutiger is a famous example of an extensive and versatile type family.
  2. As a beginner, use no more than two typefaces in one document. As your typographic sensibilities mature, you’ll be able to effectively break this rule, but until you know what you’re doing abide by it.

    When pairing typefaces, look for contrast in letterforms (serifs and sans–serif combinations being the most obvious), and assign your faces consistent roles (headlines, texts, etc.) to establish a clear hierarchy.

    The pairing of serif and sans-serif typefaces produces contrast 
      and visual interest.
    The pairing of serif and sans-serif typefaces produces contrast and visual interest.

    I often find it helpful to look at the relationships between fonts created by the same designer, or foundry (in the case of smaller independent shops.) Often, these faces harmonize well given that they were created with a similar point of view.

  3. Choose a good, high-quality typeface and avoid free fonts if you can. High-quality faces feature:

    • Full glyph-sets (no missing characters or punctuation)
    • Support for multiple languages
    • Lining, old–style, proportional, tabular numbers
    • Correct letterspacing and kerning, hinting (rendering instructions)
    High quality typefaces contain many features that are 
      generally omitted from free fonts.
    High quality typefaces contain many features that are generally omitted from free fonts.
  4. Read your content to determine the mood it conveys. Describe this mood using a list of adjectives. Find typefaces that you feel are accurately described by these adjectives. Essentially, you want to ensure that your typeface conveys the appropriate feeling.

    One great way to determine the mood of your typeface
      is to set a few key adjectives set with the faces your considering and
      evaluate the results.
    One great way to determine the mood of your typeface is to set a few key adjectives set with the faces your considering and evaluate the results.

    One great way to do this is to set a few of your key adjectives set with the faces your considering and evaluate the results. This will often help narrow them down. This works quite well for the selection of display fonts, which you’d use for headings/titles.

  5. Seek advice and use available tools. There are several great services on the web that can really help guide you in the right direction as far as selecting typefaces is concerned.

    FontFont allows you to filter faces by “intended use” (i.e. “small text,” “software & gaming,” or “web & screen design.”)

    FontFont web font service screenshot

    At Typekit, you can browse for faces using descriptive keywords like “clean”, “humanist,” or “techno.” You can also browse by language support, should that be a concern.

    Typekit web font service screenshot

    And with Webtype you can browse (among other ways) by “intended” size, which is actaully quite brilliant given the typefaces, at least traditionally, were desinged to be used at specific sizes. The also license Font Bureau’s RE type families which are specifically designed for optimal display in low resolution settings.

    Webtype web font service screenshot

Billy Whited was an 8th Light UX Craftsman from March 2011 - April 2012.