Design Patterns For Pairing Typography Styles On The Web

Websites can go from good to great just from an improved font profile. The generic choices like Helvetica and Arial have been used so often that most visitors are immune to these bland typeface pairings.

These simple fonts work well for paragraphs and smaller text. But to draw attention you should be pairing up unique fonts for your headers, nav links, buttons, and other related page elements.

In this guide I want to talk about the importance of font pairing in web design and share a few tips+patterns you can follow. There is no specific right or wrong way to do this, but there are some methods that’ll help you improve your design skills a lot quicker.

Understanding Context

There are dozens of different styles of font pairings based on the type of website you’re building. For example a generic blog page might use different typography than a web portfolio or social news site.

This is because all of them have different reasons for their font choices. For the Computer World homepage they use big thick lettering for each of the headlines.

computer world headlines

These instinctively catch your attention regardless of the descriptive text underneath. This font pairing works well because visitors are naturally drawn to magnetic headlines and typography plays a big role in this process.

Important text needs to stand out more than other parts of the page. A better way to say this is that text should be organized into sections, and some sections will have overarching headers that help break up the reading experience.

How you split up fonts should be decided based on context and goals. For example, take a peek at the Quora question page layout.

quora headline typography

Most fonts are the same in regards to typeface, but the fonts are designed differently in weight and size.

Each Quora answer prominently displays with the person’s name and their job title/areas of expertise. This mini byline is much larger than the other text surrounding it, thus giving prominence to each person answering the question.

This typographic pairing makes sense because people want to know this information and expect it to stand out from the person’s written answer.

Understand the context of each page and why certain text blocks should stand out. From there you’ll have an easier time pairing fonts and making typographic design choices.

Clearly-Defined Hierarchy

There’s no denying that content should flow in a hierarchy. How you design this will vary based on your website and there’s no single right answer.

But the way you choose to pair your font styles together will make a world of difference.

klientboost type design

The KlientBoost homepage uses dividing lines as horizontal rules to break up headers and supplementary text. This hierarchy is also highlighted using text color where the heading text is darker than the copy underneath.

It catches your attention for a very specific reason and guides you through the entire homepage. As you scroll down you begin to recognize this pattern and the hierarchy becomes apparent very quickly.

This is also true of the Sketch homepage where the header text drops down in font size as you move lower. This visual hierarchy tells you that the largest text is the primary header and everything beneath it should follow.

sketch homepage design

This isn’t to say that the information is less important as you read down further.

But it’s meant to catch your attention first with the headline & logo, then lead you down with more details ending on the CTA buttons. If these fonts looked exactly the same you’d have a tough time comprehending the content solely based on design alone.

Vary Design Patterns

Always be willing to change up the actual text styles to see how they blend together. This is important because a varied design is something that you can mix & match for a stronger effect.

Make part of the text bold and other parts thin. Or try adding opposing colors, or make part of a label all caps or all lowercase. These variations draw the eye along the page both on the web and in print.

But on the web content is more fluid with a bit less control over how it appears in the browser, so you want to find repeating patterns that can be set for the entire site.

For example Sharecare uses all caps on their button label text and in their navigation links.

sharecare homepage

Not all text on the page uses all caps. But the text with all caps does stand out and it forces you to read the fonts differently. Users then have to browse the site a bit differently even though the fonts are very similar(Montserrat and Proxima Nova).

The Moz homepage has a different technique merging a serif font for the header text along with sans-serif text for the CTA and links.

moz homepage typography

We’ve covered a ton of CTA design trends that are all super easy to apply. Typography is just one property that you can mess with and see great results.

I always prefer to design CTA text with bold letters contrasting the background. This may equate to uppercase letters or CSS3 effects like drop shadows.

Just keep the design patterns consistent among similar elements whenever possible. You should be willing to try varying styles, but it’s rarely a good idea to single out one specific element. Don’t use a text shadow on one button and none of the others unless that one button should stand out for a reason.

Remember to pair up fonts and use text effects with a purpose, not just for aesthetics.

Opposites Can Attract (But Not Always)

It’s generally worth attempting to vary your fonts in different directions. Try different letter shapes, sizes, and line heights based on your goals.

But it’s not always true that opposing font styles work best together.

I almost never notice if two fonts on the page are serif/sans-serif at a glance. This is likely true of most visitors who just want to consume content.

Go off how the fonts feel rather than how they look. Immediate first impressions make a world of difference, so having the text stand out from the page helps visitors latch onto the lettering.

I find it’s generally not a great idea to combine two fonts that look almost identical. This doesn’t breed much variety and it can even look confusing when users realize the fonts kinda look similar, but not quite.

Play around in Google Webfonts and compare different fonts together. See how they look with different weights, sizes, caps, and line spacing.

Also check out this post by Canva which talks about typography and contrasting type in great detail. They seem to focus a lot more on print design, but the principles can be applied on the web too.

Study & Trust Other Examples

This seems like terrible advice but it’s probably the #1 most truthful statement in my entire article.

When you look at other related websites you should study which font choices they use for headers, paragraphs, buttons, or other ancillary items. You can see how these fonts go together and maybe try mixing other similar fonts on your own site.

Your eye will tell you if something looks off, and most of the time your eye is right. Even if you can’t put it into words you’ll just know if fonts work together or not.

Two sans-serif fonts of different styles can work great for some websites, but not well in others.

A blog headline on a local news site could rock a serif font while a culture blog might look too stiff with serif text, looking much better with a thick sans-serif alternative.

If you need to get into more of the science behind type check out this pairing guide looking into font shapes, characters, and letter heights. But these logical concepts will not necessarily help you match up fonts without real-world experience.

message bird type design

Take for example Message Bird which uses Proxima Nova throughout the layout. You’ll notice a difference in the font pairing because of colors, sizes, and whitespace/line height. Even with the exact same typeface you can build design patterns that look different.

Use your eye and pay attention to these smaller details. You never really need to understand the intricacies of typographic design if you just learn how to design a visual hierarchy.

Study from real examples and you’ll learn that the font families themselves are not always the most important factor in the design process.

Wrapping Up

The best advice I can offer anyone learning to pair fonts is to study and practice. Make a list of 5-10 of your competitor’s websites and look up their fonts using an extension like WhatFont.

Most premium fonts from TypeKit have similar free alternatives in Google Webfonts so you can always find the right fonts to match. But always go further than just the typefaces. Consider density, letter spacing, line height, colors, caps, and other features.

If you’re looking for more web typography ideas you should browse our related posts:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.