July 30, 2018January 11, 2019 in Fonts, Inspiration

30 free font pairing suggestions for your website

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-Serif, Serif, 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.

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.

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.

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.

21. Ovo + Muli

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

Download: Playfair Display / Museo Sans

24. Poppins + Open Sans

Download: Poppins / Open Sans

25. Quattrocento + Quattrocento Sans

Download: Quattrocento / Quattrocento Sans

26. Sacramento + Alice

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

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

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 🙂

Common typography terms explained

Serif Font

Sans Serif Font

Script Font

Font pairing examples for web use

1. Abril Fatface + Raleway

2. Amatic SC + Andika

3. Bebas Neue + Montserrat

4. BioRhyme + Montserrat

5. Bree Serif + Lora

6. Merriweather + Cabin

7. Cormorant Garamond + Open Sans

8. Julius Sans One + Crimson Text

9. Dancing Script + Ledger

10. Dosis + Open Sans

11. Oswald + Droid Serif

12. Playfair Display + Fauna One

13. Karla + Montserrat

14. League Spartan + Libre Baskerville

15. Libre Baskerville + Open Sans

16. Lora + Source Sans Pro

17. Merriweather + Open Sans

18. Philosopher + Muli

19. Nunito + Open Sans

20. Oswald + Montserrat