Use fonts that complement each other.
Hi bloggers! My name’s Kjell Reigstad, and I’m a designer at Automattic. This is part nine in my series “The Principles of Design.” In this series, I share some of the basic tenets of design, and we explore how to apply them to your blog.
In the past, we’ve discussed some tips for choosing fonts. Today we’ll talk about how to navigate choosing more than one font for your site.
If you look closely at most websites (like The Daily Post), you’ll see that they’re often using more than one font. In most cases, that’s a stylistic choice. The site would probably function fine with just a single font, but the designer has chosen two to introduce a little more visual hierarchy to the typography.
You can use more than one font on WordPress.com too. When you open the fonts section of the Customizer, you can select both a headings font and a base font:
In general, I’d recommend using no more than a couple fonts in one design. Less is more when it comes to typography.
This quick set of dropdown menus can be quite intimidating! Choosing one font isn’t too tough, but how do you know that two fonts will go together nicely? To make this process a little easier, I thought I’d share a few tips.
Look for complementary moods
If you’re in a silly mood, it’s difficult to be stuck working with someone who’s serious and unfunny, right? Same goes for fonts. If your core font is bouncy and playful, it can be awkward to stick it next to a stark, rigid font.
Harmonious moods are the key to choosing a font pair. Figuring out the mood of a particular font is not always a straightforward process, and involves trusting your gut. The best strategy is to take a long look at the font and analyze what it says to you. Here are a few examples:
Matching moods is important, but you also have to be careful not to choose fonts that are a little too alike. Fonts that are too similar can seem like a mistake to your visitors — as if you meant to use the same font everywhere, but didn’t.
If you suspect that your font pair is looking a little too similar, it might be worth considering whether two fonts are even necessary for your site. It’s absolutely fine and acceptable to use a single font everywhere. You can even change things up by using a different weight or style (bold or italic for example).
Try a ready-made font pair
You’ve probably noticed that a number of the fonts in the Customizer have similar names: Merriweather and Merriweather Sans, for instance. When you see names like that, you can be reasonably sure that these fonts work well together. They were usually both drawn by the same typographer, to be a ready-made serif and sans-serif font pair. The two fonts will share a mood and the letters will have similar shapes and line quality.
In addition to the examples above, you can draw inspiration from these pairings put together by fellow Automattic designer Mel Choyce:
The most important thing to do is to try things out. The WordPress.com Customizer lets you swap fonts with just a few clicks. You can use it to preview potential font pairings before making them live on your site.
You may have noticed my subtle plug for the Community Pool throughout this post. 😉 If you have questions about your blog’s design, it’s a great place to ask the WordPress.com community for suggestions. We post a new Community Pool thread every Monday.
Do you have a favorite font pairing? Let us know in the comments.