30 Ways to Improve Readability
When I asked what the most important aspect of design was, many of you replied that it was readability; how easy it is to read your content.
People come to your blog to read articles, and the easier they are to read, the better. A design that obscures the content will only turn visitors away.
So what can we do to increase readability, and keep those readers reading?
30 Things That You Can Do Now
- Underline your links. Readers expect links to be underlined, so don't disappoint.
- Use appropriate space between lines in a paragraph. A quick way to test this is to divide your line-height by your font-size. Ideally you want a value around 1.5.
- Clearly separate your post from the rest of your design. It should be obvious where the post starts and stops. Your sidebar, comments, post meta etc. should be visually distinct from the actual content.
- If you use pull-quotes, make sure they're extremely obvious and near the top of the article. If a user doesn't spot them quickly, they aren't of much use.
- Keep it brief. Odds are that if you've written something in 50 words, you could probably say it just as well in 30.
- Use Snook's Color Contrast Checker on your font and background colors, to ensure the combination is readable to those with visual impairments.
- Use a structured hierarchy in your document, e.g. Title - Intro - Heading - Text - Subheading - Text, etc. This gives your page a more logical flow.
- Refrain from breaking up posts with adverts in the middle. This will interrupt the readers thought train.
- When styling italics and bold, there is usually no need to change their color. Doing so will only confuse readers about what is and isn't a link.
- Use semantic markup, i.e. h1, h2, h3 for headings, strong for bold etc. Many of your readers will be reading your content in a feed reader, where your <span class="myheading"> will have no effect.
- Use post images at the start of the post. In most cases, their purpose is to draw users into an article. Naturally, they do this best at the top of the article.
- Blocks of text are bad. Nothing scares a web user away more than a wall of text. Liven things up a little!
- Left aligning is usually best. Very rarely is centered or justified text going to look better, and I can't think of any time when right aligning is the best choice.
- Take care with text wrapping. Depending on how your text wraps around an image, you may want to rephrase the text, or resize the image to let things sit better.
- Headings and subheadings must stand out. One of the major benefits of using headings is that readers can scan down and see exactly what is in the article. This only works if the headings stand out, so feel free to use larger fonts, underlines, colors or whatever else is necessary.
- Know when to use an ordered list, and when to use an unordered one. If your bullets are in a particular order, then number them.
- Indent your lists. Show that they aren't just more paragraphs.
- If a certain image plays an integral part in your post (e.g. a diagram or chart), then center it, and skip a line before and after. This shows that the image is a part of the article, not just a decoration.
- Remember that your posts may not always be read on screen. Set up a print stylesheet to keep your articles looking good on paper as well.
- When choosing what font to use, choose a common font that everyone has.
- If you add a "PS - I forgot to mention that xyz..." to your post, style it in italics to show clearly that it is an addition to the original post.
- Highlighted phrases should be the same font-size. Changing the font size will change the height of that particular line, breaking the flow.
- DON'T USE ALL CAPITALS ON BODY TEXT. Making all of the letters a similar size reduces the different between them, making it much slower to read.
- Don't use SnapShots on your links. Whilst the feature may seem cool the first time, it becomes a pain in the neck the rest of the time. The pop-up covers a good few lines of text every time you accidentally hover over a link.
- Keep lines to a reasonable length (Under 100 characters). Liquid layouts often cause the content area to stretch on wide monitors, making reading much more difficult.
- Too many paragraphs is better than too few. When writing on paper, paragraphs might commonly be 4 or 5 sentences long. On the web, shorter paragraphs of just 2 or 3 sentences are common because they present the point of the paragraph in a nice, bite-size chunk.
- Keep your sidebar short. The sooner your sidebar ends, the sooner it will stop competing with the article for attention.
- If you use pagination (Splitting one post onto several different pages), then make sure the post navigation is clear and easy to use. Also, begin the post with a quick table of contents so that users know what they can find.
- A faint gray color works well for that information that has to be there, but isn't crucial (e.g. the post date, author etc.). The faint color means the line won't draw attention.
- Use the acronym HTML code to expand acronyms that readers may not all be familiar with. Use CSS to style the acronym with a dotted bottom boarder (The common convention).
There is a lot that can be done, and that's only the visual aspects. Just think of how much your actual wording matters.
What do you do to increase readability on your blog?
Enjoy this post? Get future updates sent to you for free! Join by email or RSS.
About the Author - Michael Martin is the founder of Pro Blog Design. He works as a freelance web designer, loves WordPress, and has an unhealthy addiction to smilies. Written on 29th October 2007.
Other posts tagged with Readability, Typography, Usability, Writing.
29th October, 12:15 pm GMT
Excellent points, Michael.
I particularly like blogs where the sidebar ends sooner, rather than later, quite like this one. It keeps the emphasis on the blog post, rather than superfluous widgets and advertising.
29th October, 12:41 pm GMT
Surprisingly, you've missed the most important but commonly ignored point: use legible font size.
I have a perfect eyesight, but I usually increase the font-size of just about every blog I want to read an article in (ehm, including this one). Maybe it's just me, or my low-end work monitor, but I try to keep my eyes happily reading all the time.
I've actually written a post a while ago about why I think IE dropped the ball big time on helping users read web pages at a comfortable font size.
Speaking of which, what do you think Michael: is it the job of the web designer to have legible font-size or should this be the responsibility of the browser to enable users to increase the font size?
There seems to be a bit of controversy regarding who's responsibility is what.
29th October, 1:01 pm GMT
Hi Michael, I've dugg it here -
http://digg.com/design/30_ways.....adability/
Sumesh,
http://www.techzilo.com
29th October, 1:06 pm GMT
Michael,
This is an excellent article, I must admit I don't do alot of these, this is going to be printed out and will go up on my wall.
Regards.
29th October, 1:20 pm GMT
Excellent list Michael! One suggestion that I have been using is to use the "preview" function in WP when I am writing. I find this extremely helpful to visualize what my post is going to look like on my site before I officially publish it.
ps. Don't forget grammer and spell checking too!
29th October, 2:29 pm GMT
OK, I think I am doing fairly well and I hope my blog is "readable" enough
One more thing, we do not just underline our links because" our readers expect links to be underlined." One of the things that I have learned while blogging about disability-related matters during Blogathon 2007 was that links that aren't underline wouldn't be picked up by screen readers used by blind bloggers.
Whatever it is, some indication that "links are links" are crucial
29th October, 3:13 pm GMT
Great Post! Now I need to go back and make changes!
29th October, 4:19 pm GMT
21. If you add a “PS - I forgot to mention that xyz…” to your post, style it in italics to show clearly that it is an addition to the original post.
You can also insert additions like this by wrapping in the ins tag and then styling it with italics or however you like.
Nice post though.
29th October, 5:14 pm GMT
David - Likewise. That's one of the best things about a 3 column layout I think. It makes much better use of your horizontal space, so that the vertical length is less.
AL - That's a good point. I thought about it actually, but decided to leave it out for 2 reasons. The first is that it's pretty common advice (By now, most people will know that 10px fonts just aren't smart...), and the second is the one you mentioned. I know that the typography isn't perfect on this site, but I can't fix that easily (This whole layout is based off the font-size.
).
I also like your second question. I've listed to that podcast before, and it was a great piece. Personally, I think that it's both. The browser can only do so much with a terrible page, and likewise, a great page won't be much good in a terrible browser. Browsers should offer the ability to increase font size, whilst page coders should create good markup that allows for browsers to resize.
If I had to lean to one side, I'd say that lately, it has come to lean more and more on the side of the browser makers and the users. FireFox and IE7 can both resize the text here, but IE6 can't. IE6 is old though, so I'm not worried about that. The browser makers have fixed the problem with their new version, so it's up to the user to get a hold of a modern browser.
Sumesh - Thanks. I've added a Digg button to the article. *fingers crossed*
Jsanderz - There is a lot that can be done, but I doubt that any of us can do it all, all of the time. If you can get a few good practices into your head though, most of it will become second nature.
(And thanks for proving point 19 right. 
)
Elliot - That's a good point. I use Windows Live Writer to write posts, because it lets me write straight onto a backdrop of my blog. It's great for the reason you said; your article could look completely different on your blog than it does in the WP text editor.
Pelf - Hmm... are you sure about that? I've never actually used a screen reader, but that doesn't make much sense to me. The visual appearance is all controlled by CSS, and screen readers don't use CSS at all. To detect a link, they would just read the HTML and look for the a href="..." markup.
eg. Does that mean that if I underline a normal word, is the screen reader going to pick it up as a link?
Robert - lol - Good luck!
Will - True. ins is definitely the right markup for it. In terms of pure appearance though, the italics are important. It's just another convention (Though not as set in stone as some of the others).
29th October, 5:31 pm GMT
Thanks for the quick comment Michael! I literally just posted that entry...you're on top of it!
29th October, 5:55 pm GMT
eh, the links on your columns are not underlined.
Anyway one of the ways to make a link be a link would be to dedicate a specific color for it.
29th October, 6:24 pm GMT
Jake - lol - I picked up on the trackback. I practically live in the WordPress dashboard.
Goldfries - I was talking about articles and posts. Your idea works for regulars who know the system, but what about the first timers? Why would you force them to learn your system? I know it's only a little thing, but the less they have to think about, the better.
29th October, 7:55 pm GMT
Good post!
I'll have to remember them!
29th October, 8:19 pm GMT
Hey a great help, i modified many things by these points. But still feel there may be somethings I might have not understood. Would be great if I am able to put all these points in mind when I am up for a new project.
Take a view of the site... I think U may notice.
29th October, 9:12 pm GMT
My readability advice: DO NOT have a black background and white text for your main content. Black on White = Headache.
29th October, 9:55 pm GMT
Brian - Glad you liked it.
Shivam - Practice makes perfect. As you try things out, you'll see the difference yourself. If you like a certain thing (e.g. Say you used to use a lot of capitals, but tried an article without them now), then you'll notice the difference, and keep on using that.
Redwall - It does work sometimes (You need to increase the weight of the font a little, at the very least). It's just that it isn't often done well. For large articles though, I agree.
30th October, 12:17 am GMT
Hehe, I was pulling your leg there.
Anyway, I don't have a fixed way to style my links. My company website has all links underlined. My blog on the other hand has a mix.
30th October, 12:39 am GMT
You've probably heard of the two huge Harry Potter news sites http://www.leakynews.com and http://www.mugglenet.com.
For two years I used Mugglenet, but I got fed-up with the dark background, the short little "news bites" instead of real articles, and the lack of professionalism. So I switched to Leaky Cauldron. None of my complaints apply to them, and I've become a big fan of their site.
The dark background really got on my nerves after awhile, and was a major cause in me switching.
30th October, 12:53 am GMT
Goldfries - lol - Good of you to keep me on my toes.
Redwall - Yep, I've visited them both a fair bit. I don't read either of them regularly though (Just every now and then when I take a HP notion.
), but I prefer Mugglenet for its little news bites. It's easy to scan down the homepage every now and then.
I suppose that if you're a regular reader though, more substantiated articles would be nicer, and the black would definitely take its toll. I can definitely think of times when I was reading longer pages on Mugglenet and had to just sit back and blink for a few seconds because it was hurting my eyes. xD
30th October, 3:02 am GMT
@Michael: OK, maybe I got that wrong, but it does makes sense to underline links so that readers who are colour blind can recognize them as links?
I've seen bloggers whose link colour is similar to the text colour that readers who aren't colour blind have difficulties detecting the links.
30th October, 11:57 am GMT
Pelf - Underlining them for color blindness makes a lot more sense. That's a very good point.
30th October, 1:20 pm GMT
Yay for the acronym tag! I haven't heard of ins... I'll have to check that one out.
Fairly unimportant thought: lists aren't indented in RSS readers
oredering still works though and is useful.
I think I glossed over your print css post - I'll look into doing that!
30th October, 1:35 pm GMT
Kristarella - Ins stands for "insert." It's just a way of showing that the line was added after the original post. I'm not entirely sold on whether or not it's worth the effort for a blogger though (I don't use it).
There's a good post on this and a few other tags on it at BloggingTips.
As for the indented lists; that depends on your reader. In Google Reader at least, they're indented.
30th October, 1:55 pm GMT
@ pelf and Michael,
One other issue about links is using a "hover" or "active" state in the CSS. This is another method to help identify where the active item is on the page for people that use the "Tab" key.
Generally, you can change the background color or something else to make it friendly to see where you are on the page if you aren't using a mouse. Works great and adds to the accessibility of your site.
30th October, 2:02 pm GMT
@Michael: WooHoo! At least I got something right
@Elliott: That's a very good tip! Thanks for sharing
30th October, 2:08 pm GMT
Elliot - That's very true. It's also worth adding a :focus state now, for non-mouse users.
Pelf - lol - You taught me something new! Thanks for sharing it.
30th October, 6:15 pm GMT
I had never heard of the acronym HTML code before -- that will come in handy (already has, today) -- thanks!
I'm thinking about the underlined links. I use color -- but had not thought about color blind readers. I do a lot of linking-out, and all that underlining seems visually cluttered to me.
But, back to the thinking cap...
And to the Dig button -- which I've never used until you & Skellie came along.
30th October, 6:34 pm GMT
Underlining can get messy when you have a load of links together (Usually in a sidebar), but it's not too bad in articles I think, unless your text is cramped together.
As for the Digg button, I sometimes put it into my better posts (The ones I think might have a shot at the front page). You only have 24hrs on Digg to get to the front though, so after that time, I remove the button again (It's no longer useful
).
30th October, 11:11 pm GMT
I figured it was short for insert - I'd never seen it as an html tag before. I've just used 'strike' for crossing stuff out.
That was a pretty interesting post. Thanks for the link.
30th October, 11:19 pm GMT
Thanks for the quick review, I am constantly working out with experiments. And I use forums to get advice on them... and I cover each single bit of them. These tips are a ready reference for me and I'll try to cover up them too.
30th October, 11:57 pm GMT
Kristarella - The effect is pretty much the same, but the semantics of the new tags are better. It's similar to how "i" is almost the same as "em." The difference is that "i" is about presentation, wheras "em" is just saying that the text should be emphasised.
It's the same with "strike" and "del." Del doesn't imply any sort of style. It's better semantics.
Shivam - Glad to hear it. That really is the best way to learn and to improve your site.
31st October, 12:43 am GMT
Tight article. I am always adding Internet marketing tips to my SEO/SEM knowledge.
31st October, 2:04 am GMT
Nice points Michael. Your blog is very easy to read, so you know what you're talking about.
31st October, 4:32 pm GMT
Nice tips there. I probably need to start underlining my links. It's something that I've never really liked to do just because I like who it looks without them underlined, but users do expect it in most cases. I like to underline on hover though.
1st November, 12:43 pm GMT
Too bad this didnt make the front page of digg. Though i see you've got 19 diggs.
Lists like these usually top digg, I guess you're unlucky with this one.
Never mind - have fun
1st November, 11:58 pm GMT
Well, AFAIK links are underlined by default.
I usually don't underline links. Not that I use links often in my post anyway.
3rd November, 11:30 am GMT
First time visit this blog..
Good info ,,,
I think passion and commitment is most important thing to improve readability..
3rd November, 11:43 am GMT
this is my first article i have read on your site. its brilliant! I will be here often!
3rd November, 11:48 am GMT
Helpful article. Yeah, I hate SnapShots too!!!!!
3rd November, 12:45 pm GMT
Seattle - Glad ya liked it.
Steven - Thanks. It's not a problem for you either I've noticed.
Deron - There are some cases when it's fine. You can be your own judge.
Sumesh - It got a tonne of Stumbles at least. I was more than happy with that.
Goldfries - Yup, they're usually underlined by default. That has all added to the convention.
Vishal - Glad to hear it. I'll be expecting comments often as well then!
Laarni - Can't stand it. xD
5th November, 4:34 pm GMT
Actually, a comment that I have about readability is that using a font with a bigger x-height is nice. However, this is often not possible as the client might not have that particular font installed. Therefore, I find myself specifying lots of fall-back options using css. (Lucida Grande being the first choice.)
Something that also greatly improves readability is making the font size smaller—yes, smaller—and the line-height bigger. This gives the impression that you use a bigger font, while it actually takes up the same amount or even less space. (I will do this to my own blog in some time as the body text is a little too big anyway...)
5th November, 6:40 pm GMT
Dominik - Fonts are definitely awkward to choose with such a limited selection. I tend to fall back to Arial in most cases, though there are times when I'd specify another font (Helvetica and Georgia are 2 good ones
) for certain situations.
As for the line-height, that's a good point. It only works in some situations, and there are limits, but a lot of leading is definitely preferable to very little.
5th November, 6:48 pm GMT
Micheal - Arial? {cue: everybody start screaming}
I'd use Verdana instead, even though it is also not the best choice from a typographic point of view. It'd be interesting what other people think about this...
5th November, 6:56 pm GMT
I know it's not the best font, but you do get used to it. PBD is in arial (When Helvetica isn't available), and I'm happy enough with it.
Verdana characters are very wide. Too wide I'd say at the size of font I'm using here.
5th November, 7:03 pm GMT
If Verdana is too wide: What do you think about Trebuchet. It is also readily available on client computers.
Another alternative would be the new vista fonts, but I haven't tried those out.
Luckily I have Helvetica, so I do not have to endure PBD in Arial;-)
If you are interested in typography you should check out ilovetypography.com, if you haven't already. (The site is booming.)
5th November, 7:28 pm GMT
Trebuchet is nice (Using it in a project right now actually! xD ), but Vista is nowhere near popular enough yet for its font set to be of much use...
And yep, I've seen the site. It's very good.
5th November, 11:26 pm GMT
When choosing fonts I just get overwhelmed with choice and the possibility that others won't have them so I tend to choose one specific font that I'll think they have and then just sans-serif (or serif if I was going with that). Perhaps I should make a list of fonts that I like and that most people have so I have a reference next time I'm designing a page.
20th November, 1:13 am GMT
I now feel more used after implementing these ideas. Being used is nice.
21st November, 5:02 pm GMT
thanks for the GREAT post! Very useful...
21st November, 10:34 pm GMT
Portuguese Breakfast - Haha - In this case at least!
Whatever - Glad you liked it.
23rd November, 2:47 am GMT
I especially like #24 and #27, since they advocate uncluttering sites. Too many bloggers fill their sites with useless widgets, images, etc. all competing for attention, without any focus. Usually, the main call to action will be lost in the clutter and conversion suffers. Sometimes giving less options is better for business.
23rd November, 5:43 pm GMT
Clutter is one of the bigger problems on the web these days.
26th November, 11:21 pm GMT
I'm using a dark (black actually) background instead of a lighter one.
It smoothen the glare to the reader's eyes. Reading on white backgrounds are like spotting text on a florescent light.
27th November, 9:04 pm GMT
Black text on white is very clear to read from. It is definitely a bit of a shock if you've just been watching a movie/reading a black web site, or anything else that was dark.
Beyond that, I think it's better a lot of the time. Black however can be just as legible, and often more artistic (Black background is less common that white these days).
14th December, 12:57 am GMT
Great article. Some comments:
#1 - Underline the link may not work depending on the theme you are using. But you MUST use a mark (change color and the font style, like bold)
#24 - SnapShots are really disgusting. Makes reading a painful task.
14th December, 5:21 pm GMT
Raphael - There are times when underlining isn't ideal, but whatever you use, it needs to be extremely distinctive (Which is why I usually recommend underlines
).
Bolding on rollover is a little iffy because it changes the size of the text, pushing lines up and down.
Totally agreed on the SnapShots though!
10th February, 1:41 pm GMT
You live by your post as manifested by problogdesign.com.
25th March, 5:38 pm GMT
Informative and insightful post, Michael. So often, it's the little things that make such a big impact on the quality of a product or service. Blogs are no different.I plan on using this information in my entrepreneur blog.Thanks for the tips!
25th March, 6:20 pm GMT
Chris,
Agreed. Little changes can add up to a big difference.
21st April, 2:40 am GMT
Wow, another wonderful post.
I usually don't use pull-quotes.
The PS part, I also do italicize them!
4th May, 10:59 am GMT
Michael, I really appreciated the tips in this post - in fact, I posted a link to it in a recent post of mine.
I tried underlining the links, but in the sidebar especially, it really looked bizarre since it's mainly links. Maybe there's something I could put in the code for the sidebar so that the links there aren't underlined?
Anyway, thanks for some great tips. Some bloggers who read my blog thanked me for the link to this post.
5th May, 11:47 am GMT
Hey Rob,
I think it's ok to underline links in posts and articles, but leave sidebar and navigational links plain. It does depend on the way you present the sidebar and navigation, but generally people expect lists in sidebars to be comprised of links, so not underlining for the sake of de-cluttering is okay.
To do that, you need to find what your sidebar is called - I just had a look and the id assigned to it is r_sidebar. So in the CSS try to find something that says
#r_sidebar a {some styles here
}
If it's not there add it in and put
text-decoration:none;in between the curly braces.6th May, 2:11 am GMT
Thanks, Kristarella! That worked great!
6th May, 10:31 am GMT
I changed things back to the way they were. I think the blue of the links is sufficiently different from the black of the rest of the text that even color blind people can spot the links. I just didn't care for the look of the underlining. Sorry.
6th July, 6:41 am GMT
Hey everyone is getting a photo on the right column. How do I do that, I also want to join the community.
6th July, 6:36 pm GMT
Shivam,
I'm glad to hear you do!
The little pictures are called "avatars." To get one, you just have to sign up (for free) at http://en.gravatar.com/, and upload your picture there.
Then when you comment here with the email address you registered to that site with, your avatar will automatically appear.
More importantly though, it will also appear on thousands of other blogs that use Gravatar as well, when you comment on those.
24th July, 4:21 pm GMT
Great Tips! I think I have a pretty good handle on most of them in my blog. I'm certainly guilty of having a pretty tall sidebar. I have a lot of content that I want to be available to readers at all times. I'm not sure how else this can be done without putting them in the sidebar. I guess I could prioritize my sidebar items, but for some reason I think they should all be there. Any suggestions?
22nd August, 12:01 am GMT
It's funny, because I always thought long sidebar (blog rolls) looked great. Now I'm reconsidering. In my other blog (wordpress) I have the monthly archive and catergories as a drop down menu.
27th August, 5:59 pm GMT
This is extremely valuable information. I used this post to help me design my blog and will use it again in the future, thanks.
7th October, 10:52 pm GMT
Very usefull article. I will use these tips on my blogs. I've added a link to this article on delicious because is worth of it.
22nd October, 12:35 pm GMT
thanks for da tips!
ive disabled snap shots feature in my bloggie...