Font Combinations That Play Well With Others

by Melinda Martin
68562243

Words are very important and often taken for granted in the design process. Nobody really understands the struggle and angst designers go through to find the perfect typeface to convey the message in a way that captures it best.

Choosing fonts is an art form. Even with a degree in Communication Arts, I struggle with type design. It helps to have a passion for design and to study current work in the advertising world.

My approach to designing type for a project includes the consideration of visual contrast. For example, a bold font for a headline with a thin typeface for the body copy pairs well and is aesthetically pleasing to the eye (i.e. easy to read). Think of the old expression: opposites attract. A good designer chooses fonts that work so well together that the intended viewer doesn’t even notice the font and receives the message clearly.

Font-Pairing-Basics-290x290

One classic type combination is pairing a serif with a sans serif font. It’s important to consider the personalities of the fonts you choose when selecting pairs. You don’t want them to compete with each other or cause tension. If you select a bold sans serif font, you probably don’t want a bold serif with lots of flourish as its partner. My advice is to put them together in the layout and see if they look comfortable together.

Less is more. Many people (not me of course) like to use a plethora of typefaces all in one document. A good rule of thumb is to not use more than two different typeface families in one project. Arial Bold, Arial, Arial Italic, etc. are all in the same font family. It’s when you mix in a third option that it becomes Alphabet Soup. And we certainly don’t want to see Comic Sans join the party.

use-two-typefaces

Why does this combination of sans serif and serif in the above example work so well? Helvetica Neue and Garamond are easily distinguishable and can be neutral. They maintain a visual organization on the page.

2

On the right are the same fonts used as on the left but the headline size is larger than the main text - and the main text was a few points smaller than the example on the left. Using different font sizes helps to guide the eyes to see the most important element(s) first.

Don’t choose typefaces that are in the same category (like script or slab fonts). There won’t be enough visual difference between the two and it may look like mush.

In truth, there are no rules written in stone with type design. This can be very frustrating AND time consuming for those who were looking for a quick answer. For those of you who want the Cliff’s Notes, here’s a site where you can pair Google fonts online: http://fontpair.co or check out this chart here:

U&LC Mixing Typefaces

This can help provide a great designer with the freedom to fail or accidentally succeed. Ain’t advertising great?

To learn more:

This article discusses specific fonts to use in web page design: http://designmodo.com/great-font-combinations/

Here is Canva’s take on the subject (they feature fonts available through their site):

https://designschool.canva.com/blog/the-ultimate-guide-to-font-pairing/

References:

https://designschool.canva.com/blog/the-ultimate-guide-to-font-pairing/

http://designmodo.com/great-font-combinations/

https://www.smashingmagazine.com/2010/11/best-practices-of-combining-typefaces/

http://fontpair.co/

https://www.fastsigns.com/blog/detail/2016/02/17/the-importance-of-typography-in-signage

https://www.fastsigns.com/blog/detail/2015/11/20/why-comic-sans-should-retire-and-be-put-to-rest-only-be-used-in-a-comic-book

http://bonfx.com/29-principles-for-making-great-font-combinations/