This guest post is by Bnonn of Attentionthievery.info.
You may not realize it, but the font settings on your blog can have a huge effect on how many people read your content.
And how many people read your content has a huge effect on whether a post goes viral.
How huge? Well, by some accounts I’ve read, just one common mistake with colors could reduce readership by a factor of five. And if you’re not making that mistake, you’re probably making at least one of four others. So in this article, I’ll give you the five most important best practices for presenting text to keep readers glued to your content, and away from the old back button.
Font size—16px minimum
At the very top of the the pile of legibility problems is font size. Back in 2005,
Jakob Nielsen reported that in a survey of web design problems, bad fonts got nearly twice as many votes as the next contender—with two-thirds of voters complaining about small font sizes.
Sadly, nothing has changed since then. A random sampling of
new blog designs at SiteInspire (a web design gallery showcasing the best of the best designs) shows that the average font size for body copy is
12 pixels. Some as low as
ten pixels. None over
14 pixels. Similarly, if you randomly sample offerings from the popular
Elegant Themes or
ThemeForest, you’ll find that every single theme sets post content at 12 or 13 pixels.
And of course, other theme creators tend to follow the lead of the bigwigs.
But as usability and typography expert Oliver Reichenstein of Information Architects
points out,
16 pixels is the font size that browsers were
intended to display by default—and it is
not big. 16px text on an average screen looks about the same size as 12-point text in print. That’s the default size for most magazines, as well as all word processors, because it’s the size people find most comfortable to read. Many people—especially those over 40—find it very difficult to read smaller text. As Reichenstein observes:
There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small … At first, you’ll be shocked how big the default text is. But after a day, you won’t want to see anything smaller than 100% font-size for the main text. It looks big at first, but once you use it you quickly realize why all browser makers chose this as the default text size.
Use dark on light text—reversed is no good
Fortunately we’ve pretty much moved past the days when content authors thought that
fuchsia on blue text was cool. But
white on black text, known as reversed type, is still pretty common. As are variants like white on some other dark color.
Reversed type reduces not only the number of people who’ll bother to read your content, but also their
comprehension of it. This is because it strains the eyes. Staring at reversed text for an extended period tends to create a kind of “glare” effect, where you feel like the letters are too bright to look at. Depending on what research you consult, studies show that light on dark text reduces your readership between 50% and 400%.
Why risk losing so many readers? Black or very dark gray on white looks clean, and there are plenty of great themes that use those colors.
Line width—45 to 75 characters
Here’s another little-known rule that a lot of blogs break. In order for your eye to easily follow one line to the next, you want no more than 75 characters in each line. This is called the line measure. Beyond a measure of 75 characters, it’s hard to track the end of one line to the beginning of the next without getting lost.
On the other hand, if you have a measure of less than 45 characters your eye will get fatigued quickly, because you’ve barely started to read one line when you have to jump to the next. You feel like you never get a chance to rest.
For this reason, your ideal post content area will have lines of text about 60 characters long. Of course, you do also have to take aesthetics into account. On many blogs, the “ideal” measure leaves a huge gap on the right margin, or makes the text seem squished into a tiny area. I use a measure of around 70 characters on
my own website for exactly that reason. But if you’re pushing past 80 characters, you’re reducing your readership—guaranteed.
Line height—130% or more
Fortunately this is a less common mistake. If you’re using a professional theme, you probably don’t need to worry.
To give you an example, I’ve set this paragraph at the default line height (also called leading, after the strips of lead used to separate lines of text on old printing presses). It feels cramped and uninviting to read, and it’s hard to follow the lines from one to the next because they blend into each other.
On the other hand, this paragraph is set with a line height of 200%—equivalent to double spacing in a word processor. I’m sure you’ll agree that the lines here feel way too disconnected from each other, and unless you’re submitting a research paper this is not the way to go.
Finally, this paragraph is set with a line height of 150%. That means that for every pixel of font size, there’s one and a half pixels of distance between the lines. This turns out to be pretty reliable sweet spot for most fonts you’re likely to use on a blog—but feel free to experiment between about 130% and 160% to see what works best for your own content.
The left margin—don’t break it
This last tip isn’t exactly a font issue. But it fits into the same general category. Bloggers routinely include images in their posts. Whether or not that’s
really a good idea is a topic for another time—but for now, let me just give you one piece of advice.
The left margin is sacred. It’s how we track text down a page in the Western world. It’s the “ground” out of which the lines grow (often to quite different lengths), and it’s the foundation for our eyepath as we read down the page.
But if you break the left margin, that all goes to hell. Your eye has to scan around to try to pick up the new margin, so you can keep on reading.
In other words, every time you left-align an image, you put a speed-bump in your reader’s path. And you’re compounding the problem by dragging his attention away from the text with your visually dominant image. Needless to say, readers who keep being distracted and having to relocate the left margin often don’t read to the end of a post—so they often don’re share it or comment on it.
Bonus tip: drop caps increase readership
By “drop caps” I mean initial capitals, where the first letter of the first word of your post stands out much bigger than the rest. According to research conducted by Ogilvy & Mather, this increases readership of a piece by an average of 13%.
Drop caps aren’t built into most blog themes, and they can be tricky to do on the web, but if you’re up to a little coding, check out
this tutorial on how to create them.
Five mistakes: which ones are you making?
Now is the time to head on back to your own blog and see which of these five important best practices you’re not practicing. Then, fixum! But don’t forget to share the changes you’ve made in the comments below!
Bnonn is the author of 25 free video lessons on how to turn visitors into customers—part of his conversion-optimization course ‘Attention-Thievery 101’. Known in the boroughs as the Information Highwayman, he helps small businesses sell more online by improving both their copy and design. When he’s not knee-deep in the guts of someone’s homepage, he is teaching his kids about steampunk, Nathan Fillion, and how to grapple a zombie without getting bit.
I'll be the first to admit that I was slow to start using images consistently on my blog. Mostly it's because I'm busy lazy and didn't want to spend the time finding just the right image to illustrate my point. However, images are a powerful addition and help tell your story...sometimes better than the words you write.
