As a designer, I would argue that good font pairing is one of the hardest things to master. When combining two or more typefaces together, it’s important to find fonts that compliment each other, don’t conflict, and harmonize nicely with the overall design. It took me years of practice, observation, and many, many “How to typography” books until I could say that choosing a proper font for a design isn’t that hard (although it still takes time).

For someone whose profession doesn’t include regular work with typography, choosing a proper font for a website (or any other graphic with words on it) can be a frustrating and utterly confusing ordeal.

Currently, there are hundreds of thousands of fonts to choose from and more are created every day. In the world of typography, you will often hear words like Sans-SerifSerif, Script ... If you’re not in the “graphic designer” industry, these words might get you even more lost.

In this article, I hope to help you get a bit more familiar with the world of typography. We will look at some basic terminology that’s used when referring to typography in order to help you better understand how to choose a font that works for you.

After familiarizing ourselves with some basic typography terms, we will look at 30 font pairing examples that look professional, pleasing to the eye, easy to read, and are 100% free to use.

Let’s get started, shall we!?

Common typography terms explained

There are a lot of specific terms in the language of typography but in this article, I want to focus on the most common words without diving into specifics. If you’ re not a designer I think there’s no use in knowing what’s an x-hight or the difference between an ascender and a descender. Of course, if you’re up for a more in-depth exploration, feel free to check out these 20 Must-Know Typography Terms for Beginners after you’re done with this article.

Right now we will be focusing on more common terms that you might have heard when browsing the web.

Serif Font

Serif fonts are the most traditional typefaces out there. Serif typefaces can be identified by little lines (serifs) attached to the main stroke of the letter.

Visual example of a Serif typeface.

Serif fonts are most commonly used in books and magazines from the time of typesetting.

Serif type styles can be grouped into subcategories based on the time period in which the specific style was created:

  • Old style
  • Traditional
  • Neoclassic
  • Slab
  • Clarendon
  • Glyphic

For a while, using a font with serifs online was a “no-no” because the little lines at the ends of the letterforms would look blurry on screen. Today it is no longer true, thanks to high-resolution monitors and mobile devices. More serif typography is seen in web design but an old habit is hard to break so serif fonts are not as common – especially in longer pieces of content (like a blog post). It is much more common to see a serif headline in combination with a sans-serif body, which we will look at next.

Sans Serif Font

Sans-serif fonts or simply Sans are typefaces without the little embellishments at the ends of strokes. Sans means “without” in French.

Sans serif font example - visual guide.

Just like serifs, sans-serifs have their categories as well:

  • Grotesque
  • Square
  • Humanistic
  • Geometric

As mentioned before sans-serif typefaces are the most common choice for web typography. As you can see, this blog is using a sans serif font as well! Sans-serif typography is amazingly versatile. It can be thick or thin, tall or short, fat or condensed – depending on the font family you choose. Thanks to this, sans-serifs can embody almost any design feeling or text subject.

Script Font

Script typefaces somewhat resemble a cursive handwriting style. Script font strokes will be connected to one another.

Visual example of a Script typeface.

Scripts are very trendy this year (2018) and I bet you’ve seen them in all kinds of places – posters, logos, clothing and recently even websites.

That being said, script fonts should still be used with caution, and only in headlines or for short, large format slogans because script tends to be difficult to read.

Based on script font characteristics, they can be grouped in the following subcategories:

  • Formal
  • Casual
  • Calligraphic
  • Blackletter

If you’re really into script fonts (I know I am) and want to have some on your website, I’d suggest that you create a signature style logo for yourself using a signature style font.

Font pairing examples for web use

Now that you have a bit more familiar with common typography styles, it’s time to look at some font pairing examples that look great for websites and other digital designs.

I’ve created 30 font pairing examples for you to explore. All of them consist of two typefaces that compliment each other nicely.

To make things more interesting I not only added a “main title font” and a “body/content” font but also a “secondary title” example that can be used for smaller headlines, quotes, extra info (like category names, author name, date written) or any other creative use-case scenario.

