Font Pairing Tips & Examples

Pairing fonts correctly is essential to great design. The font’s you select help set your site’s mood, whether playful, fun, serious, elegant or historical, and dictates how readable and aesthetically pleasing your design is.

Your font selection plays an even larger role in your site’s design if you lack great photography or artwork.

That being said, just exactly how do you create great font pairings. First let’s take a look at the differences between fonts.

Font Basics

There are basically five font classifications. Serif, Sans Serif, Script and Decorative.

Serif Typeface
Serif refers to a small line or stroke attached at the end of the main vertical and horizontal strokes that form some letters and aid in the readability of the type. The serif typeface is most commonly used for books and newspapers and is easier to read in printed works because the serif makes the letters more distinctive and easier to recognize quickly.

San Serif Typeface
A sans serif font is a typeface without any stroke enhancements or detail. While the serif typeface is easier to read in print, on screen it’s the opposite. Printed works generally have a higher definition, even when considering a retina display. The lower resolution can make small serif characters harder to read on screen than the sans serif characters because of their more complex shapes.

Script Typeface
Script typefaces link together letter-to-letter and are based on the fluid strokes of handwriting. They can range from formal to very casual and are best suited for headlines. Some scripts are difficult to read on screen and impossible to read on mobile devices.

Decorative Typeface
Decorative typefaces vary widely in their appearance and include both practical and novelty fonts suitable for headlines.

Pairing Tips

Now to pairing the fonts. Not all fonts work well with other fonts. Here’s a few simple tips to help when pairing fonts.

Serifs usually work well when paired with a sans serif as the combination creates easier to read contrasting font styles.
It’s not as simple as just grabbing any serif and any sans serif, and throwing them together in a design. Consider the context in which the typefaces will be used. For example, if the design is supposed to be light and fun, then make sure the typefaces fit that mood. If the design is more serious, then the typefaces should reflect that. The mood of whatever typefaces are being combined should match.
Stick to two, three fonts at the most. If using multiple fonts they should not be the same style. Use a sans serif for body and a serif for heading.
If using just one font, select a font that has several variations, such as Open Sans and Lato. This allows you to create a clear visual hierarchy using varying font weights.
Fonts with very round letterforms shouldn’t be combined with more square typefaces.
Use fonts from the same family, that come in both serif and sans serif styles. Merriweather and Merriweather Sans, Roboto and Roboto Slab and Source Serif Pro and Source Sans Pro are examples of this.
Avoid similar styles. If you combine fonts with similar styles, such as serif with another serif, there may not be enough contrast between them, which makes it unappealing to the eye.
Combine script or display fonts with more neutral sans serif fonts.

Font Resources

Where do you find a variety of fonts for your website. The simplest place is Google Fonts. Most page builders and themes already incorporate Google Fonts into their font selections, making these the easiest of fonts to use. Visit Google Fonts to go through the fonts offered and make a note of the ones you want to use. Then create an unpublished page on your website and play with mixing and matching a title font with a paragraph of copy.

Another place to find free fonts is at Font Squirrel.

Two sources of paid fonts are Envato Elements, which offers a large variety of unique fonts that you can’t find elsewhere and also Fonts.com where you can purchase a large number of commonly used fonts.

You can do a search for fonts you’ll find many more sources, both free and paid.

Font Pairs

For our font pairing examples we’re only going to be using Google Fonts, since they are free and available in just about every page builder and theme. We’re breaking them down by what we feel their category would be, but let’s face it, many of these pairings could be used in multiple categories.

Abril Fatface / Poppins

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium

Font Pairing Tips & Examples

Font Basics

Pairing Tips

Font Resources

Font Pairs

Abril Fatface / Poppins

Alfa Slab / Prompt

Arvo / Lato

Bevan / Pontano Sans

BioRhyme / Cabin

Cardo / Prompt

Cormorant Garamond / Proza Libre

Fanwood Text / Lato

Halant / Nunito Sans

Inconsolata / Inconsolata

Josefin Slab / Josefin Sans

Libre Baskerville / Montserrat

Libre Baskerville / Open Sans

Libre Baskerville / Source Sans Pro

Lustria / Lato

Ninito / Nunito

Nixie One / Libre Baskerville

Open Sans / Open Sans

Ovo / Muli

Playfair Display / Open Sans

Playfair Display / Source Sans Pro

PT Serif / PT Sans

Quattrocento / Quattrocento

Quattrocento / Quattrocento Sans

Quicksand / Quicksand

Lora / Raleway

Roboto Slab / Roboto

Rokkitt / Roboto

Rufina / Oxygen

Source Serif Pro / Source Sans Pro

Special Elite / Ninito Sans

Trirong / Rubik

Ultra / Slabo 13px

Questrial / Questrial