Zip has colorized his website. Next up? He has to choose some fonts. He found that his free theme didn’t enqueue Google fonts, so he used a plugin to do it. This post goes over a few things to consider when choosing fonts for your website, followed by a list of 12 fun font pairings (not quite as fun as wine pairings, but almost) for him to consider. Each font pairing has a button linking to the font on Google if you want to look more closely at it or download the font.
Should I use Google Fonts?
Using Google Fonts gives you a wide variety of fonts from which to choose. To use Google fonts vs. hosting your own fonts locally is an ongoing debate. They are hosted by Google, not on your own website, so there’s some argument that they slow down your website. However, not too long ago WP Rocket put out a blog post looking at the advantages of using the Google fonts CDN vs hosting your own and concluded in favor of NOT hosting your own fonts. When I’ve experimented with hosting my own custom fonts, it usually ended up slowing my website down a bit vs speeding it up.
Which font should I choose?
That’s a personal decision, of course. Some fonts, like colors, seem to have a “mood” of their own. Whimsical and retro? Smart and literary? Some fonts can add to the overall design “tone’ of a website.
However, you should consider a number of things. Consider them — it’s OK to break some rules, if it works.
- Generally, if you choose a serif (with “tails”) font for your heading, choose a sans-serif font for your body font. It’s safer, but you can disregard this if you want to be daring.
- Can people read it? For instance, do NOT use a handwriting or script font as your body font. People won’t be able to read it easily and will leave quickly. (I once accidentally changed body fonts as well as heading fonts to script in an A/B test, so I know this is the case.)
- Does your font fit the theme of your website? If you own a 50s-themed diner, you might get away with Cherry Cream Soda or Fontdiner Swanky. But you might not want to use it on the homepage for your funeral parlor. 1
- Has it been overused, or does it conjure associations you don’t want? Comic Sans? Is it the 90s? Impact font? Iz your website about memez? Google something like “fonts you should never use,” and you’ll get a variety of opinions. Some I don’t necessarily agree with (Helvetica is plain, yes, but it’s a perfectly good font, in my opinion.) But fonts like Comic Sans, Impact, and Papyrus almost always make a list. I’ve seen Lobster on some lists of fonts to avoid, and I’ve seen it on some lists of fonts to love.
- Pick one or two fonts: A heading font and a body font. Don’t get crazy and add all sorts of fonts (ummm…except in a post like this, maybe?) Be consistent. Two shall be the number of your fonts, and the number of your fonts shall be two. Or one, in some cases. I use the simple and pleasingly round Quicksand as a header and body font on this website.
12 Fun Font Pairings from Google Fonts:
1Life Savers and Ubuntu
Life Savers offers a slightly retro and whimsical serif font that’s not too whimsical or overpowering as some retro fonts can be, so it’s OK to use in headings. Pair this with plain ol’ sans-serif Ubuntu for some fun.
2Amatic SC and Josefin Sans
Amatic SC seems crafty, outdoorsy, playful, fun. I used to use it on a website but found that I liked it only sparingly. It can be fun for an accent, but be careful about font size and readability when used in menus and such. I love Josefin Sans — I found this as an interesting font pairing in a pagebuilder I was reviewing.
3Emily’s Candy and Nunito
Emily’s Candy is a cutesy font (if you find the fact that its “I” is dotted with heart a bit too precious, it’s not the font for you.) It might make a great heading font for a crafting website, but be sure to pair it with a plain body font like Nunito so it doesn’t go over the top!
4Parisienne and Karma
Parisienne is a romantic script font. It’s a bit too uppity to go with just any plain body font. However, it accepts the serif curves of Karma to give your typography some je ne sais quoi. However, be careful with Parisenne. Some smaller headings can be nearly unreadable, particularly if you accidentally set all caps.
5Fontdiner Swanky or Cherry Cream Soda and Overpass
Fontdiner Swanky and Cherry Cream Soda are both fonts offered to the menu of retro fonts from the Font Diner. They bring back a feeling of yesteryear (Fontdiner Swanky is a bit like the Mrs. Maisel font.) I’d only use these for headers on retro projects. If you do use them, pair them with a plain sans-serif body font like Overpass.
6Special Elite and Courier Prime
This font pairing recalls a vintage typewriter. I think it would only work on very specific projects that have to do with writing.
7Forum and Lusitana
The New Yorker’s signature Irvin font isn’t available, nor is one close. Forum is somewhat similar in the realm of Google fonts. It’s usually safer to pair a serif font with a sans=serif font, but sometimes you dare to break the rules and be unsafe. I think this one works for a winning pair. Frustratingly, I now want to go change all the fonts on my other website.
8Merriweather and Montserrat
This is the combination I most often see in various premade theme templates. It’s a surefire combination that’s pleasant and easily readable
9Orbiton and Roboto
Want something sci-fi? Consider Orbitron. But only for headings — it makes a horrible body font. What to pair it with? Roboto (of course!)
10Pacifico and Quicksand
Pacifico is a brush script-type font that reminds me of sun and surf on a California beach, camping in Big Sur, or going on an adventure. It might be a good choice for a heading font for a travel or adventure blog. Quicksand is pleasingly round and, unlike Pacifico, readable as a body font.
11Rock Salt and Poppins
Rock Salt reminds me of something written with a marker (of course there is a font called “Permanent Marker.”) I’d only use it in headings of course, but if you want something informal, this might be one to consider.
12Satisfy and Roboto Condensed Correct
Satisfy is a…satisfyling script font. Whether you like the narrow Roboto Condensed as a body font is a matter of opinion..
So Many Fonts…What Did Zip Choose?
Zip started out loving the somewhat retro Life Savers font but found that he didn’t like it for site titles. He wanted something playful and informal for Slothverse, though, and ended up trying out Rock Salt, at least for now — a choice I would never have expected. He also found that if he downloaded the font from Google, he could import it into my Canva account to use on various graphics.
He’s trying out Poppins as a body font:
Note: After this post was eventually written, he tried out Life Savers and Oswald (including as a body font for his short posts). We’ll see if he sticks with this! I like to play around with fonts way too much and am finding something to stick with.
Currently, what I’m finding is that many readers like nice, readable Roboto as a body font and blocky Oswald as a header…but it really depends on what kind of website your have and the feel you’re going for.
Other Font Suggestions:
In addition to the 12 fun font pairings listed above, here are some other font favorites I’ve used together:
- 100% Poppins
- Slabo 13px and Lato
- Ovo and Muli (interestingly, Muli doesn’t seem to be a Google font anymore)
- Arvo and Lato
- Oswald (for a header)
- Josefin Slab and Josefin Sans
Google has over 900 fonts available, though, so the combinations are mind-boggling. Still, you’ll find plenty that don’t work well on a website.
Some Online Tools to Help Choose Fonts:
Here are tools I’ve found useful. They’re for those who need some extra help with choosing fonts that might work together:
- Fontjoy has a font picker. Choose and lock and font and it will generate suggested font pairings for you.
- Canva has a useful font selection tool that will help you pair fonts.
- Font pairings displayed with art. This isn’t really a tool to match fonts, but this display of font pairs with classic art is a pleasure to browse.
When you finally find a font pairing you like, the font names shouldn’t be too hard to remember. However, if you find yourself forgetful, write down the names of the fonts 2 and save them in a place you can refer to them easily. If you use Canva, you can put them in your brand kit so you can easily select them when you make graphics.
What’s next? I think in the next posts, we’ll help Zip get a logo (though it seems he may have already done that) and upload a favicon.
References and Footnotes- Unless, of course, you own the “Happy Go Lucky Funeral Parlor” that I ran across in London. Which isn’t a funeral parlor at all, but is the shop of the neighboring restaurant.[↩]
- Spelling correctly — I had trouble once as I was adding spelling Josefin as Josephine.[↩]
OK, we can't send you caffeine--or even coffee-- but we can send you new content. Subscribe to our email list and get new posts delivered to your inbox. If you don't specify preferences, you'll be signed up for a weekly digest of new posts in all categories, as well as occasional promotional emails and surveys. However, if you would like to customize the frequency and type of content you receive, you can sign up here.