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:
Life Savers
and Ubuntu
Life Savers offers a slighly 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.
Amatic 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.
Emily’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!
Parisienne
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 accidentlly set all caps.
Fontdiner 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.
Special 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.
Forum
and Lusitana
The New York Times’ 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.
Merriweather
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.
Orbitron
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!)
Pacifico
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.
Rock 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.
Satisfy
and Roboto Condensed
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:
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.[↩]
