Typography

Font Matrix – See & Pair Typefaces Like Never Before

The Font Matrix is a different way of seeing typefaces. Knowing about it earlier would have saved me a lot of time and guessing, when it comes to choosing, but especially to combining typefaces. It is based on the work of Indra Kupferschmid, and helped me to finally make more sense of type categorizations. Now, I want to share with you what I have learned with it.

In this video and article, I’ll explain to you:

  • what the Font Matrix is,
  • how you can apply it in your work as a designer, and
  • become faster and more confident in your type combinations.

TL;DR: Try to describe typefaces based on their form model (dynamic, rational, or geometric), if they are contrasting or not, and if they have serifs or not. Combine typefaces that have the same form model or are very different. Avoid similar appearances with diverse form models. Take this all with a grain of salt, don’t forget to have fun and discover 😉.

Common advice in combining typefaces is little helpful

You often hear you should mix sans-serif and a serif typeface. I get that this is a helpful suggestion for beginners, and in a lot of cases it might achieve pleasant results. But is it a guideline that really always works? Can you mix any sans-serif with any serif typeface? Do the serifs make such a big difference? For example, Source Sans, Helvetica, and Futura are all categorized as sans-serif. But they feel quite different when comparing them.

All these fonts are sans-serif, but they feel quite different. Why?

On the other hand, Garamond, Bodoni, and Memphis all have serifs. And they seem very diverse as well. Again, are the serifs really the most crucial part here?

All serif fonts, and yet they create mixed moods.

Luckily, there is a way how you can see typefaces differently, see beneath the superficial. To have a guideline to make better decisions when looking for harmonious matches for any typeface. Too simple and too complicated type categories that haven been pulled over your eyes to blind you from the truth.

Blue Pill or Red Pill? Also, great font choice for the blue pill.

Do you want to know what it is? The font matrix is everywhere. It is all around us. But you’ll have to see it for yourself. You take the blue pill, the story ends, you wake up in your bed, and you see in typefaces whatever you want to see. You take the red pill, and I’ll show you how deep the rabbit hole goes …

I had to do that, 😂 all in for a little drama 😉. Well, then let’s take that red pill.

Less guessing, when pairing fonts

As Indra Kupferschmid, the author and typography professor behind this approach, said in my conversation with her: “It’s a great adventure to combine typefaces, and no-one should be afraid of it!” I totally agree with her. There are no absolute rules in design, it always depends on your project, circumstances and skills. Typography police won’t show up, when you make an inappropriate type combination, enjoy pairing type, and don’t take it so seriously.

But besides having fun, going for your gut feeling can be a hard, when you did not train it yet. When you always feel like guessing, and are unsure why certain type combinations work better than others. It seems to me that the advice or recommendations behind pairing fonts is either super vague or just random. With gigantic font catalogs already existing, and new ones coming out each day – how can you find what you look for? And this brings us to classifications.

Typographic power to your inbox!

  • Font Friday: I personally recommend one typeface per week and for what use case it’s best. Every second week I recommend a free font.
  • Pimp my Type: Articles or videos from the YouTube channel that will help you to pimp up the type of your next design project.
  • No Comic Sans, Open Sans 😅 or any other BS, like annoying ads. Your email will only be used for the newsletters, unsubscribe anytime.

Classification is helpful but only takes you so far

Very broad categorizations like sans-serif and serif are a good starting point, but they still leave us with too many options. When you pick sans-serif on Google Fonts, you still get more than 500 typefaces. Besides other filters, a mental model that would help you assess these, would be great.

Broad categorizations are a good first step, but still leave you with many options

On the other hand, historic classifications are dated, inconsistent, and not very practical. For example, the serif typefaces Bodoni from 1786 is classified as “Modern” and Times New Roman from 1931 as “Transitional Old Style”. Without having more type history background knowledge, it is super confusing, and little helpful when your goal is to pick a typeface. The historic approach eventually falls apart, when it comes to type designs that mix influences from various periods of time.

Three-layered system for describing type. 1 Skeleton: Form model, dynamic, rational or geometric. 2 Flesh: Contrast & Serifs, linear or contrasting sans-serif or serif. 3 linear or contrasting sans-serif or serif, like the shape of serifs, decorative features, tags, and other associations.
A three-layered system for describing type without the historic baggage.

