A Non-Designer's Guide To Pairing Fonts

9/29/22, 5:38 PM A Non-Designer's Guide to Pairing Fonts
(https://www.visme.co/)

(https://www.visme.co/jobs/)
Blog
(https://visme.co/blog/)
Design (https://visme.co/blog/category/mastering-
Inspiration the-art-of-design/)
A Non-Designer’s Guide to Pairing Fonts 1
Jan 18, 2016

Written by:
Nayomi Chibana
If you think learning how to combine fonts is a skill needed only by designers, think again. Whether
you're creating a presentation, typing a document or redesigning your resume, you're making
decisions about what fonts would look best together and in what sizes.
Choosing the right fonts for your design can mean the difference between a compelling, attractive
design and a boring, lifeless one.
Just think about how many times you've gone to the trouble of choosing something other than the
default Times New Roman or Arial for your projects. This is because fonts matter in the overall
visual impact of your design, and each communicates a very different and distinct message on its
https://visme.co/blog/pairing-fonts/ 1/11
own.
To help you improve the quality of your designs and the impact of the messages contained within
them, we've created a handy guide to pairing fonts that will save you time and a lot of unnecessary
headaches.
Here's a short selection of 8 font pairings you can apply to your designs in Visme. View more
below:
(https://dashboard.visme.co/v2/create/template/presentations/1/?
(https://dashboard.visme.co/v2/create/template/prese
vc=Blog-Top-ICP) vc=Blog-Top-ICP)
1 Combine a serif with a sans serif.
First of all, it's important to know the difference between a serif and a sans serif font. The first
refers to a typeface with a small line attached to the end of a stroke, while the latter refers to a
typeface without any stroke embellishments, like the font used in the sentence you're reading now.
A safe bet when it comes to pairing fonts is to combine a serif font with a sans serif font, like in the
example above. Why? Because, as a general rule, the more contrast between your fonts, the better.
See how the differences in the anatomy of the two fonts on the right create an overall appealing
design? Meanwhile, the two on the left simply don't work well together because they're too similar.
However, you also want to stay away from fonts that are so different that they tread the fine line
between contrast and discord. For example, put Garamond and Sabon together to see what this
means. Or try Helvetica and Univers together, which is also an unattractive combination.
2 Avoid similar classifications.
Another way to apply the previous rule is to avoid choosing typefaces from the same categories,
such as Script or Slabs. (Script refers to typefaces that link one letter to the next and are used
mostly for headers or display. Slabs are a type of serif with thick, block-like projections at the end of
letter strokes.)
If you do this, you won’t get enough contrast and will likely end up with conflict. For instance, try
combining Clarendon and Rockwell to see what happens.
Or look at the example above. The combination on the left brings together a Slab with another Slab.
Poor choice. There's little contrast, which makes it unappealing to the eye. The combination on the
right, however, combines a Slab with a Sans Serif. This seemingly insignificant change makes a world
of a difference and entices the viewer to read the text.
3 Contrast font sizes.
A third way to achieve contrast is to get enough difference in point size between the various fonts.
The text on the left, for instance, uses a 24-point font for the header and an 18-point font for the
body copy. There's too little contrast in size, which makes it harder for the reader to distinguish
what's most important.
The order in which you read information should be clearly defined by a visual hierarchy in your
design. For example, the text on the right uses a big enough header to allow the reader to quickly
perceive a visual hierarchy defined by the relative difference in the scale of the typefaces used.
4 Contrast font weights.

1
Another way to ensure a clear visual hierarchy is to use varying font weights, with clear differences
in the boldness of the fonts used. For instance, you can try combining Didot and Rockwell; you see
that they simply don't mesh well together because they both have a heavy presence.
Or, in the example above, you see that the best combination is achieved by matching the heavy
Roboto Black with Roboto Light. The key to achieving the right amount of contrast is to understand
that fonts are a lot like people: When you mix two with a whole lot of personality or presence, then
you have yourself a discordant design. But when you combine an eye-catching one with a neutral or
lighter font, you find harmony.
5 Assign distinct roles to each font.
A good tip to remember is that consistency is crucial to a professional-looking design. One way to
do this is to assign a role to each of the fonts used throughout your document. For example, you can
use the same font for article titles, another for the body intro, a third font for the body copy and so
on.
In the example above, the text on the right looks much cleaner due to the consistent and exclusive
use of a type for header and another type for body copy.
6 Don't mix different moods.
Another key to pairing font is recognizing that each font has a personality and a mood. Don't make
the mistake of pairing fonts that simply aren't meant to go together. For example, don't pair Impact
and MTF Cool Kid. While Impact is bold and blocky, MTF Cool Kid is playful, simplistic and childlike.
In the example above, Nexa Rust Slab and Airstream aren't exactly a perfect match. Snidely is a
display font with a rough look to it, while Airstream is a decorative, retro font.
7 Mix distinct fonts with neutral types.
If one of your fonts has a whole lot of personality and a very distinct style, don't make the mistake of
pairing it with another font that also attracts a lot of attention to itself. Your best bet is to pair a
distinct font with a more neutral one.
In the example above, Blackjack, a script font, is combined with another script font, Milkshake,
resulting in a very jarring design. The example on the right, however, uses the more neutral
Montserrat Light, making the design much more pleasant and readable.
8 Avoid discordant combinations.
While contrast is always a good thing, be careful to steer clear of discord. The first creates visual
harmony; the second just repels readers. The key is to combine fonts that at first glance seem to be
very different but are actually similar in terms of proportions and x-height (the height of the
character "x"). (Again, font combinations are a lot like people.)
For example, Futura with Times New Roman doesn’t work well because there is too much contrast
between widths.
9 Use fonts from the same typeface.
Don't forget that using different fonts from the same typeface can save you a lot of time and
produce just the look you're going for. You might do well, for example, with a Helvetica Black for a
header and a Helvetica normal for your body.
Or, like in the example above, you can combine Raleway Black Head with Raleway Thin. (They're
both from the same font family, so they should get along!)
10 Stick to two--max three--typefaces.
You might be looking too hard for just the right combination. Instead of overthinking it, just stick to
two--max three-combinations and, above all, keep it simple. Stick to two typefaces by using a classic
sans serif and serif combination. This would potentially produce up to 8 different fonts to work
with: normal, bold, italic and bold italic for each typeface.
11 Experiment with different sizes.
There are some fonts that look great in large sizes but are barely readable when small. For this
reason, it's important to experiment with different sizes as some font combinations can fall into
place at a certain point size.
For instance, while Helvetica can be used at both larger and smaller sizes, another font like
Impact is very unattractive when small. In the example above, the script font Pacifico is too
condensed and bold to work as body copy. As a header, however, it works just fine.
(https://www.visme.co/?vc=In-Text-Blog-CTA-New)
Create Stunning Content!

Design visual brand experiences for your business
whether you are a seasoned designer or a total novice.
Try Visme for free
(https://www.visme.co/?utm_source=BlogCTA&utm_medium=BlogCTA&vc=BottomBanner-CTA)
About the Author

Nayomi Chibana is a journalist and writer for Visme’s (http://www.visme.co/) Visual Learning Center.
Besides researching trends in visual communication and next-generation storytelling, she’s passionate
about data-driven content.
(https://www.visme.co/)
CREATE
USE CASES
RESOURSES
COMPANY
SUPPORT
RECENT FEATURES & ARTICLES
How an Employee Surveying Firm Cuts Down Design Training Time With Visme
(https://visme.co/blog/case-study-save-design-training-time-with-visme/) More from our blog > (https://visme.co/blog/)
English
(https://www.capterra.com/p/153139/Visme/) (https://www.g2.com/products/visme/reviews)
Copyright 2022 Easy WebContent, Inc. (DBA Visme). All rights reserved. Proudly made in Maryland.
Terms of Service and Privacy (https://www.visme.co/terms_conditions/) Site Map (https://www.visme.co/sitemap/)

A Non-Designer's Guide To Pairing Fonts

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

A Non-Designer's Guide To Pairing Fonts

Uploaded by

Copyright:

Available Formats

9/29/22, 5:38 PM A Non-Designer's Guide to Pairing Fonts

A Non-Designer’s Guide to Pairing Fonts 1

Jan 18, 2016

1 Combine a serif with a sans serif.

3 Contrast font sizes.

4 Contrast font weights.

5 Assign distinct roles to each font.

6 Don't mix different moods.

7 Mix distinct fonts with neutral types.

8 Avoid discordant combinations.

character "x"). (Again, font combinations are a lot like people.)

9 Use fonts from the same typeface.

10 Stick to two--max three--typefaces.

11 Experiment with different sizes.

Create Stunning Content!

Try Visme for free

About the Author

RECENT FEATURES & ARTICLES

(https://visme.co/blog/case-study-save-design-training-time-with-visme/) More from our blog > (https://visme.co/blog/)

Terms of Service and Privacy (https://www.visme.co/terms_conditions/) Site Map (https://www.visme.co/sitemap/)

You might also like