You consistently write a blog post every week. You’re witty, and you’ve got stories to tell and services to sell.
You know you can help people out if they read your blog posts and sign up to work with you.
So why is no one reading OR buying?
It might be because your content is way too difficult to read. And I’m talking literally – people can’t see the words you’re putting out there.
The blog design sins fall into two main sections (aka reasons your content is hella hard to read):
- The font is difficult to read due to size, color, font type, line height, etc.
- The layout just isn’t enticing
Herreeee weeee gooooo!
Let’s examine the ways that font is driving people away from your blog.
Font that’s teeny tiny.
Here’s an example:
“I want to read you, I do! But I can’t see.”
Font color is no bueno
This can mean a few things, but the biggest sin is font that is either uber low contrast or uber high contrast. Low contrast would be like light grey text on a white background. There isn’t enough variation between the two colors for the font to stand out. Example:
High contrast, on the other hand, means the colors are wayyy too different. Such an example would be bright orange on a white background, OR the biggest culprit of all – white text on a dark background. Your reader’s eyes will be screaming if they have to read an entire blog post that looks like this:
“NO THANK YOU.”
HOT TIP: Choose a dark grey/almost black color for your font. My text has always been black, but then I visited Paul Jarvis’s website and holy cow, his content is so easy to read. I realized it’s because he’s using a dark grey (among other things). It creates a softness for the eyes. So, I changed mine, and I love it. Learn from the greats, people!
Line height is too small or big
If the sentences are too squished together, it’s hard for reader’s eyes to decipher between lines of text. There needs to be enough space for each line to breathe but not so much space that the eyes get lost going from one line to the next. Here you can see line height that’s too big, and one that’s too small.
HOT TIP: A good standard for line height would be start at 1.5, and go up or down from there.
Font is too cursive-y
The handwritten, cursive-y kind of font is so hot right now. Cursive is pretty for a few words or logos. Like my logo, for instance… But if you’re using a cursive-y font for full sentences, that’s no fair to your readers. It takes more concentration to read an actual person’s hand-written sentence, and the same goes for fake handwritten fonts.
Text width is too large or small
This is actually something I just changed on my site. If a reader is on a laptop, the text could possibly span the entire length of the screen. But reading that would be damn near impossible.
Your eyes can’t follow a single line of text for more than about 90 characters without being thrown off. So check how many characters there are on one blog post line. If it’s more than 90, definitely consider bringing in the width. As an example, here’s a screenshot of my text before I shortened the width and after :
SECTION 2: Layout isn’t enticing
I’m going to state the obvious: print is different from the web. *mind explosion*
But why, Miss Tiff? Because text in a book requires deep reading – the reader digs deep into their brains to read in a linear fashion. You can read blocks of text in a book because your brain is geared up for that type of reading.
The web is a different beast, though! People’s attention spans are much shorter when they’re viewing something on a screen, their eyes are apt to hop around and they need text that is laid out so their eyes can skim.
Let me repeat:Skimmable content is essential for online reading. Click To Tweet
This means that your copy can’t just be a few paragraphs of text with all the juicy bits burrowed in. For example, this is not enticing:
The juicy bits need to stand out, either with stand-alone sentences, headers, bold, different color, etc.
It can be taken too far the other way as well, though. As in, if you treat every single sentence as a juicy bit, then none of it stands out. And it makes people’s eyes burn. See:
“Ahhh I don’t know where to look! Close this tab ASAP!”
There’s a happy medium here. And I have a bit of a process for getting to that happy place. This process becomes second nature after awhile, like breathing. That’s not hard, right?
Put all of your content on the page – whether that be Evernote, a Word doc, or your WordPress dashboard. Put it all on there! Don’t worry about laying it out right now.
Read your content twice – once out loud. Read every word from start to finish, and don’t do any editing or changing. Just get a feel for your words, get an idea of the main points you have, and the sentences that make you say, “I’m such a good writer.”
Dirty work time! Those sentences that stood out to you? Those will probably make good blockquote sentences or headers. Maybe there’s a list somewhere in there (much like the one I’m using right now!).
The way to think of it is – if you could use a few sentences or phrases to draw the skimmers in, which ones would they be? Those are the ones that you emphasize in your layout. So get to work adding headers, blockquotes, bolding, italicizing, breaking up huge chunks of text.
HOT TIP: Do NOT underline your text. This may be a personal preference, but I can’t stand when text is underlined and it isn’t because it’s a hyperlink. Underlining text clutters up the space, and it confuses readers, because most of us have been trained for years to think that underline = link. If you need emphasis, either put the sentence on its own line, italicize it, or bold it. No more wire hangers underlines!
Repeat this process of calling out sentences, re-arranging, and header-ing until you reach a point where you can skim the blog post and get the gist of what the post is about. It’ll be very obvious once you reach that point.
HOT TIP: Scroll out to 50% view to see what the whole page looks like at a skimming view. See if you notice any huge chunks of text (like more than 4-5 sentences), or too many headers competing against each other. Being able to take in the whole page definitely helps me every time.
Get to work, you beautiful unicorn
Alright – go check out your blog, see if you’re committing any of these sins, and fix them, my friend!
» Leave a comment below if you want me to check out your site + give suggestions for your font/layout!
It’s all about transforming your blog so it’s well-known and profitable – ALL on a bootstrap budget.
Sign up for updates and sneak peeks, because you’re ready to take control and purr, baby.
CSS for Web Designers
Learn more about my upcoming CSS for Web Designers course, and get useful tools + tutorials to make you a better web designer.