This is why Indra Kupferschmid developed a way how to describe a typeface that is less based on the track of history and more open towards overlap. It is a three-layered system:

  • Layer 1: Skeleton (from model)
  • Layer 2: Flesh (contrast & serifs)
  • Layer 3: Skin (finer differentiation)

This seems a bit complicated now, but bear with me, you will soon see how this evolves into something brilliant!

Layer 1: Skeleton – Form model

There are three basic form models, the dynamic, the rational, and the geometric form model. Dynamic forms have diagonal contrast and open shapes. The rational form model has vertical stress and closed shapes, and the geometric form model is seemingly monolinear, with no contrast. It’s clearer with contrast and serifs, but you can still feel it in the sans-serif shapes.

This might be a bit confusing still, but if we write a word in these different form models, you will see it clearer. Let’s use “Megatypos”, because, you will always find a lot of typos in my content 😉 (and it contains different letter shapes).

1. Dynamic form model with feels friendly, open, approachable, flexible, natural, democratic, warm, inviting, personal, timeless
Open apertures of the e, a, and s, the o is angled (hard to see in sans-serif)

Looking at the dynamic form model, you can see the open shapes, the diagonal stress. And this all adds to the friendly, open and approachable feeling dynamic typeface create. Indra associated the form models with certain adjective. This is super helpful when picking a typeface that should follow a certain mood. Naturally this mood might shift when there are serifs or no serifs, or other stylistic features, but it’s a good starting point.

Rational form model set in Helvetica Neue with closed apertures. It seems rational, orderly, reserved, noble, elegant, serious, stiff, correct, rigorous, authoritative
The shapes of the e, a and s are rather closed, the o shows vertical stress (again, not that easy to see in sans-serif)

With a rational typeface, you see these apertures are closed, which then creates a more orderly, reserved or serious feeling.

The geometric form model set in Futura. It seems Geometric, simple, technical, modern, functional, informal, systematic, sober, modernism, clean
Very constructed letter shapes, like the circular o and e, the t is a simple cross.

And with the geometric typefaces the apertures are not that important, it is more how constructed the letter shapes are. Like the circular e, g, a, p, and o, or the simple t. This creates a clean, modern and functional appearance.

Now, knowing these underlying form models should make it easier for you to pinpoint the differences between the three sans-serif typefaces from the beginning of the article, and take you one step closer towards seeing type more differentiated.

Layer 2: Flesh – Contrast & Serifs

In the second layer, the Flesh, we’re adding contrast and serifs to our descriptions. This will make the skeleton even clearer.

Before, I showed the dynamic form with no contrast (linear) and sans-serif. Here, we are adding contrast and serifs. This changes its appearance, but still the same skeleton, open apertures, diagonal stress remains, just with more flesh on top.

Our rational linear sans-serif becomes a rational contrasting serif. Helvetica turns into Bodoni 🤯 same skeleton, different flesh.

The geometric linear sans, becomes contrasting with serifs added on top. Still geometric from its construction.

Not everything aligns here, proportions, x-height, and some letter shapes differ. But don’t be irritated by that. Focus on the form model, and you should see, that at its core the same principles still apply.

Using the Font Matrix for better font pairs

When we arrange these two layers in a grid, with the skeleton in the columns, and the flesh in the rows, the Font Matrix is revealed!

And what becomes obvious here is, that not the serifs are the thing, that bind it all together. It’s the bare bones underneath it. This is why typefaces with the same form model regardless of sans or slab or serif make a good match. The columns fit together.

Combine typefaces according to their form model

Or that typefaces that are very contrasting make a good match. When, the columns are next to each other, it depends.

Go for contrast with very different skeleton and flesh

But what really does not work, is when they are in a row. That’s when they are very similar on a superficial level, and you will be able to hide this by choosing different weights to make it less dramatic. But underneath it all, they are vastly different.

Don’t pick typefaces from the same row 💔 It will break my heart and your design.

Coming back to the various sans-serif and serif typefaces from the beginning. Now you should be able to see their skeleton and have a hint if they are good matches based on their construction. The key is the first layer, the form model.

According to their form model, these typefaces are a match.

Once you have seen this, you can not unsee it. This now makes clear why Bodoni and Helvetica belong together. And it also makes the differences of the all so similar sans-serif and serif typefaces from before more obvious.

You still have to do the work

