30 Ways to Improve Readability
October 29th 2007
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?
Read something useful? Subscribe!
Find other posts tagged with: Readability, Typography, Usability, Writing
Twitter
October 29th at 12:15 pm GMT
Comment #1
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.
October 29th at 12:41 pm GMT
Comment #2
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.
October 29th at 1:01 pm GMT
Comment #3
Hi Michael, I've dugg it here -
http://digg.com/design/30_ways.....adability/
Sumesh,
http://www.techzilo.com
October 29th at 1:06 pm GMT
Comment #4
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.
October 29th at 1:20 pm GMT
Comment #5
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!
October 29th at 2:29 pm GMT
Comment #6
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
October 29th at 3:13 pm GMT
Comment #7
Great Post! Now I need to go back and make changes!
October 29th at 4:19 pm GMT
Comment #8
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.
October 29th at 5:14 pm GMT
Comment #9
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).
October 29th at 5:31 pm GMT
Comment #10
Thanks for the quick comment Michael! I literally just posted that entry...you're on top of it!
October 29th at 5:55 pm GMT
Comment #11
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.
October 29th at 6:24 pm GMT
Comment #12
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.
October 29th at 7:55 pm GMT
Comment #13
Good post!
I'll have to remember them!
October 29th at 8:19 pm GMT
Comment #14
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.
October 29th at 9:12 pm GMT
Comment #15
My readability advice: DO NOT have a black background and white text for your main content. Black on White = Headache.
October 29th at 9:55 pm GMT
Comment #16
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.
October 30th at 12:17 am GMT
Comment #17
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.
October 30th at 12:39 am GMT
Comment #18
You've probably heard of the two huge Harry Potter news sites www.leakynews.com and 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.
October 30th at 12:53 am GMT
Comment #19
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
October 30th at 3:02 am GMT
Comment #20
@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.
October 30th at 11:57 am GMT
Comment #21
Pelf - Underlining them for color blindness makes a lot more sense. That's a very good point.
October 30th at 1:20 pm GMT
Comment #22
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!
October 30th at 1:35 pm GMT
Comment #23
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.
October 30th at 1:55 pm GMT
Comment #24
@ 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.
October 30th at 2:02 pm GMT
Comment #25
@Michael: WooHoo! At least I got something right
@Elliott: That's a very good tip! Thanks for sharing
October 30th at 2:08 pm GMT
Comment #26
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.
October 30th at 6:15 pm GMT
Comment #27
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.
October 30th at 6:34 pm GMT
Comment #28
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
).
October 30th at 11:11 pm GMT
Comment #29
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.
October 30th at 11:19 pm GMT
Comment #30
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.
October 30th at 11:57 pm GMT
Comment #31
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.
October 31st at 12:43 am GMT
Comment #32
Tight article. I am always adding Internet marketing tips to my SEO/SEM knowledge.
October 31st at 2:04 am GMT
Comment #33
Nice points Michael. Your blog is very easy to read, so you know what you're talking about.
October 31st at 4:32 pm GMT
Comment #34
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.
November 1st at 12:43 pm GMT
Comment #35
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
November 1st at 11:58 pm GMT
Comment #36
Well, AFAIK links are underlined by default.
I usually don't underline links. Not that I use links often in my post anyway.
November 3rd at 11:30 am GMT
Comment #37
First time visit this blog..
Good info ,,,
I think passion and commitment is most important thing to improve readability..
November 3rd at 11:43 am GMT
Comment #38
this is my first article i have read on your site. its brilliant! I will be here often!
November 3rd at 11:48 am GMT
Comment #39
Helpful article. Yeah, I hate SnapShots too!!!!!
November 3rd at 12:45 pm GMT
Comment #40
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
November 5th at 4:34 pm GMT
Comment #41
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...)
November 5th at 6:40 pm GMT
Comment #42
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.
November 5th at 6:48 pm GMT
Comment #43
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...
November 5th at 6:56 pm GMT
Comment #44
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.
November 5th at 7:03 pm GMT
Comment #45
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.)
November 5th at 7:28 pm GMT
Comment #46
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.
November 5th at 11:26 pm GMT
Comment #47
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.
November 20th at 1:13 am GMT
Comment #48
I now feel more used after implementing these ideas. Being used is nice.
November 21st at 5:02 pm GMT
Comment #49
thanks for the GREAT post! Very useful...
November 21st at 10:34 pm GMT
Comment #50
Portuguese Breakfast - Haha - In this case at least!
Whatever - Glad you liked it.
November 23rd at 2:47 am GMT
Comment #51
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.
November 23rd at 5:43 pm GMT
Comment #52
Clutter is one of the bigger problems on the web these days.
November 26th at 11:21 pm GMT
Comment #53
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.
November 27th at 9:04 pm GMT
Comment #54
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).
December 14th at 12:57 am GMT
Comment #55
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.
December 14th at 5:21 pm GMT
Comment #56
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!
February 10th at 1:41 pm GMT
Comment #57
You live by your post as manifested by problogdesign.com.
March 25th at 5:38 pm GMT
Comment #58
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!
March 25th at 6:20 pm GMT
Comment #59
Chris,
Agreed. Little changes can add up to a big difference.
April 21st at 2:40 am GMT
Comment #60
Wow, another wonderful post.
I usually don't use pull-quotes.
The PS part, I also do italicize them!
May 4th at 10:59 am GMT
Comment #61
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.
May 5th at 11:47 am GMT
Comment #62
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.May 6th at 2:11 am GMT
Comment #63
Thanks, Kristarella! That worked great!
May 6th at 10:31 am GMT
Comment #64
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.