The Secret to Nice Typeface Combinations

When I asked people what their biggest struggles related to typography were, one of the answers I often heard of was pairing typefaces. We want to use more than one typefaces to make our design more lively and interesting, but for a lot of us, we are not sure which ones go together. When it comes to matching typefaces, there is actually a secret. With this secret, you will be able to create nice typeface combinations.

Pairing Typefaces & Hierarchy

Besides making our design visually more interesting, a more important purpose of using more than one typefaces is actually to create a hierarchy. Hierarchy implies difference. If there is no difference, there will be no hierarchy. So in order for a hierarchy to be effectively established, there needs to be a lot of difference, or a strong contrast. If you want your typeface combination to be successful, contrast is the secret.

What We Usually do

Often when we try to separate headings from body text, we create contrast in the following three dimensions.

  • Font weights: we make the headings bolder, or lighter. (Want to know more about how to use font weights wisely? Check out my article What You Can Do with Different Font Weights.)
  • Sizes: we make the headings larger.
  • Colors: we assign a different color to the headings.

Changing font weights, sizes and colors can create contrast and establish a hierarchy, but there are actually additional dimensions we can play with to add contrast if we have more than one typefaces. Furthermore, playing with them is a lot of fun.

More Possibilities

Different typefaces and certain type settings opens up other possibilities to generate contrast. Besides font weights, sizes and colors, let’s now look at proportions, letterforms, letter cases and tracking.

Proportions

Typefaces have different widths or proportions. Some are narrow and condensed. Some are regular and within the medium range. Others are fat and extended. The following table summarizes the proportions of some commonly used web fonts.

Categorizing commonly used web fonts based on their proportions.

As designers, we can pair typefaces based on their widths. For example, we can use Open Sans Condensed Bold in headings and Open Sans Regular in body text. We can use Montserrat in headings and Source Sans Pro in body text. We can use Oswald, which is condensed, in headings, and use a regular serif or sans serif font for body text…

Pairing typefaces with different proportions to create contrast.

Note that typefaces that are too condensed or extended are not as readable as regular typefaces, so for body text, it’s better to stay conservative.

Letterforms

Letterforms are letters’ shapes. We are actually quite familiar with them because we use them to categorize typefaces. Serif and sans serif are two commonly seen letterforms. Other letterforms include display, handwriting, script etc.

Categories of typefaces in Google Fonts

To create contrast, we pick typefaces that have different letterforms. Remember that simple rule we often hear of that asks you to choose a sans serif typeface and pair it with a serif typeface? It’s actually using the difference between letterforms to create contrast. We can also pick a script / display typeface for headings, and pair it with a serif or sans serif typeface for body text. The possibilities are endless.

In my web template Big Day, I paired Dancing Script, which is a handwriting typeface, with Fira Sans, which is an elegant sans serif typeface, because they have a strong contrast in terms of letter forms.

The more distinct the letterforms of two typefaces are, the greater contrast we will be able to generate, and the better our typeface combination will be. By the same token, we should avoid pairing two fonts that are too similar in shapes. That’s why you’ll need to be more careful when pairing two sans serif fonts, or two serif fonts.

Pairing two typefaces that are too similar in shapes creates a weak contrast and only confuses the readers. Why not just use one typeface instead?

Letter Cases (Lowercase & Uppercase)

Uppercase words are blocky because their letters share the same height. Lowercase words have ups and downs in their contours because some letters have ascenders or descenders and other’s don’t. Using this difference, we can create contrast through letter cases.

The shapes of uppercase words and lowercase words are different.

If the headings in our document are not long, we can set them all caps to make them appear differently from the paragraphs, which are dominated by lowercase letters. (If your headings are long and involve sentences, you might not want to make them all caps because doing so will decrease readability.)

Tracking

Tracking, which is letter spacing, can also be used to create contrast. It is commonly used along with uppercase letters, because extra spaces between uppercase letters can actually make the words easier to read and give them a calm and sophisticated look-and-feel.

Extra letter spacing can make uppercase words easier to read and add a calm and sophisticated look-and-feel.

Keep in mind that tracking lowercase letters (adding extra spaces between them) should be avoided, because doing so will break the contours of words and make them hard to read. Additionally, we need body text with no tracking to contrast with headings that have extra letter spacing.

Boosting Contrast

Up to this point, we have talked about 7 ways to generate contrast. Let’s summarize them.

Font Weights / Sizes / Colors / Proportions / Letterforms / Letter Cases / Tracking

Remember, the more contrast you have, the nicer your font pairing will be. To get a lot of contrast, we can stack them. For example, in my WordPress theme Jordan, I paired the typefaces Oswald and Merriweather. I used Oswald in headings and Merriweather in body text. Oswald is a condensed typeface. I used it together with all caps and extra letter spacing. By doing so, I created differences in sizes, colors, proportions, letterforms, letter cases and tracking. Lots of contrast, a nice font pairing.

I paired Oswald and Merriweather in my WordPress theme Jordan. There is a strong contrast between them because they are different in terms of sizes, colors, proportions, letterforms, letter cases and tracking.

Following this principle, we can easily come up with some successful font pairings and some not so successful ones. When you go through each pair of typefaces below, think about why it is successful or not successful using the 7 dimensions we talked about previously.

Successful Combinations

Not So Successful Combinations

Final Thoughts

Matching typefaces is an important part in typography. I hope that by reading this article, you will learn that contrast is the indicator of successful typeface combinations and know how to pair fonts more effectively. Have fun pairing typefaces!

Did you like this article? If yes, share it with your friends. You can also follow me on Twitter.

Survey

What are your struggles related to typography? Answer this short survey and let me know. It will help me create the best content related to typography for you.

Author: Simon Li

Designer, coder and animator.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>