Please, bear in mind that these are some pretty obvious examples here and the whole system is a starting point. You still have to do the work, practice, apply it in your design, and check for your font combination:

  • if it fits to your project,
  • how close you combine them,
  • how the proportions are,
  • how large x-heights are,
  • what weights or styles you’re using, and so on.

But it is a better mindset and way of looking at typefaces when finding matches, than just saying mix any sans with any serif typeface.

Layer 3: Skin – Finer Differentiations

Our final layer does not serve the font matrix, it serves to better describe the typeface. Here we can add some additional finer differentiators. Like the shape of the serifs, decorative features, such as stencil, inline, shadow, or genre-like descriptors that might be associated with the typeface (e.g. western, horror, or sci-fi).

You still feel that this is a geometric typeface, but now you can add additional descriptions to it

Practice this approach with me

There is much more to add to this, to have better ways to combine typefaces. This is why I decided to offer a complete online course to help you apply the Font Matrix in your daily practice as a designer. With many examples and exercises you will become more confident in finding a good match. Especially in these tough scenarios, where you want something that matches a given typeface, only with or without serifs or for small or large sizes. If that sound’s interesting to you, check out my course Pairing Typefaces like a Pro. But you really don’t need to wait for that, you can start applying it right away in one tiny step.

Pairing Typefaces – Online Course

Confidently pair fonts that fit and support your design, without spending hours browsing. Enroll now

Start seeing type differently

The best way in becoming better in seeing the differences in typefaces, is starting to look for them – everywhere. So I challenge you to go out into the wild and spot any typeface on a poster or sign and see what form model lies underneath it.

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

Take a picture, describe if you see it as dynamic, rational or geometric, and tag me on Twitter @glyphe or Instagram @pimp_my_type, if you want to. Make it a game and try to discover typefaces with a new perspective.

Glitches in the matrix

After all my excitement about the Font Matrix, please bear in mind that this is not a perfect system. Not every typeface fits in there, and you won’t be able to apply it in every scenario. And soon you will find plenty of cases that are in between the different form models or the other layers. And that’s okay.

Many typefaces have various influences, and can not be clearly put into one category. Roboto for example. It originates from a rational form model, but the apertures have been opened to make it more legible and a little friendlier. So I would call Roboto rather rational. In the Font Matrix, it would live between the dynamic and the rational column, but closer to the rational one.

Helvetica feels rational, Roboto feels rather rational, Roboto Slab feels rather dynamic
Look at apertures, Helvetica is clearly closed (rational). Roboto is a little open, but still restrained (rather rational). Roboto Slab more open (rather dynamic).

On the other hand, Roboto Slab feel a lot more dynamic. Since the added serifs opened the apertures even more. Here, I would describe Roboto Slab as rather dynamic. In my first graphics about the Font Matrix, and also in the video, I showed Roboto Slab as a rational linear serif typeface (see below). But it’s not. So I replaced it with Kulturista, which is much stricter and a better orientation point. Indra made me aware of it, so thanks for that. This space in between shows, that you could combine Roboto with something that’s more dynamic and something that’s more rational.

Roboto Slab was a not a really clear example for a Rational Linear Serif typeface in the first version of my Font Matrix graphics.

But in the end, the most important thing is, what you do with that information. See this as an opportunity to change your visual perception and as a guideline to make better decisions. Even Indra Kupferschmid says you should not see this as a straight jacket. It is one way, not the only way.

Article on Google Fonts Knowledge

I wrote a variation of this article for Google Fonts Knowledge. I really enjoyed the process writing it, and getting feedback by so many great people. One major addition there is the case study how to combine typefaces step by step with a tricky example.

What monospace font pairs well with the typeface Bitter? Illustration from my article on Google Fonts Knowledge

Learn more

More about this system, and why Indra Kupferschmid developed it, here:


I hope this was helpful to you. Tell me in the comments below how you feel about the Font Matrix, play around, discover and evolve!

Typographic power to your inbox!

  • Font Friday: I personally recommend one typeface per week and for what use case it’s best. Every second week I recommend a free font.
  • Pimp my Type: Articles or videos from the YouTube channel that will help you to pimp up the type of your next design project.
  • No Comic Sans, Open Sans 😅 or any other BS, like annoying ads. Your email will only be used for the newsletters, unsubscribe anytime.

2 Comments

  1. Wao! great extra tips and a very fantastic article. So clear and easy to follow. I like all these pairing combinations. I will try to use these tips in my upcoming projects.
    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *