5 Google Font Combinations That Will Make Your Blog’s Design Sing

Posted By Kelly Exeter 16th of June 2016 Blog Design 0 Comments

5 Google Font Combinations That Will Make Your Blog’s Design Sing

By ProBlogger Design Expert Kelly Exeter.

When it comes to the readability of your blog, font choice (along with font size and line spacing) is crucial.

Unfortunately, this is an area where may bloggers are getting their blog design horribly wrong.

Fancy script heading fonts.

Tiny text.

Lines all squished together.

These all make life hard for the reader.

Given how much competition there is for your readers’ attention, let’s not make it easy for them to click away.

Great fontography is easy to scan, easy to read and gets the reader all the way to the bottom of your post. (At which point they will hopefully then take another action that keeps them on your website.) The good news about great fontography is it’s easy to achieve; you just need to keep things simple.

Boring, even.

Take a look at the Copyblogger site. I believe those guys set the standard in our industry with regard to reader experience and you will note they use a very simple sans-serif heading font paired with serif body text on their blog posts.

A quick word on serif fonts (they’re the ones like Times New Roman and Georgia). It used to be standard to avoid those as website body fonts because it was thought that sans-serif fonts (like Arial and Verdana) were easier to read on screens. That was true when website fonts tended to be on the small side. These days, however, a size 16 font size is standard on most sites, (it’s the size I recommend), and at that size, both serif and sans-serif fonts are equally easy to read.

The other things that affect readability (no matter how great your font choice is) are line spacing and paragraph spacing. Line spacing of 1.65 and a space of 25px after paragraphs are pretty safe settings for any blog, no matter your font choice.

Best Google Font Combinations for Your Blog

And finally, the bit you’ve all been waiting for, the font combinations that will make your web design sing.

All can be found on Google Fonts which means they are specifically designed for use on screens … and they are all easy to incorporate into your site with just a line of code.

For all of the images below, the sub-heading names the heading font first, and the body font second.

1. Bitter + Muli

5 Google Font Combinations That Will Make Your Blog’s Design Sing

2. Lato Bold + Lora

5 Google Font Combinations That Will Make Your Blog’s Design Sing

3. Oswald + Cabin

5 Google Font Combinations That Will Make Your Blog’s Design Sing

4. Playfair Display Bold + Droid Serif

5 Google Font Combinations That Will Make Your Blog’s Design Sing

5. Raleway Semi-bold + Roboto Light

5 Google Font Combinations That Will Make Your Blog’s Design Sing

The one thing you’ll note in the above: none of these combinations are particularly ‘striking’. That’s what makes them great. No one should notice the font you use on your site – they should be too busy reading ☺

About Kelly Exeter
Kelly Exeter is a writer, editor, and designer who’s endlessly fascinated by the power of the stories we tell ourselves. She explores these on her blog and in her books Practical Perfection and Your Best Year Ever. Connect with her on Facebook, Twitter, and Instagram.
Comments
  1. Great list. I’m a huge Raleway fan and use it extensively on my platform. Helvetica is another great go-to font that always works. And my favorite for bold headlines for images and infographics – Bebas Neue!

    Thanks again for the font ideas. I’ll have to check out that roboto font.

    – Jeff

  2. Hi,

    I personally liked the Bitter + Muli Google font combination. It looks clean and easily readable.

    BTW, which font combination you’re using on proBlogger. It is looking awesome.

    Regards
    Tauseef Alam

  3. Great combos! I love Raleway right now. Can’t agree more- as I designer, I have to remind myself that the purpose is NOT to have my design / type stand-out :D

  4. Fonts are one of the important things to have in design optimization for conversions. I always invest my time in figuring out the best font-face’s for my client’s website. Personally, I liked the Lato Bold for my personal blog. I hope this will allow me to get some love from readers. Also, I liked the italic style in the comment box here on ProBlogger.

  5. I have been seeking out this advice for such a long time, AT LAST! A really great article for us all who want to have a professional blog presence.

  6. Hi Darren & Kelly,

    Great help for me. I was also looking for a good font combination for my blog. However I was settled with Raleway and Serif, but I like the Bitter+Muli combination too. Will try it. Thanks for sharing at the right moment. :)

    Cheers,
    Riyaz

  7. Thanks Kelly! I’m always looking for ways to best engage visitors and to create the best user experience possible.

    I imagine that these fonts will perform well with banners, social images etc.

    Thanks again!

  8. It is a good idea to do everything which help us to improve the user experience. Font selection is actually a crucial task. I really appreciate your knowledge about fonts.

    These combinations are really good.

  9. Loved what you said at the end about if the font does it’s job, then the reader doesn’t even consciously think about it. So true!