3 Step Solutions News and Updates

The Perfect Font Pairing Guide

Wednesday, April 18, 2018

Great fonts are essential to great design. But picking great fonts can seem like an impossible dark art for most people. In the article below I’ll explain the basics of choosing great fonts and then give you my favorite combinations that you can use in your own designs.

These font pairs are perfect if you are trying to create your next presentation, social media graphic or anything else you’d like to design. Of course, all of these fonts are available for you to use – for free – inside Canva.

There’s a science to applying a heading, subheading and body copy to suit the type of content you’re producing and the message or tone of your brand.

Font/Typography Terms

Serif: a typeface with a small projection at the ends of letter strokes.
Sans-serif: a typeface without any stroke embellishments and details.
Slab-serif: a typeface that's identified by its thick, block-like serifs.
Script: a typeface that links together letter-to-letter and best used for headings and display.
Display: a typeface that is best used at 30 points or larger. These should mainly be used as header fonts and rarely in body text.
Handwriting: a typeface that looks as if it could be hand drawn or written. This could incorporate a script font or a block letter font.
Monospace: a non-proportional typeface where its numbers and letters take up the same amount of space. These fonts can look more spaced out and often look more harsh.

Where to Start With Your Font Pairings

Majority of businesses are only going to need two fonts, a header font, and body font, but occasionally you may find you want a third font (a sub-heading font or accent font to use throughout your website for certain calls to action or emphasis).

Another factor in your font pairings is how they will display online. Without getting into the complicated aspects of web design, browser design, and general coding - not all fonts can be read well online or across web browsers.

To mitigate these issues, I always look to Google Fonts when I'm deciding on my perfect font pairings for a website and brand. Google Fonts are free to use and can be read well online and across web browsers (and are incredibly easy to load onto your 3 Step Solutions website!).

Perfect Font Pairings

Of course, you can always go to Google Fonts and choose your own font pairings, but we're sharing some pairs that work great together!

1. Playfair Display + Lato

Font pairing preview of Playfair Display and Lato

2. Playfair Display + Raleway

Font pairing preview of Playfair Display and Raleway

3. Black Han Sans + Open Sans

Font pairing preview of Black Han Sans and Open Sans

4. Montserrat + Lato

Font pairing preview of Montserrat and Lato

5. Inconsolata + Noto Sans

Font pairing preview of Inconsolata and Noto Sans

6. Inconsolata + Montserrat

Font pairing preview of Inconsolata and Montserrat.

7. Pacifico + Opens Sans

Font pairing preview of Pacifico and Open Sans

8. Shadows Into Light + Raleway

Font pairing preview of Shadows Into Light and Raleway

9. Shadows Into Light + Roboto

Font pairing preview of Shadows Into Light and Roboto

10. Satisfy + Open Sans

Font pairing preview of Satisfy and Open Sans

11. Sacramento + Josefin Slab

Font pairing preview of Sacramento and Josefin Slab

12. Sacramento + Roboto

Font pairing preview of Sacramento and Roboto

13. Walter Turncoat + Oswald Light

Font pairing preview of Walter Turncoat and Oswald Light

14. Clicker Script + Raleway

Font pairing preview of Clicker Script and Raleway

15. Roboto Mono + Roboto

Font pairing preview of Roboto Mono and Roboto

16. Cutive Mono + Raleway

Font pairing preview of Cutive Mono and Raleway

17. Arima Madurai + Open Sans

Font pairing preview of Arima Madurai and Open Sans

18. Cabin Sketch + Oswald

Font pairing preview of Cabin Sketch and Oswald

19. Pompiere + Raleway

Font pairing preview of Pompiere and Raleway

20. Baloo Tammudu + Montesserat

Font pairing preview of Baloo Tammadu and Montesserat

21. Lora + Open Sans

Font pairing preview of Lora and Open Sans

22. IM Fell DW Pica + Open Sans

Font pairing preview of IM Fell DW Pica and Open Sans

23. Della Respira + Roboto

Font pairing preview of Della Respira and Roboto

24. Gafata + Open Sans

Font pairing preview of Gafata and Open Sans

25. Carrois Gothic SC + Raleway

Font pairing preview of Carrois Gothic SC and Raleway

26. Palanquin Dark + Hind

Font pairing preview of Palanquin Dark and Hind

27. Federo + Open Sans

Font pairing preview of Federo and Open Sans

28. Mallanna + Open Sans

Font pairing preview of Mallanna and Open Sans

29. Kite One + Raleway

Font pairing preview of Kite One and Raleway

30. Nanum Gothic + Lato

Font pairing preview of Nanum Gothic and Lato

Accent Fonts

While a majority of the time you will only need two fonts, sometimes you find yourself needing a third. I call this additional font and accent font. You may use it on a sales page or in a call to action - it's your go-to font choice to draw extra attention or emphasis.

Below are a few of my favorite that you may find to be perfect on your website as well.

Rock Salt

Rock Salt as an accent font, preview.

Homemade Apple

Homemade Apple as an accent font, preview.

Reenie Beanie

Reenie Beanie as an accent font, preview.

Walter Turncoat

Walter Turncoat as an accent font, preview.

Seaweed Script

Seaweed Script as an accent font, preview.

Londrina Outline (or Shadow)

Londrina Outline as an accent font, preview.

What If I Don't Like These Font Pairings?


These may be the perfect font pairings for your website or they may not be, to discover the pairs that really inspire you, head to Google Fonts and search for your header font first.

When you find a header font you like, click on it and scroll down the paid until you see "Popular Pairings" so you can see what will work well with your chosen header font. Alternatively, you can search through the "Sans Serif" typefaces.
Find your own perfect font pairing by looking through Google Fonts and seeing popular pairings.

Think I've left out some great pairings? Have different pairings you love on your website? Let me know in the comments below!