Your Guide to (Pairing) Typefaces

Your guide to (pairing) typefaces ✌

Courtesy of @tomkoszyk
⠀
Pairing fonts is much easier than you can think 😏
⠀
There are very few rules carved in stone you need to remember (x-height for example). That being said, to make a perfect match you’ll need a lot of experience and a good eye.
⠀
Here are things i consider before pairing typefaces⁠⠀👇
⠀
1️⃣ Do i really need to? ⁠⠀
The first question is do you need another typeface? Maybe your goal can be achieved with only one, just used in a good way? ⁠⠀
⁠⠀
2️⃣ Style⁠⠀
Font styles need to match. There are two ways you can go, either pair fonts with similar style, or choose one distinctive and one neutral.⁠⠀
⁠⠀
3️⃣ Variation⁠⠀
If you decide to pair fonts you need to make sure they’re distinctive enough so people can tell difference.⁠⠀
⁠⠀
4️⃣ Rhythm⁠⠀
Both typefaces need to have matching proportions, so it’s not disturbing to an eye, switching between them.⁠⠀
⁠⠀
5️⃣ Limits⁠⠀
Do not overdo, limit the number of fonts you use! ⁠⠀

Do you need more than one typeface?

The first question is why. What do you want to achieve by adding another typeface?
As the famous saying states: “Less is more”. Maybe you don’t need to look for another typeface. Maybe another font from the same family would work well.

Roboto

Roboto is a very extended typeface that features different variations. The whole family comes in basic, slab, monospace and condensed styles, making it easy to set almost every text using only this one family.
Here’s an example of how Roboto Slab title works sit Basic Roboto font as a text typeface. In addition to that, we have a narrow side note set next to it. As you can see — one typeface family serving all functions.
Note
Roboto featured also a Condensed version which is great for setting side notes.
To be honest — basically, every narrow paragraph, because it helps to put more character in a line for a better readability.

Choose complimentary typefaces

If you decide to use multiple typefaces in your design, make sure they’re complementary, or at least neutral.

Grobold & Times
Won’t work 14 ith Times New Roman no matter how hard will you try. Both of them have distinctive, opposite styles.

Bodoni & Helvetica
Helvetica will work with distinctive typefaces cause of its neutral character. It works well with a very classy Didot.

Avoid pairing similar fonts

A decision of bringing an additional font should always be justified by a need: to build more hierarchy, fulfill specific functions, etc. If you choose to use two similar typefaces the chances are those needs won’t be fulfilled.
Gilroy & Montserrat
When you can (probably) spot a difference it is very small. Such a tiny difference tends to be interpreted as a mistake rather than a sound design decision.

Serifs & Sans Serifs (rhythm)

Mixing serifs & sans-serifs is a safe choice, nevertheless, they need to match.
Gilroy, Cochin
First thing to check: if the x-heights of both fonts match, thus creating a good flow

Limit number of fonts

In my opinion, two to three typefaces are an absolute maximum. You’re not attempting to make a patchwork quilt, right?

Bonus — useful designer tools for everyday usage:

FlowKit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Crello — a free graphic design editor that helps create images for social media, print, and other web-based graphics.
Leadpages — lets you build beautiful, high-converting websites, unlimited landing pages, pop-up forms you can add to your other websites.
FlyWheel — is managed WordPress hosting built for designers and creative agencies.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.