Fonts Icons Knowledge FAQ

Pairing typefaces using

the font matrix
The following guest a!icle was wri"en by Oliver Schöndo#er*

Background reading: Topics in this a!icle

Pairing typefaces by the same type designer or type foundry

Choosing type

Pairing type

The single biggest challenge we face when pairing type is choosing a secondary typeface that’s
Essential terms
di$erent enough from our primary choice, but not too di$erent, as described in our a!icle “Pairing
typefaces." This can be a challenge, because it’s not always clear where the similarities and the
di$erences should lie.

In this a!icle, we want to share with you the concept of the font matrix—an approach based on the
work of typography professor Indra Kupferschmid. Understanding it can change your perception of
type and give you a framework to make be"er decisions when pairing typefaces.

Please bear in mind that combining type is not a science with hard and fast rules. It’s a creative
discipline and you can do whatever you think feels right for your project. Take the ideas shared in
Axis (in type design)
this a!icle as guidelines to make your own decisions in the great adventure of pairing type.
The angle of the “pen” in a
le"e#orm, usually implied
by the contrast of a stroke.
The problem with the current models for
classifying type
Before we dive into this di$erent way of describing type, let’s see what’s not ideal with the current
models. Organizing typefaces is impo!ant to make it easier to narrow down our selections. Simple
genre classi%cations, like serif, or sans serif, are a good sta!ing point. But they still leave you with a
lot of typefaces to choose from.

Sans serif
A typeface designed
without serifs. Typically,
sans serif faces have lower
contrast and larger x-
heights than serifs.
 Serif

RagstoneRagstoneRagstone
Either the mark or line that
can sometimes appear at
the end of a character’s
stroke, or the collective
name for typefaces that use
serifs in their design.

ALLSANSSERIF
These are all sans serif typefaces (Source Sans Pro, Helvetica, Outfit). Same genre, but they leave a quite different impression.

Contrast
The di$erence between the
thick and thin pa!s of a
stroke. A monolinear
typeface has low stroke
contrast, and is the
opposite of a high contrast
face.

These serif typefaces share the same genre classification as well, and still they appear quite diverse (Alegreya, Bodoni Moda,
Memphis).

On the other hand, historical classi%cations can be more %ne-grained, but require a li"le Monolinear
background knowledge. They can be confusing in their terminology and have plenty of regional
A typeface with strokes of a
variations. Focusing on details, such as the exact shape of serifs, which are not necessarily crucial
consistent thickness; i.e.,
to the overall impression of a typeface, makes them less practical. In fact, the historic approach can
li"le or no contrast.
become less useful in an age where type designs mix in&uences from various periods of time.
Typically, sans serifs tend to
So how can we describe typefaces more accurately than with the genre classi%cations, but without have less contrast than
being dependent on historic background knowledge? Kupferschmid approaches it with a three- serifs.
layer system:

Layer 1: Skeleton (form model)

Layer 2: Flesh (contrast & serifs)
Layer 3: Skin (%ner di$erentiation)

Geometric
A genre classi%cation of
typefaces—almost always
sans serifs—so called
because of their geometric
construction.
 Humanist, or Old Style
A historical classi%cation for
typefaces that draws
inspiration from Roman
le"ering and calligraphy to
include forms that
reference the stroke of a
pen.

A three-layer approach for describing typefaces based upon the work of Indra Kupferschmid.

Let’s take a look at each individual layer to understand what it means and how it can help us choose
and pair typefaces.

Layer 1: Skeleton (form model) Text, or copy

The content itself—the
thing we set in type.
This is the most crucial pa!: referring to the structure underneath a typeface. There are three basic However, the word “text”
form models: can also imply the text size,
which is then
Dynamic
interchangeable with the
Rational
term “body”.
Geometric

Dynamic forms show open ape!ures, while the rational form model has closed ape!ures. The
geometric form model is represented with constructed le"er shapes. These shapes can be
explained by di$erent writing tools, but we won’t focus on that here.

DYNAMIC RATIONAL GEOMETRIC

Monospaced
A grouping of typefaces in
which all or most characters

a OI
take up the same amount of
horizontal space.

OPEN CLOSED CONSTRUCTED

APERTURE APERTURE

The three different form models shown with serif typefaces. X-height
The height of the lowercase
It’s easier to distinguish the form models with contrast in serif typefaces. But you can still see them
characters that have no
in sans serif shapes, too:
ascenders nor descenders,
which indicates how tall or
sho! the type appears.
 DYNAMIC RATIONAL GEOMETRIC

a
Width
The amount of horizontal
space taken up by a
typeface’s characters. A
condensed face takes up
considerably less space
than a wide face.

OPEN CLOSED CONSTRUCTED

APERTURE APERTURE

The three different form models shown with sans serif typefaces.

