Design

Typography Basics: Pairing Fonts for the Web

By December 2, 2013 No Comments

The look and feel of a typeface can sometimes communicate a message to someone just as much as the words and sentences they spell out. This makes choosing the right font important when it comes to selecting fonts for any design, web or print. It’s especially important when selecting multiple fonts for a project. Each typeface has its own voice that can get drowned out if paired with a font that competes or conflicts with it. We’ll take a look at the challenges of font pairing for web design and some of our favorite font match ups.

Choosing fonts was simple back in the budding stages of web design when some of the only options were Arial, Times New Roman and Comic Sans.  This was because websites could only render fonts that were installed on a user’s computer limiting web design to fonts that came standard on all computers.

This all changed with the introduction of services like Google Fonts. Now, designers have hundreds of fonts to choose from for their web projects. With so many fonts to select, it’s more important than ever to carefully consider the message you want to convey with the typefaces you choose. The right font pairing can create unity and make a design successful.

Less is more

Although we’re all about creativity, sometimes less is more. The idea is to create visual interest without becoming busy or establishing conflict.  So when it comes to choosing multiple typefaces, we usually stick to no more than two. For example, we like to use serif type as a header and pair it with an easy-to-read sans serif for body.

You also want to select two fonts that create enough contrast without clashing with one another. Pairing two serif fonts or two sans serif fonts together can sometimes disrupt consistency and create awkwardness in a design.

The above fonts are two different sans serif fonts with two different classifications. Helvetica is a neo-grotesque typeface that has minimal contrast in letter stroke width while Gill Sans is a humanist type with lots of stroke width contrast. They are similar enough that an untrained eye couldn’t tell the difference, yet together they create an awkward tension.

One of the easiest ways to add variety to a design while still maintaining harmony is to stay within a font family and use differing weights, styles, and sizes to add contrast. One of our favorite fonts to use here at Web Ascender for web projects is “Open Sans.” It’s a beautiful font that has great readability for body copy. It also comes in 10 styles so it’s easy to create contrast and interest using the varying font weights.

Some typefaces are designed to be completely different styles with similar attributes so they can be paired together. For example, PT Sans and PT Serif are two very different fonts, yet they work well together because they have similar weights, x-heights, and stroke contrast.

Our Favorites

Understanding the basics of what makes a good font pairing can create unity in a design. It’s important to remember to pair fonts with enough contrast to add visual interest yet similar enough to create harmony. With that being said, there are no definitive rules when it comes to pairing fonts. You’ll never know how it looks until you try it! Check out some of our favorite examples below from Google Fonts. Try them on your next project, or create your own.

Hammersmith One and Quattrocento Sans

Nobile and Droid Serif

Courgette and Open Sans

Bevan and PT Sans

Amaranth and Copse

Oswald and PT Sans Narrow

Pacifico and Fresca

Have a favorite font pairing or know of a website that does a nice job of pairing fonts? Share below!

Executive's Guide to Web Development

This 80-page guide of topics and tips to navigate your way to a better website will be a huge asset to you and your business. It’s been read by thousands and loved by all. Increase your web design acumen today.