0,00 USD

No products in the cart.

Monday, April 12, 2021

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:

1
Life 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.

2
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.

3
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!

4
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 accidentally set all caps.

5
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.

6
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.

7
Forum 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.

8
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

9
Orbiton 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!)

10
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.

11
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.

12
Satisfy 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:

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 anicon 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.[]
Coffee Image for Email Subscribe
Get Caffeinated!

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.

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:

Recently Popular

Share this
Send this to a friend