Font Match

Pairing examples

In this section, I give some examples of typefaces that match using the share functionality of the app. By clicking on the links, you will load the app in a certain state. At the bottom of the article, you can find some notes.

Same families

Typefaces from the same super-family usually match. In some cases, typefaces from the same designer or foundry may also be compatible. These are a few examples to prove my point:

Different type

This list includes serif/sans-serif pairs, sans-serif/monospace, etc.

Same type

These typefaces share many similar qualities, something that might even be stated by the designers in their descriptions.

Display / body

Random notes that I should totally put in a different page

If you want to contact me, use the form in my blog or my twitter.

Some reasons to pair typefaces

  • You want to use a similar typeface to cover a language that the original typeface you chose doesn’t cover.
  • You have a requirement to use both a serif and a sans-serif typeface. This may include image captions, quotations, etc.
  • You want to display code examples in a monospace typeface. It would be awkward to show code snippets in Palatino.
  • You chose a legible typeface for body text, but you want something with more character for titles or other display text.
  • You want to establish visual hierarchy.
  • You really like the Roman version of a typeface, but it doesn’t have an italic version. The same can be true for weights. This is kind of a stretch, I admit it.

How to use this app

You can view this app more as a validation tool and less than something that will help you discover new combinations—although nothing is stopping you from doing that. If you want inspiration, open something like FontPair, typewolf reviews, or one of the many lists on the web. You can also leverage machine learning with a tool like FontJoy to find similar typefaces, and then validate the results yourself with this app. I hope that one day the lists on this page will be another useful resource.

When you click on an example, take a look at the on top view and then at the inline view. In the first, you’re looking for overlaps. In other words, you’re trying to see if the fonts share a similar skeleton. In the second, you’re looking for typefaces that have the same color, if they blend without disrupting the reading. This is not always necessary, it depends on your use case. For example, you may not want to use them in the same line. It’s also useful to press the switch fonts button a few times and take a look at the heading/paragraph or inline views to see how different they are in width.

Disclaimers & Info

  • At the moment, I’m a bit paranoid (for security reasons), and I allow you to copy only the Latin alphabet (A-Z, a-z), numbers, and spaces when you click the share button. I plan to change this in the future, along with a ton of other things that I will never do. 🤔

  • Typeface pairing is something subjective (one may argue that is unnecessary), and, as a result, you may not agree with my lists.

  • I created the links on desktop, so If you view them from mobile, the alignment may be different.

  • The installed fonts in the select elements is a guess and works only on Chrome-based browsers on desktop. There isn’t a standard way of getting the installed fonts in a web application due to tracking issues. There are only workarounds.

  • The project is not open source at the moment, but because it has source maps in production, you can view the majority of the source code with Chrome DevTools. Open the DevTools, go to the Sources panel, open the webpack:// dropdown, and finally the folder with the full stop. You can do this for any Gatsby site that hasn’t changed the default settings. 😲