It’s often said that the best designs are the ones you don’t notice. Sometimes, though, effective design is distinctly visible — striking enough to cause pause and admiration, even. One simple way to boost the aesthetics of your next design project is to choose fonts that up the ante.
Pairing fonts that complement one another is a lot trickier than it sounds, unfortunately. Finding (ideally free) fonts that actually work well in a web-based environment can be difficult. Two individual typefaces might be gorgeous on their own, and hideous when put next to one another. Like throwing cheesecake and pickles into a blender.
If you’re unfamiliar with the basics of font pairing, or are looking to brush up on your typography skills, this post is for you. In this article you’ll get a glossary of the vocabulary you’ll need to sound like a font fanatic, some typographical guiding principles, and a list of font pairing tools you can try out for free.
You might also like: How to Use Web Fonts in Your Shopify Store.
Glossary
When I was new to the world of typography, the first thing I was struck by in my research was the language. Let’s walk through some of the verbiage that will make navigating your font-finding journey a little easier.
Font type classifications
Serif: A small line attached to the end of a stroke in a letter or symbol. Slightly fancy, if you will. Serif fonts are a great fit for physically printed products, like magazines and brochures. In the print world, serif fonts have traditionally been easier to read for body copy, or large blocks of copy. The little lines help lead the eye from one letter to the next.
Sans serif: A style of type without serifs. Perhaps surprisingly, most studies show sans serif fonts to be more difficult to read. Because of this, they’re more often used for shorter pieces of text like headlines or captions, and for websites and flat designs.
Slab serif: A serif typeface characterized by thick, block-like serifs. This makes for a somewhat bold, aggressive font, so use it wisely and sparingly.
Decorative: Also known as ornamental or display types. This is a novelty typeface and helps to create moods in your typography. It’s good for strong branding on things like packaging and posters, but definitely not for body text.
Script: Cursive or handwriting-style text that is best used for illustration or when you want to add a human hand to the page. You should use this style sparingly.
X-height: The height of the font, from the base line to the top of the lowercase letters, like an “x.” The larger the x-height, the easier the font is to read.
Concord: When two fonts have concordance, they both contain the same trait. It could be that their kerning is similar (a fancy word for word spacing), or that their proportions are the same. A simple way of finding concordant fonts is to choose two from the same family. You can choose one of them for headlines, and the other for your body text.
Contrast: As you may have guessed, intelligent reader, contrast is the state of being strikingly different from something else. Fonts can have contrast based on various elements, including style, size, weight, form, and color. Sometimes, the right amount of contrast can be very pleasing to the eye. It’s a fine balance.
Choose your design system
At Shopify, our designers are spread out across various offices and locations all over the world. To stay in sync, they abide by a set of established design principles that help guide them in every project they work on. In other words, they have a design system.
A system is generally defined as “a set of parts coordinated to accomplish a set of goals.” Our internal design system includes guidelines surrounding functionality, content, and visuals that make up the product experience.
This type of system brings together multiple elements that allow your team (or yourself) to stay consistent, and can include things like:
- Typography
- Layouts and grids
- Colors
- Icons
- Components and coding conventions
- Voice and tone
- Style guide and documentation
Naturally, any good design system should be built with typeface in mind. Make sure to include a list of fonts that will be used for certain types of content. That includes picking a font for:
- Headlines
- Sub-headlines
- Body text
- Functional design (like buttons)
We use a primary font called Brandon on our Shopify properties, and we pair it with Helvetica. Not necessarily because it’s the most beautiful combination you’ve ever seen, but because Helvetica is a system font that is good for performance. Stay tuned: We’re currently designing a new sans serif font that will be taking over Brandon.
Tips for effective font pairing
- Compare a serif with a sans serif: The more contrast you have between fonts, the better (to a certain extreme). They balance each other out. Also try a handwritten font with a script font.
- Use three fonts maximum: Don’t beat yourself up finding a handful of fonts that look harmonious. Quit while you’re ahead, and try to stick with two fonts per project if you can. Also, three fonts doesn’t mean three typefaces (eg: serif, display, and sans serif) — you could use three weights of the same font, for example, and still provide just the right amount of variety.
- Check the glyphs: Before you say “I do” to a font, make sure it has all the characters you’ll need for whatever language you will be using. Perhaps this won’t be an issue, but it’s important to consider if you work with international or multilingual clients.
- Pay attention to tone: Each font has its own distinct attitude. They can be fancy or bold or scary or girly…make sure the vibe of your font matches the mood of your project.
- Create columns: Shorter lines are easier for our eyeballs to take in. When you’re not dealing with massive amounts of text, reduce the width of your columns for improved readability.
- Don’t forget to make it legible: No matter how beautiful your font pairing is, it won’t mean a thing if people can’t read what it says. Don’t make them zoom in!
You might also like: 10 Web Design Tools to Discover Beautiful Fonts for Your Next Project.
10 tools and resources for font pairing
1. Type Connection
A self-described “typographic dating game,” you start by choosing a typeface to pair — your “main character,” if you will — and you’re then presented with potential “dates.” Although the matchmaking decisions lie in your hands, the site cleverly presents you with typographic terminology, tips, and history throughout the experience.
2. Font Pair
This site helps you pair Google fonts together. You can search by font, and sort by typeface combination. All of their example text is editable, so you can paste in your own copy to see what it looks like.
3. Typ.io
“We’re revealing designers’ decisions for all to see,” this website states, “peeking under the hood of beautiful websites to find out what fonts they’re using and how they’re using them.” You can submit fonts that you think are striking by installing their Chrome Extension.
4. Just My Type
This collection of font pairings from Typekit and H&FJ teaches you some typographic lessons that are broken into blocks of paired fonts (which, naturally, they identify for you). The site is self-confessedly heavy in download sizes, up to 3mb, so be warned.
5. Font Combinator
Use this tool to preview font combos in a fast, browser-based way. Add your own text and use their toolbar to change the font, size, line height, and color of your font choices. You can hide various elements too to see how things look with, or without a paired font.
6. Font Flame
The Tinder of font pairing. Using Google’s free font library, this site allows you to choose whether you “love” or “hate” two fonts that are paired together for you. Each match is saved for later so that you can return to your love list. As of right now, the fonts are randomly generated, but the owner of the site is looking to build a curated version sometime in the future.
7. Canva Font Combinations
Choose a “starter font” from a drop-down menu and receive a font suggestion that works well, including example text so you can visualize what it looks like. The editable text field makes it easy and fun to play around with the fonts on your own.
8. Typewolf
Typewolf was created by a designer named Jeremiah Shoaf, who was frustrated by the lack of resources he could find for choosing fonts for web design projects. This independent site features typefaces from all type foundries, and beautifully showcases the graphic cards of compelling font pairings.
9. Aesop’s Fables Font Pairings
This site doesn’t have a real title, and the required scrolling isn’t ideal — but regardless, it’s one of my favorites. Using Google fonts that work well on websites, this site takes classic passages from Aesop’s Fables, and turns them into living font-based fairytales. It’s a beautiful thing.
10. Typespiration
Access free web font combinations, along with color palettes and ready-to-use HTML/CSS code. Browse their library of font pairings laid out on graphic tiles, and take advantage of their free resources — they offer things like an ebook outlining 25 Google font combinations that you can get for free by signing up for their mailing list.
Bonus: Hoefler & Co. (formerly H&FJ)
I was chatting with one of our team’s designers, Meghan Rosen, about this post (fun fact: she and her husband designed and built an energy efficient passive home in Ottawa, and she documents the experience on her blog, We Build a Home). She shared her favorite font pairing resource with me, and I couldn’t help but add it in. “I super love H&FJ for type inspiration,” she said. “At the bottom of a typeface’s page, they make suggestions on how to pair each font. Brilliant. They were the originals when it came to font pairing ideas on the internet.”
