by Zell Liew

The act of choosing two typefaces is probably the first (and often most difficult) task you do when creating a new design. Many people get stuck here, myself included.

Recently, I discovered a simple method to pair typefaces effectively and I’d love to share them with you. (Hint: it’s a 3×3 grid).

There’s one prerequisite to use this 3×3 grid (which I will reveal shortly) — knowing how to categorize typefaces. So, let’s start there.

Categorizing typefaces

On a broad level, typefaces can be broken down into the six categories. They are:

  1. Sans-serif
  2. Serif
  3. Slab-serifs (or Egyptians)
  4. Monospace
  5. Script (or Cursive)
  6. Display (or Decorative)

You can split typefaces into the first three categories by looking at the style of the serif.

If the typeface contains no serifs, they fall into the sans-serif category. (sans means without). Examples of sans-serif typefaces include Helvetica and Gill sans.

Srrogk5YjZTvJzgrop3s6yJ9aWmFVVHif22t

If the typeface contains serifs that look blocky, they fall under the slab-serif category. (slab means a large thick block). Slab-serifs are also called Egyptians even though there’s no relationship between the serifs and Egyptian writing. Examples of slab-serifs include Archer and Museo Slab.

Q0nuhT1hzFqbDfv0CQNqGC3UEb5OlJc4QThn

Any other typeface that contains serifs fall under the serifs category. Examples include Garamond and Georgia.

HCsPE5HFKxTg-iq8u3SpZ2i5RK1ooanyfNid

Monospace typefaces are no strangers to us developers. They’re typefaces whose characters occupy the same amount of horizontal space. They’re often used in tabular data and code. Examples include Menlo and Monaco.

aTPjCwAXyrz9q1ONmMETDe35u2amWYyEg1co

Script (or cursive) typefaces are often calligraphic in nature. They’re often used for short headlines, invitations and expressive text. Examples include Dancing Script and Lobster.

e2Xte4EBQR5XbRe6VYjkhU-mvaMb6xXLC02I

Finally, display typefaces are typefaces that are only used for large headlines. Many display typefaces are serif and sans-serif versions that are specially tweaked to look good at large sizes. Display typefaces also include ornamentals and decoratives, which can come in all sorts of form and styles. Examples include Freight Display and Abril Fatface.

FUbeMSixHmQojUmj2ryEDmlWB7UWNiwmz7j0

Now you know how to classify typefaces into six major categories, which is great! Unfortunately, these major categories are too broad.

To pair typefaces effectively, we often have to drill in deeper into the subcategories. We’re only going to look at sans-serifs, serifs and slab-serifs as we drill deeper since most typeface choices are made there.

Things begin to get confusing when you begin to subcategorize. There’s a lot of subcategories, including but not limited to humanist, neo-humanist, old style, grotesque, neo-grotesque, transitional, geometric and modern.

Remembering the names of these subcategories, differentiating between them and correctly placing typefaces in them are three major challenges people face, myself included. After much research, I noticed you can group these subcategories into a simple 3×3 grid.

bR6w9oL3266j1FYl8WPzU3uVYXVQ4Kva9yXm

To fill up the 3×3; grid, we can look at three properties of the typeface. They are:

  1. The letterforms
  2. The stroke
  3. The tilt

For the first two properties, it’s often enough to look at letters e and o. The third one is a layman term I came up with ?.

Let’s look at each of them.

ADVERTISEMENT

The letterforms

Pay careful attention to the shape of the letters, especially of the letters e and o. Do they look like circles or squares? If they do, we can immediately classify the typeface as a geometric typeface.

Geometric typefaces contain letterforms that are based off shapes. They look constructed as opposed to handwritten. Because of they seem constructed, they also give off a modern, cool and impersonal vibe.

The geometric subcategory is only applicable to sans-serif and slab-serif typefaces. So, we can fill up the 3×3 grid as follows:

ghRubrM1bmcGDYgBCeGUoTIjGuNYcyaMtCWV

Next, we look at the stroke.

ADVERTISEMENT

The contrast in strokes

The stroke of a typeface is lines that make it up. Pay attention to these lines. Do they vary in size between different parts of the letters?

KpVIWpvJXsmVU5yz8UDlJrk04TX3F2nlSRxP

When we look at the stroke of a typeface, we’re only interested in using it to categorize serifs. This is because it’s rare for sans-serif and slab-serifs to exhibit any difference in the stroke.

If there’s little stroke contrast (little difference between thinnest and thickest part), we can categorize the typeface as an old-style serif.

