In our recent podcast on web fonts, Drew offhandedly mentioned that Google Fonts provides pairing options. I decided to check it out, and it’s pretty nifty. The header/body font pairings are especially useful. Some of the basic typography books will tell you to pair a serif font for headers with a sans-serif body font. It’s good advice, but for the font-blind like me, it’s still not enough. I need someone to spoon feed the exact fonts to me. That’s exactly what the pairings provide: a curated and filtered set of expert-endorsed font pairings.
If I have one complaint, it’s that some of the body/body pairings seem strange to me. In the screenshot above it has Open Sans paired with Droid Sans. The lack of contrast between the two would seem to me like a no-no. My (very basic) knowledge of typography says that you want to either match 100% or have significant contrast. When there’s only a slight change, it’s jarring, like when you try to match wall paint colors but don’t get it exact. There’s always a transition area that draws the eye and generates some confusion.
But, I’m sure Google’s font experts are smarter than me in this. If anyone has any advice on when you’d pair close-but-slightly-different fonts, I’d love to hear it. Regardless, for design-handicapped developers, the pre-selected font pairings are a great way to easily create a typography theme for a new site without a lot of stress and agony. Goodbye analysis paralysis, hello pretty fonts!
