20 Inspirational, Free Tools For Better Typeface Pairing

Pairing type is one of the toughest parts to get right in a web design project, and having tons of custom fonts at our fingertips doesn’t make things any easier.

If you’re just at the start of your journey to web typography mastery, it’s likely that reading something along the lines of…

The Display and its Stencil are monolinear … but they radiate great rhythm and warmth, with a touch of handwriting.

Tremolo Typeface Review by Laura Meseguer

… will probably make as much sense to you as wine tasting does to a teetotaler.

Font selection is more an art than a science. Therefore, reading about typography, individual typefaces and foundries goes hand in hand with lots of practice. However — as Tim Brown says in his guide Combining Typefaces — “practice can take an unreasonable amount of time if you’re not careful” (p.38). In the meantime, the website you are working on makes immediate demands on your budding typography skills. You need to come up with a great solution, and do it quickly.

In this article, you’ll find plenty of online resources that will complement your learning about web typography and help you come up with beautiful type combinations.

You’ll also learn how some of the services listed below let you test the browser rendering of your chosen fonts and offer hassle-free ways of including them in your project.

Great Typeface Combos

Browsing websites with good combinations of typefaces is a great way to develop an eye for how typefaces work together and in which contexts they’re being used. Check out the resources below for some great examples.

Google Fonts Pairings Feature

Google Fonts is not just a service for picking custom fonts. It’s also a place where you can learn more about your chosen typeface, including suggestions on a number of typefaces that work well with it.

When you select a typeface on Google Fonts, click on the small Pop out button to the bottom right of the font’s container box.

Google Fonts Pop out button.

Next, click on the Pairings tab and you’ll see examples of how your selection is paired on the web with other typefaces.

Although I like this resource, in my view it doesn’t say much about the context in which the suggested pairings are used. For instance, what kind of websites use Open Sans and Roboto together? Are they text-heavy websites like news sites and blogs? Are they image-focused websites like a photography portfolio site? Which page elements use Open Sans and which ones use Roboto?

This is super helpful information when it comes to selecting type combinations, and in order to find it we have to look elsewhere.

Beautiful Web Type

Beautiful Web Type showcases a selection of typefaces from Google Fonts.

Typeface combinations on Beautiful Web Type.

The examples are a bit generic – they’re not taken from real websites with specific goals and strategies. That said, the website shows off its typeface selections in beautifully designed sections. Notice how text hierarchy, font weights and styles, all play a part in making the text more readable and conveying the appropriate mood.

Google Web Fonts Typography Project

Another inspirational collection of typeface combinations from Google Fonts is on the Google Web Fonts Typography Project website.

Font pairings from the Google Web Fonts Typography Project website.

The designs on this website are beautiful illustrations of type pairings and their uses on the web. As the project’s README file on the GitHub repo says:

The primary goal is to communicate, not decorate.


Typ.io gives you tons of information on trendy typography designs and an up-to-date range of websites with well paired typefaces.

Main screen in Typ.io website.

Not only will you see matching typefaces, but you will also get a sense of the role type plays in the design of real websites – which typeface is used for headings, which one for body copy, the font selection the designer has made for a certain kind of website, e.g., portfolio, blog, marketing, etc. In fact, you can search websites by industry, typeface, and font service.

Search box in Typ.io website.

Finally, click on the image with your favorite typeface combination, and you’ll get the CSS code and the links to the services where you can purchase or download the font files.

Fonts In Use

Fonts in Use is another popular resource offering a wide collection of typefaces that work well together, taken from real websites.

Its impressive search functionality lets you browse the typography archive by:

  • industries
  • formats
  • typefaces

Search options on Fonts in Use website.

To stress the point, showing how type works on websites from a variety of industries and contexts is crucial to developing an eye for good typesetting decisions.

Interactive Type Pairing Tools

The resources I’m going to list below will ask for your input in the search for the perfect type combination. Be it a way of testing typefaces or simply making a selection and waiting for a number of suitable matches, these tools are interactive and fun to use.


Typeface combinations from Typespiration.

The beauty of Typespiration is that it lets you browse different designs showcasing beautiful free fonts and color palettes.

If you click on any of the designs, you’ll have the option to:

  • Preview a close-up of the design. If you click the Baseline grid button on the top right you can also check how the text sits on the baseline grid:
    Preview screen on the Typespiration website.
  • Learn about the fonts and colors used in the design:
    Fonts and colors screen on Typespiration website.
  • Copy and paste the HTML and CSS code you need to recreate the design in your project:
    Quick use screen in Typespiration website.

Continue reading %20 Inspirational, Free Tools For Better Typeface Pairing%

Source: Sitepoint