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.
Okay, but the font size of this post’s text is 14 pixels, not 16. The first line under the headline about limiting line width to 75 characters is 107 characters long.
This was a guest post, Mark — I bet the author practices the guidelines most closely on their own work.
Hey guys, yes, indeed I do (: If you check out http://www.attentionthievery.info and http://www.informationhighwayman.com you’ll note that the font sizes are 16.3 and 16px respectively, and that line widths are no greater than 75 characters (usually closer to 70).
So, you write a guest post and you expose at least 2 of five errors made by the blog that’s hosting you. Nice way to be a guest! :D
The host is a great blogger but no one is perfect. There is always something to learn.
I am so glad there people who pay such attention to detail.
My question is how do you know what the size of the font is?
If I am not mistaken, you can change your browser and computer
setting to accommodate the reader?
Been doing websites for a while, only been blogging for a 3, so I
am still learning how to do all the fine tuning
Thanks for pointing it out,
If you use firefox, you can check it with extensions firebug/web developer toolbar. Click view css with wdtbar and click ctrl+f to find, then type font-size: or font, that will lead you to the font properties of any webpage. Some are in ems, pixels, or percentages, so keep that in mind as well.
Interesting post – I’ve definitely got a little tweaking to do – but I’ve always preferred larger font sizes I think I set mine at 14 or 15px I’ll have to look back and see when I get home.
Great ideas! Thanks!
Will start implement them immediately!
I changed my site’s font size from 14 to 16 and I agree that it looks a lot easier to read. Thanks for the tip!
Great post Bnonn. I was well aware of the reverse text problem but I never thought to think about the height, leading, etc.
I will definitely be putting these tips into practise :)
It rather controversial for determining the minimum font size as some font type at 16px may looked like just 12px. Hence, we should be fixing the font size and the font type all together to make sense.
This is true; 16px is usually a good size for fonts designed to be displayed on the screen.
Other fonts often need to be even bigger. For example, with the advent of technologies like TypeKit, many bloggers are picking print fonts because they look different and new. But print fonts usually have a much smaller x-height than screen fonts, which makes them look much smaller. Take 16px Garamond or Palatino, and stick them next to Georgia at 16px, and you’ll see what I mean. Georgia is thoroughly readable at this size, while Garamond and Palatino (both excellent transitional humanist fonts that look great on paper) will seem tiny and hard to read.
I love the article and am trying to implement the changes, but I don’t know where to change the Line Width in my style.css, any idea?
I hadn’t checked these things in ages, but as it turns out, my content is written in 15 pt font. I would change it, but that would totally screw up all my left-margin aligned photos… and I just can’t give them up. I can’t!!! I write a lot, and sincerely people sometimes need a break from all the juice. Right aligned images bug me.
Still- thanks for the “food for thought” especially on font size. I wondered about this when I was building the site.
This is fantastic advice. I was relieved that my own website doesn’t make any of these mistakes (I’ve been pounding away at it for months…), and I’d really like to see more websites follow these guidelines. I can’t count the number of times I’ve walked away from good content because of poor web design.
Just changed my font size to 16 and wow…what a difference!
I’ve been using the drop cap for awhile now just because I like the way it looks – I had no idea it increased readership.
Thanks for the tips!
Wow, never even thought of these details. I just launched a new blog and plan to do a bit of tweaking. Thanks!
I’m going to give this a shot, at first sight 16px does look pretty huge with the Arial font.
In a few days, if I’ve gotten used to it and it hasn’t negatively affected my bounce rate then I might go with it. It’s an interesting experiment :)
Nice points made here, Bnonn.
I’ve been thinking about the caps issue for a while — not so much in terms of all caps, but rather capitalizing letters within the titles of posts, and how it affects readers when it’s dropped all together. Though I’m all for excellent grammar, I feel the look of it is more appealing and less formal, thereby making it more attractive.
Next thing you know, I’m going to be thinking about dropping correct spelling for text-spelling. Just kidding!
Do you mean Initial Caps Like This For Titles?
I’ve wondered about this myself. I have no evidence or research to show what difference it makes either way. I personally prefer normal sentence case, but initial caps are definitely common for titles—so common I’d call them a “standard”.
I’ve heard one direct response marketing source say that initial caps should always be used because they increase readership. Maybe that’s because people notice them more, or because it helps to pick out the title as a headline.
But I also note that David Ogilvy, who was an absolute research fiend (I got much of my knowledge about typography from him), seldom used initial caps in his headlines. So…who knows! Time to get testing I guess.
I agree that 14px is good and 16 is just too huge. If you’re using serif fonts, perhaps 16 is better, but for sans-serif, which are generally considered easier to read on the web, they are just too loopy and bubbly that large.
Doug, that sounds like something many web designers say. But without research to back it up, it’s just an opinion. And the research indicates that the vast majority of web users prefer larger fonts, around 16px.
The fact that it seems “just too huge” to you doesn’t mean it seems “just too huge” to your readers. Do you really want to reduce how many people read your blog just because you prefer that font size? Seems counter-productive to me!
Btw, there’s no clear evidence that sans serif fonts are more readable than serif ones online; any more than there is clear evidence that the opposite is true offline. Despite what many people think. See Alex Poole’s article, Which Are More Legible: Serif or Sans Serif Typefaces?
Wow! Great points to consider & put to use. Themes on WordPress & other platforms are usually pretty simple to tweak by editing the CSS, but theme designers should consider this when creating a theme in the first place. I’ve made the mistake of breaking the left margin & having tiny fonts. Now, I can’t help but wonder how much it’s cost me.
Hmm, how come most of bloggers loss these big impact-small stuffs. I need to fix line high of my own.
Thanks for the great post!
Interesting, changing my font size….
excellent tips. i will use it, mean while can u tell is there any way to reduce the bounce rate
Well, reducing bounce rate comes down to a lot of factors. These font changes should reduce your bounce rate to some extent, assuming your content is interesting, because more people will be inclined to read it. The more inviting your typography and layout, the lower your bounce rate tends to be, within reason.
But I could certainly do a follow-up post on reducing bounce rate if Georgina at ProBlogger agrees (:
In your post you stated, “[a]ccording to research conducted by Ogilvy & Mather…” and then put forth some statistics regarding drop caps and its effect on readership. This study and research must have had a tome of information other than the singular drop cap example. If you could you please cite the research so that we could all go and harvest some of this valuable knowledge that would be great.
Having valuable metrics regarding reader tendencies and behavioral patterns can be the keystone to a successful blogging platform. Heck, look at google+ and its concerted efforts on human-social behavioral patterns.
Hey Ryan, unfortunately I’m not aware of Ogilvy & Mather publishing the results of their research publicly. Everything I know of their findings was gleaned from David Ogilvy’s books.
That said, Type & Layout by Colin Wheildon is widely regarded in the direct response industry as the go-to reference work on how typography affects readership etc.
Thank you for the response to request for more research information. I will look into the Type and Layout site by Colin Wheildon for some more info on this subject. Again, thanks!
Font size is what I’m now focusing upon. It’s a good thing these 5 general mistakes have been pointed out. I’m sure if people read this post many sites would become quite friendly to the eye. Although you say fuchsia is a thing of the past yet I’ve stumbled upon many modern sites having this theme and believe me I’ve not spent more than 10 secs to close it and kept rubbing my eyes as it was kind of electric shock for the eyes. It was pathetic, how could the site owners distinguish what is written from the extremely bright background? Nice post though the points may seem very little to consider for some but if all practiced equally, I think would result in a superb site.
Thank you for the article! I already corrected some of mistakes that I did.
Thanks for this post. I don`t know if the font is too small in my blog: http://www.vidaorganizada.com. It`s 14px and always seems right, but my bounce rate is high, and MAYBE it`s because of this. I tried to grow it up, but I think it looks ugly with the design.
Is this in 16 font size? Which fonts do you recommend? Where do you go to find the size of your font blog?
Hey Mary, no, this font is 14px. Bear in mind I didn’t design ProBlogger; I just write for it :)
Finding out your font size is pretty easy if you have a plugin like Context Font. Or if you want something a bit more advanced to inspect the code of the site etc, Firebug is your man.
Font size of 16px seems a little overboard for me, mine is currently at 13 and I had a good intention of increasing to 14. Giving it a thought now after reading ur post.
Hello, this is my first visit to this blog, I got know from DBT. First, this is a great post Bnonn.I got a question, not sure whether it has already discussed on this blog or not. My font size, especially the line padding, line width and somewhat text differs when I view it on different OS, such text looks a bit hazy on Windows but when I see the post in Linux based Ubuntu, it’s all fine. Moreover, the line width also different. Is that okay? or I need to work on it. Any advice.
Hey Kalyan, thanks for your kind words. Yes, font rendering is different between platforms. In my opinion, the only platform that does a decent job is Linux. Apple font rendering looks blurry, and Windows font rendering either looks even more blurry, or very pixelated, depending on the age of your browser. But opinions differ. Many people love Apple’s font rendering technology and think Linux looks a bit too crisp.
In any case, as long as your audience is accustomed to the way their browser renders fonts, I wouldn’t worry too much about that. Unless the font really looks very malformed or hard to read, like some letters get squished together etc. This can happen. I always test my custom fonts very carefully in Windows because they tend to not display very legibly compared to Linux and Mac. Sometimes there’s a specific font value that you have to pick. For example, at http://www.attentionthievery.info I wanted to use a font called Arvo. It isn’t really designed for screen display, but I found that it looked pretty good in Linux at most sizes over 15px. On Windows, though, I had to pick a very specific font size: 16.3px!
Anyway, once you’ve got the font actually looking good (and you don’t have to worry about this for default fonts like Arial, Helvetica, Georgia, Verdana and so on), it’s just a matter of making sure that your line width and height is sufficiently within that sweet spot that it doesn’t get pushed out again by differences in rendering. For example, if you’re really pushing your line width and it’s right at the 75ex limit in a conservative renderer, then it might get pushed to 80ex in some other renderers, which obviously you don’t want.
But small differences, like 70ex in one browser and 75 in another, is no big deal. Hope this helps!
Thank you very much Bnonn for your time and for your elaborate explanation. I will for sure keep your suggestions in mind. But, I guess, most of the people across the globe use windows and don’t you think, we must cater most to the windows users as we need to please them, keep others readers of different platforms in tact as well. As you said, fonts on windows might go blurry, so better we keep the fonts simple and do not push with flashy or too many custom characters so thanks it does not go blurry there. Anyway, thank you very much for your wonderful explanation. I am sure other readers and bloggers will be benefited by this too.
Oh, one thing I forgot to mention is that screen resolution has a huge effect on how a font looks. On 1024×768, for example (about the lowest resolution you’ll find most computers doing these days), 16px looks pretty big. On 1920×1080 (full HD), it looks pretty small—especially if it’s only a 19″ or 20″ widescreen. Of course, on a 24″ widescreen, it looks a lot bigger, because it’s being spread over a larger area, because the pixels are bigger!
Hope that makes sense (:
Wow. My text font was set at 12. I never realized how tiny and difficult to read it was, until I changed it. I’ve only gone up to 14 for now (I’ll have to ease my way up to 16). My line length looks like it’s about 70, and I do post images with each post. I used to post them in the left margin, but yeah I agree, it was disruptive. So now, I post them top center, letting the beggining of my post follow the bottom of the image.
Thanks for this interesting and useful post. I have improved the look of my blog with one simple click!
Although you say its “sacred” left image alignment is a bit debateable simply because some bloggers may want the image to get some prominance depending on its relation to the content..
Also I recall another post on this blog advising min font size of 14 while you say 16? Having it too big seems to look like a kindergarten piece..lol!
True, if you want to give the image prominence, then breaking the left margin makes sense. Just make sure that it’s conveying the main point of the post very clearly. Otherwise, you’re just distracting your readers’ attention away from the content with an image that doesn’t seem relevant.
16px does look big when you first try it. But after you’ve used it for a day or two, you realize why it’s the default size for browsers. Anything smaller starts to feel very cramped and hard to read, and you have to squint and hunch closer to your screen. Don’t be fooled by how a font feels in comparison to what you’re used to. The research is solidly in favor of larger fonts. And besides, we acclimatize very quickly. If every website switched to 16px today, in a week 14px would look stupidly small :)
I like white with black text and main body text as #14 size on Arial or similar font. Not sure #16 size for main content, since all word press themes may not looks good with that size and becomes little larger. Thanks for sharing – Manickam
Great ideas, will save this for the next design!
Great article with a lot of good ideas.
I am definitely going to check out the resources you suggested.
Do these include how to change the settings in a blog? or is
changing the themes default settings different for everyone?
Thank you for your contribution,
Hey Jeff, some themes will give you options for changing typography, but sadly most do not. Very frustrating.
You’ll probably have to go into your theme’s code and specify some settings manually. I think I do have a code snippet as part of Attention-Thievery 101 Online Content, although I’m afraid I don’t remember which video it is.
Great article. Nicely described. It seems that you have noticed this things I mean you must have noticed what user or readers want on a blog. thanks for the nice information.
hey great guest post! I agree with the 16 pt font. it makes it easy for people to read your blog better!
Thanks Matthew. Just note that it’s 16 px, not 16 pt. Pixels and points are quite different :)
please take a peek at my site and welcome thoughts opinions….I like to have my photos in the center as opposed to left with the writing underneath. I try to stick with basic black and hopefully my font is big enough….I don’t like it too small myself so try to watch the size…interesting article!! Thanx!!
You know, I think I was accidentally doing most of this right! It all makes so much sense.
Here’s an example of people not understanding their market: a famous diet plan for diabetics has small type fonts in all of their literature. Diabetics tend to have eye problems. Wouldn’t you expect those marketing to them to understand that and accommodate their need by using easier to read fonts? Amazing.
All copywriters can take a great lesson from this post. How our copy looks is almost as important as what it says. In fact, perhaps it is as important because if bad looking copy turns readers off, well it simply won’t get read! I’ve had countless experiences where I’ve taken one look at a chunderous web or printed page and reached for the bucket. Screeds of unbroken prose, uber long sentences and ‘lost’ headlines are enough to turn even the strongest reader’s stomach. But how often do we copywriters forget to factor the power of visual presentation into our final content? Too often I say. Lots of the tips in this blog can be put to valuable use in any web copywriting. Don’t forget to employ bullet pointed lists, subheadings and shorter paragraphs too. Attractive copy turns heads and keeps readers. So it’s high time copywriters got more hung up on looks!
Funny, I was on the point of following the herd and switching to a smaller font when I read this and compared your suggestions to my website (http://theWebalyst.com). I’m following all your guidelines, except for some left-alighned images and feeling pleased I read this because it does make sense.
I’m still not sure though, because whatever the metrics say, one thing users like is consistency and a website that is different can lose people for that reason too.
Have to say though I do like the font and layout over at the author’s website: http://attention-thievery.informationhighwayman.com/
Mark (in London)
thanks D Bnonn I think so its nice to share good things and of course I gonna use that as a junior blogger. But I couldn’t set line height to 130% and I can’t guess how much it will be……..Using wordpress, Any Idea as I couldn’t find a relative option in my css
Hey Absar, I don’t think most themes will have the option to set line-height. But if you’re willing to go into your theme’s code, you can manually specify it on the body tag, with “line-height:130%”.
I’ve really enjoyed this. :)
I was thinking of doing reverse type because my theme is dark, but kept my content area white by way of intuition. Man, 50 to 400 percent is a huge hit. I also agree with line-height and font-size, both are equally important. I practice all of these in my work, although I can still do some improves on the character total length.
I use drop caps and my readers love it. As to fonts, it is always good to use web safe fonts instead of adventuring on strange fonts. The more pleasing and clearer the letters are the more happy and sticky your readership will be.
Drop caps you say huh? hmmmmm… after reading that and some of the comments below, I wil have to check that one out. I’ll try to do it with an A/B test to see how it improves readership
Great post! As a graphic artist, typography is very near and dear to my heart! While I know about typography dos and donts for print, I wasn’t aware of the studies done for the web. Will definitely have to keep this in mind!
An attractive looking blog will get the attention of the public. But it is a blog with interesting posts that get their attention
Really practical advice, simply out & easily actioned … with a little help from the crew at elegant themes ;-)
Although bigger font size is easier to read on some fonts but there is a balance one needs to consider when designing a website. Sometimes using “too” large fontsize will give readers a feeling that your website is not professional or not serious. My opinion.
Wow. I think I’ve broken every single rule on my various websites and blogs. Honey–I got a lot a fixin’ to do.
Reverse type isn’t a problem in and of itself. The problem is the perceived contrast between the type and the background. White text on black is too high of a contrast. Gray on black, not so much.
Line length is important, but isn’t a hard-set rule as to how many characters. The ideal line length is based on the type size, leading, as well as other factors.
16px is huge. It really is. While it’s certainly readable, it will create unusually short line lengths in a lot of scenarios. And, for better or worse, a lot of people comment when the type is too big.