How To Optimize Your Body Text For Readability
Thursday, August 9th, 2007Categories: Web Usability
RSS Comment Feed
Trackback
If you’re running a text-intensive website, like a blog or article listing, there should attention paid to how well your text is read. The easier it is for users to read your text, the likelier they are to stay and read content. Please note that when I’m referring to “how easy it is to read text”, I’m not referring to the grade-level of the grammatical structure or words used in the article, but rather, how easy it is on the reader to concentrate, follow the text, and feel comfortable.
Paragraphs
This is pretty straight-forward, the more breathing room you give between chunks of text, the easier it is for the reader to digest the content and to flow between the end of a line, and the beginning of a line. It gives the user an idea how much text is left until a new subject is discussed.
Not only that, but paragraph tags can help with Search Engine Optimization.
If you’re new to HTML: You can create paragraphs by placing a <p> tag before your paragraph, and a </p> tag after your paragraph.
Line Height
I feel this is largely overlooked on the Web, yet carefully looked at in the Print Media industry. Line Height is the distance between each line of text. The more room you leave between each line, the easier it is for a user to find the beginning of a line after they’ve finished reading a single line.
If you’re new to CSS: In your stylesheet, simply add the line-height attribute, in this example, we’re adding a custom line height to our paragraph (<p>) tag:
p {
line-height:14px;
}
Line Length
Again, like Line Height, I feel as though Line Length is also overlooked on the Web. Line Length is the length (horizontally) of lines of text on your screen. The longer it is, the harder it is for a user to find the beginning of a line of text after reaching the end of a line of text.
This is a problem with Fluid Layouts. Fluid Layouts are layout structures where the the main section of the website (most likely the content) expands as the screen gets wider. As monitors get bigger and resolutions get higher, your line length will start to get wider and wider. A solution is to used Fixed Layouts where you limit the width of your content’s container.
A guideline that some people use in Print Media is to have a maximum of an alphabet and a half per line. This is difficult on the web, but try your best to make it as slim as you can without having skinny blocks of text everywhere.
Style Your Text - Avoid “Text Walls”
Another good rule to live by when you publish text, break up the text using <strong> (bold) tags and <em> (italic). Most readers love to skim content. The more opportunity you give to let them do that, the more likely they are to stick around. Be liberal in the use of Bullet points. Bullet points are often indications of summarized notes, tips or long text that you’ve shortened.
Use Pictures
This is fairly straightforward. Even though content-thirsty readers often overlook pictures, images help set the tone for an article or blog post. Similar to styling your text, pictures help break up “text walls” and make the article look less intense.
UK holidays at Pontins Southport - Summer 2008
Related Posts
- A Minor Facelift
- Hundredth Post - Looking Back On The Blog
- 10 Tips To Make Your Website’s Layout More Usable
August 10th, 2007 at 7:18 am
Hi again. Good post. A few tips in their I need to follow myself.
August 12th, 2007 at 4:00 pm
I would recommend to use variable sizes instead of fixed ones (use em instead of px for instance).
This is just for “all OS/monitors” purpose since what looks well under 800×600 might look weird under 1600×1200 on another OS than Windows.
August 12th, 2007 at 9:21 pm
Hi Jan,
I’ve done the 62.5% font size trick, which I think makes 1em = 10pixels/10points. I just found the whole thing working multiplicatively a big hassle for me, and stuck with pixels.
Something strange happened about a month ago, where without playing with my stylesheet, all my font sizes were cut in half. I can’t explain it, but it made me go to back to fixed sizes.
August 13th, 2007 at 3:49 am
Hi Patrick, I agree that variable sizes may suck sometimes. My primary site uses fixed fonts because I found it to be the best solution right now. However, my other sites are using sizes like “small”, “x-small” and so on for fonts.
If every browser supported w3 standrads in the same way, it would be gr8
for webmasters.
BTW, maybe you could install some plugin which would inform people about replies on their comments.
Just a thought.
August 13th, 2007 at 12:13 pm
Hi Jan,
I definitely agree.
Regarding the comments, I think I found a plugin that does the job. Let me know if it works. Cheers.
August 20th, 2007 at 12:52 am
Ok I need to come to this site more and recommend some things for my readers who are just starting out and need to know these things. You’ve got some great tips here.
August 20th, 2007 at 9:15 am
Cheers cooliojones, really appreciate it.
August 23rd, 2007 at 7:23 am
There seems to be a trend towards using ever smaller font sizes nowadays. Many sites seem quite uncomfortable to read for that reason (well, before resizing the text with the browser). Am I alone in thinking this?
August 23rd, 2007 at 8:07 am
I’m thinking the opposite webgeekgirl. I think smaller font sizes were trendy when everyone wanted their site to look like a spaceship, and pixel fonts were all the rage. I think we’re moving to bigger fonts now because of the whole “web 2.0″ thing.
August 23rd, 2007 at 8:38 am
We can’t both be right, can we?
I guess it depends on the sort of sites you frequent. I’m probably thinking more about ecommerce sites than anything else.
Also a couple of things that I would add to your list: headings and typeface. Using appropriate headings and subheadings help to break up large blocks of text and make it easier to scan the content IMHO. As for typeface some are easier on the eye than others. I have a liking of Verdana personally, but I guess it can get a bit boring if overused.
August 23rd, 2007 at 8:42 pm
Very true webgeekgirl. I may end up doing a Part 2, and I’ll include headings, typeface and subheadings. Good idea.
I do remember reading a study that showed Verdana was more readable then Arial.