0,00 USD

No products in the cart.

Saturday, February 27, 2021
0,00 USD

No products in the cart.

Sloth Has Fun With Fonts (How to Choose a Font and 12 Fun Font Pairings)

Zip has added some colors to his website. Next, he needs to choose some fonts. Typography is an important part of your website's design. Here's more about choosing fonts along with 12 fun font pairings he is considering.

Home » WordPress and Blogging » Sloth Makes a Blog » Blog Basics » Sloth Has Fun With Fonts (How to Choose a Font and 12 Fun Font Pairings)
0
(0)

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.
What are your favorite font pairings?
0
What are your favorite font pairings?x

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:

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.

How many hot cups of coffee does this post or page deserve?

Click on an icon to rate it.

Average rating: 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Care to share?

We are sorry that you found this post to be like a weak cup of decaf.

Let us improve this post!

Tell us how we can improve this post?

References and Footnotes
  1. 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.[]
  2. Spelling correctly — I had trouble once as I was adding spelling Josefin as Josephine.[]
Cheryl
Cherylhttps://www.caffeinejournal.com
Cheryl is a former Occupational Therapist and WordPress enthusiast who became a writer in some parallel universe and occasionally, but infrequently, publishes things in this one. She writes two blogs (or is it three) which she won't quit because she knows that blogs, in her case, are like a hydra and if she cuts one off two more will take its place. When she's not doing that, she enjoys hiking, cycling, kayaking (formerly fast, now ebike), messing around with Adobe illustrator, making assorted things, meditating (though she wouldn't call that "like," and reading. She normally doesn't speak about herself in the third person, but she sometimes uses "we" in the royal sense while writing this blog. She lives in Poulsbo, WA with her spouse, her youngest adult daughter, a very old mutt, and a Siamese cat.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You may also be interested in:

Sloth Sets up Google Site Kit

Zip has installed Google Analytics and also configured it via Google Tag Manager. Let's take a look at Google Site Kit, its advantages and disadvantages, and how to install it.

Let’s Setup Google Tag Manager

So, Zip set up GA4 for some reason. Since we're talking about analytics, let's go ahead and install Google Tag Manager and set up some pageview tags.
Share via
Liked it? Follow us on social media!
Thanks for sharing!
If you found this post worth sharing, consider following us on social media (if you don't already).
And if you have something you would like to share, consider submitting a post. Find out more here.
Send this to a friend