Let’s take a closer look at each form model and make it more obvious by se"ing a word. We’ll use
the word “Ragstone” because it contains various le"er shapes:

Weight
©DYNAMIC@LINEARSANS
The overall thickness of a
font’s stroke. The most
common weights are
regular and bold, but can
cover extremes from the

Ragstone
very light to the very heavy.

OPEN DIAGONAL
APERTURES AXIS

Style
The dynamic form model comes with open apertures of the “e,” “a,” and “s,” as well as the diagonally angled “o” (hard to see in Regular, italic, oblique, and
sans serif, set in Source Sans Pro).
small caps are all examples
Looking at the dynamic form model, you can see the open shapes, and a very subtle diagonal axis. of styles that can exist
This all adds to the friendly, open, and approachable feeling that a dynamic typeface creates. within a single typeface.
Kupferschmid associated the form models with ce!ain adjectives. They can be helpful when picking See also: Stylistic sets.
a typeface that should follow a ce!ain mood. Naturally, this mood might shi' when there are serifs
or no serifs, or other stylistic features, but it’s a good sta!ing point.

@RATIONAL@LINEARSANS
License

This content is owned by Google

and is licensed under Creative
Commons: CC BY-SA 4.0

Ragstone CLOSED
APERTURES
VERTICAL
AXIS
To contribute, see the source
%les on GitHub
The shapes of the “e,” “a,” and “s” are rather closed, and the “o” shows vertical axis (again, not very obvious in sans serif), set in
Helvetica.

With a rational typeface, we can see that these ape!ures are closed, which then creates a more
orderly, reserved, or serious feeling.

©GEOMETRIC@LINEARSANS

Ragstone CONSTRUCTEDFORMS
(circulara,a,o,e)
CROSS
SHAPED

Very constructed letter shapes, like the circular “o” and “e.” The “t” is a simple cross (set in Outfit).

And with the geometric typefaces, the ape!ures are not that relevant for determining the form
model. Also, there is no obvious axis. It’s more about how constructed the le"er shapes are. Like
the circular “e,” “g,” “a,“ and “o,” or the simple “t.” This creates a clean, modern, and functional
appearance.

Now, knowing about these underlying form models should make it easier for you to pinpoint the
di$erences between the three sans serif and serif typefaces from the beginning of the a!icle, and
take you one step closer towards to di$erentiating type.

DYNAMIC RATIONAL GEOMETRIC

RagstoneRagstoneRagstone

RagstoneRagstoneRagstone

Knowing about the different form models makes it easier to describe and distinguish the typefaces from before.

Layer 2: Flesh (contrast and serifs)

In the second layer, the &esh, we’re adding contrast and serifs to our descriptions. This will make
the form model even clearer.
Describing Alegrya as a dynamic contrasting serif typeface.

Before, the dynamic form was shown with no contrast (linear) and sans serif. Here, contrast and
serifs were added. This changes the appearance, it suddenly seems more traditional, but still the
same open ape!ures and diagonal stress from the skeleton remains. It’s just more visible with the
&esh on top.

Describing Bodoni Moda as a dynamic contrasting serif typeface.

The rational linear sans serif from before turns into a rational contrasting serif.

©GEOMETRIC@CONTRASTINGSERIF

Ragstone CIRCULAR
BOWL
CONSTRUCTEDFORMS
(circulara,o,e)

Describing Candida as a geometric contrasting serif typeface.

The geometric linear sans serif, becomes contrasting with serif, while still being geometric from its
construction.

Layer 3: Skin ($ner details)

Kupferschmid includes %ner di$erentiators in the top layer. The shape of the serifs, decorative
features (such as stencil, inline, shadow), or genre-like descriptors that might be associated with
the typeface (“western,” “horror,” “sci-%,” etc.). Kupferschmid leaves this very open. This layer is
not necessary for the font matrix, but it completes our typeface description.

@RATIONAL@CONTRASTINGSERIFINLINE,TRIFURCATEDSERIFS,THORNS,SPOOKY

INLINE THORNS

Ragstone CLOSED
APERTURES
VERTICAL
AXIS
TRIFURCATED
SERIFS

Describing all three layers of the display typeface Rye. You can still see the underlying first two layers, even though the third layer
is taking the most attention.

Using the font matrix for pairing type

Now, when we arrange the %rst two layers in a grid, with the skeleton for the columns, and the &esh
for the rows, the font matrix is revealed:

DYNAMIC RATIONAL GEOMETRIC

CONTRASTING
SANS Ragstone Ragstone Ragstone

Ragstone Ragstone Ragstone

CONTRASTING
SERIF

Ragstone Ragstone Ragstone

LINEAR
SANS

Ragstone Ragstone
LINEAR
SERIF Ragstone

