Size matters when it comes to readability of your blog post. I can see it now: you’ve poured your heart and soul into a blog post, but people stopped reading at the 3rd sentence because your blog is set to an adorable 12 point font. Don’t let your font style choices sabotage your hard work!
3 rules for readable content
- The body (paragraph) of your blog text should be 16px or larger
- Have 45-75 characters per line
- Set your line height to 130% or greater
Why should my paragraph size be that big?
Your font size needs to be easy to read. Why? Let me show you.
- This is what size 10 looks like
- This is what size 12 looks like
- This is what size 16 looks like
- This is what size 20 looks like
So which line is easiest for you to read? Uh-huh, I thought so. So stick to 16px or larger. My own font size is set to 20px.
Why does the number of characters matter?
It’s all about eye fatigue. If your character ( space or letter) per line is less than 45 characters your reader’s eyes get tired jumping from line to line. If you have more than 75 characters it’s easy for your readers to get that glazed look. The ideal line measure is 66 characters per line.
Now there’s no trick to change the characters per line. If you have the ability to change the width of your posts in CSS or in advanced templates, do so. If you do not, don’t worry. It’s likely your blog design is within or close to the limits.
Why should I care about line height?
No one reads anymore. Sorry, that’s just the facts, Jack. Everyone scans a blog post. And if your readers are scanning your blog post, then you need an easy-to-scan line height of 130% or greater. Not convinced? Look at the three identical paragraphs below. Which is easiest for you to scan?
Bonus: What about the font size of my headers?
OK, you’ve made the change to size 18 font for your paragraph, but now you have a new problem: that’s the same size as heading 3. What should you change your headings to? Here’s the general rule when it comes to font sizes:
- Body (paragraph) size
- Headlines are 2.2x larger than the body (heading 1)
- Subheadings are 1.5x larger than the body (heading 2, 3, 4 …)
- Navigation elements are 80% the size of the body
- Footer or legal text is 80% the size of the body.
So if you set your body font size to 18px, then:
- Headlines are 40px
- Subheads are 27px
- Navigation is 14px
- Footer/legal text is 14px
Of course, rules are meant to be broken. If it fits your blog style better to have your headlines be smaller, closer to 35px, that’s fine. Or if you want your navigation to be big and bold, go ahead and make the font larger.