Sites for Browsing Type Pairings

Avatar of Chris Coyier
Chris Coyier on

Last weekend we did a post on Sites with High Quality Photos and it ended up being a kinda perfect fun weekend thing. Nothing you have to think too hard about, just enjoy. So let’s keep in that tradition a little bit! Why not! This week we’ll do sites that are intended to help you choose fonts for your website by showcasing nice pairings (as not any two typefaces necessarily go together well).

Typewolf

Typewolf helps designers choose the perfect font for their next design project. This site is an independent typography resource that features typefaces from all type foundries.

Font Pair

Font Pair helps designers pair Google Fonts together.

Google Web Fonts Typographic Project

There are over 650 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites.

Beautiful Web Type

A showcase of the best typefaces from the Google web fonts directory.

There are over 600 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Below are examples of these typefaces in action.

Fonts In Use

An independent archive of typography.

Typekit Design Gallery

A collection of sites we like using fonts from Typekit

Typekit also has Typekit Practice featuring lessons like Selecting Typefaces for body text.

Discover.typography

From the designers at H&Co.

They also have a nice article Four Techniques for Combining Fonts that is simple and straightforward.

Palettab

Palettab is a chrome extension to help you discover new fonts and awesome color collections every time you hit the new tab button.

Font Pairings on Pinterest

I Font You

Type Connection

Start by choosing a typeface to pair. Like a conventional dating website, Type Connection presents you with potential “dates” for each main character—without the misleading profile photos and commitment-phobes. The game features well-known, workhorse typefaces and portrays each as a character searching for love. You are the matchmaker. You decide what kind of match to look for by choosing among several strategies for combining typefaces. Along the way, you explore typographic terminology, type history, and more. By playing Type Connection, you deepen your own connection with type.

Type Genius

Find the perfect font combo for your next project.

Typ.io

We’re revealing designers’ decisions for all to see; peeking under the hood of beautiful websites to find out what fonts they’re using and how they’re using them.

Ultimately, we want to know what font goes with what?

Mixing Typefaces (PDF)

Typestyles that are close in design, but not from the same family create a visual discordance. Our sensibilities seem to require either strong typographic contrast—or none at all. To some degree this has even been proven in legibility studies. Researchers have found that typefaces and typographic arrangements which are pleasing to the eye are also the most legible. Unlike color combinations that can benefit from subtle contrast, typeface changes need to be obvious.

Font Shop “Great Pairs”

Just My Type

A collection of font pairings from Typekit and H&Co.