Below each visual example you will find a download link that will lead you straight to the free download page on Google Fonts for Font Squirrel.

1. Abril Fatface + Raleway

abril fatface font combination and raleway font pairing.

Download: Abril Fatface / Raleway

2. Amatic SC + Andika

Amatic SC font combination and Andika google font pairing.

Download: Amatic SC / Andika

3. Bebas Neue + Montserrat

Bebas Neue font combination with Montserrat font.

Download: Bebas Neue / Montserrat 

4. BioRhyme + Montserrat

Biohyrime ans Montserrat font pairing. Google font combination example.

Download: BioRhyme / Montserrat

5. Bree Serif + Lora

Bree Serif font pairing for website

Download: Bree Serif / Lora

6. Merriweather + Cabin

Merriwather font and Cabin font combination.

Download: Merriweather / Cabin

7. Cormorant Garamond + Open Sans

Cormorant Garamond font pairing.

Download: Cormorant Garamond / Open Sans

8. Julius Sans One + Crimson Text

Julius Sans One free font pairing

Download: Julius Sans One / Crimson Text

9. Dancing Script + Ledger

Script heading font pairing example

Download: Dancing Script / Ledger

10. Dosis + Open Sans

Dosis font fairing and Open Sans font combination.

Download: Dosis / Open Sans

11. Oswald + Droid Serif

Oswald font combinations

Download: Oswald / Droid Serif

12. Playfair Display + Fauna One

playfair display font and fauna one font combination.

Download: Playfair Display / Fauna One

13. Karla + Montserrat

Download: Karla / Montserrat

14. League Spartan + Libre Baskerville

Libre Baskerville font pairing.

Download: League Spartan / Libre Baskerville

15. Libre Baskerville + Open Sans

Libre Baskerville font combinations.

Download: Libre Baskerville / Open Sans

16. Lora + Source Sans Pro

Lora font pairing.

Download: Lora / Source Sans Pro

17. Merriweather + Open Sans

Merriweather font pairing.

Download: Merriweather / Open Sans

18. Philosopher + Muli

Muli font and Philosopher font pairing example.

Download: Philosopher / Muli

19. Nunito + Open Sans

Download: Nunito / Open Sans

20. Oswald + Montserrat

Montserrat font pairing.

Download: Oswald / Montserrat

21. Ovo + Muli

ovo font pairing and Muli font pairing.

Download: Ovo / Muli

22. Oxygen + Source Sans Pro

Oxygen font and Source Sans Pro font combination.

Download: Oxygen / Source Sans Pro

23. Playfair Display +Museo Sans

Playfair Display font pairing.

Download: Playfair Display / Museo Sans

24. Poppins + Open Sans

Poppins font pairing.

Download: Poppins / Open Sans

25. Quattrocento + Quattrocento Sans

Quattrocento font combinations.

Download: Quattrocento / Quattrocento Sans

26. Sacramento + Alice

Alice font pairing.

Download: Sacramento / Alice

27. Source Serif Pro + Source Sans Pro

Source Sans Pro and Source Serif Pro font combination.

Download: Source Serif Pro / Source Sans Pro

28. Vollkorn + Exo

Vollkorn and Exo font pairing example

Download: Vollkorn / Exo

29. Woodford Bourne + Lato

Free font similar to Brandon Grotesque - Woodford Bourne font and a pairing example.

Download: Woodford Bourne / Lato

30. Yeseva One + Merriweather

Merriweather font pairing.

Download: Yeseva One / Merriweather

What’s your favorite font combo?

Whenever you’re choosing a font for a design or your website, you must not only think whether it’s pretty or not but also is it appropriate for the content you’re showing. Just like an image or a color, a typeface has a mood or a vibe and it’s your job to find a font whose vibe is not competing with the story it’s telling.

It’s tough, I know, but try and experiment. Test out different variations, add content to it and see what works. And most importantly – have fun!

Hope this piece of knowledge was useful to you 🙂

Jessica Xavier
I’m Jess, here to share practical design advice and budget-friendly hacks, blending your favorite fandoms seamlessly into your decor. Let’s connect and create your dream space together!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.