10 Typography Mistakes That Make Your Blog Unreadable (+ FREE Cheat Sheet!)

 
 Create a comfortable reading experience for all your blog readers by avoiding these 10 typography mistakes in your blog design and social media graphics! • graphic design tips | graphic design tutorials | web design tips | web design tutorial #typography #blogdesign #bloggraphics #socialmediagraphics #bloggingtips #graphicdesigntips
 

When designing our blogs and graphics, we tend to focus on making our designs look pretty. Sometimes, as a result, readability gets compromised.

As a blogger, I’m sure you want your posts to be read by as many people as possible. But before that can happen, you have to make sure that your words are easy to read.

Create a comfortable reading experience for all your blog readers by avoiding the following typography mistakes!

Click to tweet: Is your blog unreadable? Read this post to see if you’re making any typography mistakes.

1. Using too many fonts.

 Using too many fonts

Using too many fonts can be distracting and make your design look like a ransom note.

Stick to 2–3 fonts at most, and you’re good.

2. Stretching text disproportionately.

 Stretching text disproportionately

Don’t do this! It just looks ugly. 😵


Tip:

Hold down the shift key while resizing your text in Photoshop (or other design apps) to make it proportionate.


3. Using heavy drop shadow.

 Using heavy drop shadow

Drop shadows often get misused, even in the hands of pro designers.

While they’re an easy way to add depth to your designs, you have to be careful not to overdo them!

Back in design school, I learnt that the secret to great design is subtlety. And it definitely applies to drop shadows.

Good drop shadows look natural and almost unnoticeable.

4. Using ALL CAPS with cursive/script fonts.

 Using ALL CAPS with cursive/script fonts

Cursive and script fonts just aren’t meant to be used with all caps.

Just like cursive writing IRL, almost all letters should connect to each other, which doesn’t happen if you only use capital letters.

5. Not using light fonts properly.

 Not using light fonts properly

While light fonts are great for elegant and modern designs, they easily cause readability issues.

As a general rule, avoid using them in small sizes and against dark backgrounds.

If the font you’re using has several font weights (such as Raleway, as seen in the image below), it’s best not to go for the extra-light or thin versions. The only exception to this is if you’re using them for large (and I mean LARGE!) headlines.

 Raleway light font weights

6. Completely ignoring hierarchy.

 Completely ignoring visual hierarchy

With visual hierarchy, you can guide viewers’ eyes through information in your design, in order of importance. This is accomplished through strategic placement of visual elements.

In the image above, notice how the graphic on the right is soooo much easier to read than the left? That’s what clear visual hierarchy does. 😉

A few ways to create visual hierarchy:

  • Size up elements you want to draw attention to (e.g. headlines).
  • Use contrast (in colour, shape, texture, etc.) to highlight important areas.
  • Position visual elements in a logical manner (e.g. top to bottom/left to right, in order of importance).

7. Centering body text

 Centering body text

Unless it’s a poem or lyrics to a song, don’t center your whole body text.

It makes your post awkward and hard to read, because each line starts at a different point.

It’s fine to center small sections of your text, such as quotes or click-to-tweets. Just don’t do it for the whole damn thing!

8. Justifying body text.

 Justifying body text

Justifying your text creates odd gaps between certain words, which disrupts the reading flow for your users. So stick to good ol’ left alignment.

9. Using a fancy font for body text.

 Using a fancy font for body text

Now this is just torture for all your readers.

Fancy fonts are fine for headings, but when it comes to body text, the simpler the better.


Tip:

Use a sans-serif font for a modern feel, or a serif font for a more traditional look.

 Examples of sans-serif and serif fonts

10. Using light text on dark background for body text.

 Using light text on dark background for body text

Using light text on dark background for your whole blog post can strain your readers’ eyes. It’s just not ideal for text-heavy content.

Conclusion

To recap, here are the 10 typography mistakes that make your blog unreadable:

  1. Using too many fonts.
  2. Stretching text disproportionately.
  3. Using heavy drop shadow.
  4. Using ALL CAPS with cursive/script fonts.
  5. Not using light fonts properly.
  6. Completely ignoring hierarchy.
  7. Centering body text.
  8. Justifying body text.
  9. Using a fancy font for body text.
  10. Using light text on dark background for body text.
 
 

Related Posts