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

2. Lato Bold + Lora

3. Oswald + Cabin

4. Playfair Display Bold + Droid Serif

5. Raleway Semi-bold + Roboto Light

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 ☺