Old-style serifs are serifs that the oldest readable typefaces (according to our current standards. Blackletter comes before it, which is hardly readable now). They mimic handwriting and are thus calligraphic in nature, which causes their letters to tilt more (more on tilt later). Since they mimic handwriting, they’re often seen as real, empathetic and traditional. They are also known as humanist serifs.

On the other hand, if there’s huge stroke contrast, we can categorize the typeface as a Modern serif.

Modern serifs are deliberately constructed to stand out. Their letterforms often stand upright with zero tilt, which makes them cool and impersonal, like Geometric typefaces. They are also known as rational serifs and didones.

Finally, what lies between modern serifs and old-style serifs are transitional serifs. Their stroke contrast is distinguishably larger than old-style serifs, but not as much as modern ones.

H8j5A4UMOkbN1ZVpl0smx0cfgSGQD9FG45pd

After going through the stroke, our 3×3 grid becomes:

ScmmROG1F-qoX2JBAkOGywI1jNlBBWzzgZ6A

Lets move on to the tilt.

ADVERTISEMENT

The tilt

If you draw a line through the thinnest points of the stroke, you’ll see the stress of the letters.

L7Wa0YKlEd19hilGCBZ3NhxoC1XYrD0JoQM7

If you paid attention so far, you’ll notice that stress can only be used to distinguish serif subcategories because you need to draw a line through the thinnest parts of the letterforms.

Although it may seem pointless to look at stress since we already have sorted serifs into their respective categories, I found it helpful to distinguish between sans-serif humanist and grotesque typefaces.

Let me explain.

Letterforms with a diagonal stress (like old-style serifs) look like they’re tilted at an angle. Since they’re tilted, they mimic letters that are created by hand. (We don’t hold the pen perfectly upright, do we?).

Although the letters o and e can’t tell us if there’s any stress, we can look at other letters, especially those with shoulders, like h, m and n. If any of these shoulders looks as if they’re tilted (or if there’s any stress), we can categorize the typeface as a humanist typeface.

An example of a humanist sans-serif typeface that exhibits this behavior is Lucida Sans.

wfeA-bcbvsASY5RnjvxTBDvKLlPEdmzdjEFY

On the other hand, if the letters look like they’re upright, we can categorize them as grotesque typefaces. As you may imagine, grotesque typefaces fall between humanist and geometric typefaces.

Just to add to your typography vocabulary, grotesque typefaces are also called grotesk or gothic, depending on the language. So, if you see these names on a typeface, you’ll know immediately which category these fall under.

Want an example? How about Aktiv Grotesk? :)

10DBRhqEce8AvCBz2fmX5aCwWJim48DF8ySY

After looking at the tilt, we can finally complete the 3×3 grid:

P9O1GvEqWTHLiBAplk3Wni3epDyX-Q4QnM8U

And with that, we’re done with categorizing typefaces into their respective categories and subcategories.

Before we move onto the next section, I want to highlight that typeface classification is highly subjective. Everyone classifies typefaces differently, so you just have to decide for yourself. Some typefaces can fall into multiple subcategories too. One example is Proxima Nova, which can fall into all three sans-serif subcategories at the same time.

ADVERTISEMENT

Using the 3×3 grid

If you search around for typeface pairing rules, you’ll often come across the following two rules, among others:

  1. Pair sans-serif typefaces with serif (or slab-serif) typefaces
  2. Pair typefaces from the same era

If you follow the first rule, you automatically create contrast with your two typefaces, which is a good thing. I explain why contrast is so important in my typography course, Mastering Responsive Typography.

The reason why experts recommend you to pair typefaces from the same era (or even from the same designer) is because these typefaces contain similar letterforms. Similar letterforms create a sense of familiarity through repetition, which is why different typefaces can blend well with each other. (Read this article an explanation of why repetition creates familiarity.)

Coincidentally (maybe not!), our 3×3 grid helps you identify typefaces created in the same era without remembering the subcategories. It’s used this way:

iuY4jsokOk7SQRXsPTbjlmmliQELyDS1zsiv

(This is mind blowing, isn’t it? ?)

ADVERTISEMENT

Wrapping up

Today, you learned how to categorize typefaces into six major subcategories, and their respective subcategories. You also learned a technique to pair them (using the 3×3 grid).

Now go play around with the technique and let me know your thoughts in the comments!

This article as a sample of my responsive typography course, Mastering Responsive Typography. You can check it out, and also learn more about typography on my blog.