Typefaces used (top to bottom) Dynamic: Minerva Modern, Alegreya, Source Sans Pro, and Bitter; Rational: Arya, Bodoni Moda,
Helvetica, Zilla Slab; Geometric: Tenor Sans, Candida, Outfit, Memphis.

Seeing the typefaces arranged in this way makes it obvious where the similarities and di$erences
lie, and opens up three guidelines we can utilize to pair typefaces. Let’s explore each of those in
turn.
1. Pair typefaces with similar form models

Combine typefaces according to their form model.

Typefaces from the same form model most likely will go together. Their construction is similar, but
the layers added on top are di$erent.

2. Pair typefaces with varying contrast and serifs

Go for contrast with very different skeleton and flesh (diagonal combinations).

Diagonal combinations create contrasting pairs. The typefaces are so di$erent that they won’t get
in the way of each other.

3. Avoid combinations with di%erent form models, but the

same contrast and serifs
 Is it different or is it the same? Avoid combining typefaces from the same row.

Combining typefaces from the same row will create an irritating result. This is because they’re
similar on a supe#icial level (the &esh), but in their form model, they’re diverse.

Look for form models everywhere

The most crucial pa! of this system is recognizing the form model underneath a typeface. If it has
serifs or not, or if it’s linear or contrasting, is easy to see. Make this a regular exercise, like a game,
to train your eyes and perception of type. Take a look at whatever typefaces you encounter and
describe their form models. Is it more dynamic, rational, or geometric?

Try to spot the form model in the wild! Left to right: dynamic, rational, and geometric.

Combining typefaces step by step

When it comes to combining typefaces, this is the process we recommend, using the ideas behind
the font matrix:

1. Decide on a primary typeface (for more on this subject, please see “A checklist for choosing
type”). What role has the primary typeface? Is it body text, headings, or for something else?
2. Describe the %rst two layers of your primary typeface.
3. Decide on a role for your secondary typeface. What should it add to your primary typeface?
4. Decide if you want the same or a or contrasting form model for the secondary typeface.
5. For your secondary typeface, think of a generic classi%cation, like serif or display, you want to
try.
 6. Browse a preferred font catalog, %ltered by your genre, looking for the desired form model,
contrast, and serifs.
7. Try out the combination in your design.

Let’s put this into practice with an example. Let’s say my primary typeface is Bi"er, and its role is
body text. Let’s describe the %rst two layers of it.

Steps 1 and 2: The primary typeface is Bitter, used for body text. It’s a dynamic linear serif typeface.

Now we look for a secondary typeface for inline code in the body text. Bi"er does not come with a
monospaced style. We want the secondary typeface to feel very similar to the primary choice, while
being monospaced.

Steps 3 to 5: We look for a secondary typeface for inline code that’s dynamic, linear and monospace.

Let’s only browse the monospaced typefaces on Google Fonts and pick some candidates. When we
take a look at our %rst selection and evaluate their form model, we see that Fira Sans might %t best
to what we’re looking for.
Step 6: Our possible candidates and their form models.

Let’s see how this looks in an actual sentence. As suggested, Fira Code works best. It seamlessly
integrates and meets the conditions of our brief. Space Mono might work as well, if we were looking
for a contrasting pair.

Step 7: Evaluating our options in an actual sentence. Fira Code fits what we were looking for.

Limitations of this system

This is not a pe#ect system. Not every typeface %ts into it, and you won’t be able to apply it in every
scenario. The examples in this a!icle are slightly more extreme, and soon you will %nd plenty of
cases that are in between the di$erent form models or the other layers. In this case, try to describe
it as “quite dynamic,” or “semi-rational,” for example.
From its form model, Roboto Slab does not meet all the criteria of an obvious rational typeface. But overall it still feels quite rational
with its narrow proportions and vertical axis.

When it comes to more striking display typefaces, script, handwritten, or blackletter, don’t spend too much energy training to put
them into the matrix. They will most likely be very contrasting anyway.

When applying it to your design, other factors come into play, depending on how close the
combination is, such as a similar x-height, or a similar or di$erent width. Also, you can improve a
less-than-ideal combination by using di$erent weights or styles.

So see the font matrix as a guideline to make pairing decisions, but don’t drive yourself crazy. Even
Indra Kupferschmid says that it is not binding and should not limit your creativity. It is one way—not
the only way—and hopefully this will suppo! you in %nding your way.

* Content is owned by Google. Thank you to Indra Kupferschmid for reviewing this content.

Further reading:

Exploring x-height & the em square

Google Fonts is a library of 1527 open source font families and Fonts Fonts GitHub
APIs for convenient use via CSS and Android. The library also Icons Icons GitHub
has delightful and beautifully crafted icons for common actions About us Material Design
and items. Download them for use in your digital products for Featured Google Design
Android, iOS, and web. Noto Fonts Twi"er
Knowledge Fonts blog

Privacy Terms of service