Five Minute Upgrade – Increase Scannability

Sam Dunn on April 10th, 2009 Posted in Articles

Meaningful Emphasis

When scrolling down a page, the last thing a visitor wants are miles of paragraphs, all in the same font and font size, with nothing to break them up or call attention to any parts of them. If a page looks overwhelming and monotonous, chances are you’ve just lost a visitor.

The main thing you have to ask yourself when designing a page is “What are the key points I want to get across?”. These are the items that you will want to take particular care to make pop out from the rest of the content. You may have additional points you wish to make, but try to create a hierarchy in order of importance, the items at the top of this hierarchy will get the most emphasis or “pop” on the page.

Now that you have elements of your message, here are some ways to emphasize them:

• Use a different font for the header than you do for the body text.
• Font size dictates importance.
• Bold should be used to highlight a key phrase or word. Don’t over do it.
• Italics are secondary to bold, some people argue their exact proper usage, but I’ve found them useful in citations and longer phrases.
• Lists draw the eye and give the visitor distinct points to scan over. I’ve used them here for a reason.
• Links should stand out from the rest of the text. It’s basic but not everyone thinks about this. Use bright colors and underline if you wish.

Format Your Text

You are not obligated to stick with the default formatting, customization extends beyond just font family and size. There are quite a few tweaks made possible by CSS, here a few useful ones:

• line-height: Defines the amount of space between lines of text. Slight increases can make paragraphs seem less bunched together.
• word-spacing: Sets the amount of space between words. Minor changes to this can be beneficial, but sometimes unnecessary, so use your best judgment.
• letter-spacing: Sets the spacing between each character. Slight adjustments can add breathing room or tighten up text.

Add Breathing Room

This point is often beaten into the ground, but white space does wonders for readability. It’s not always about how much you can fit into the visitors screen, it is more important that they take in what they do see, not get overwhelmed by it.

• Try increasing margins/padding around text (Make the leap from 5px to 15px, it’ll show).
• Use borders to establish boundaries and separate content (1px lines below headings and borders around images).

Putting It Into Practice

Now that you have been armed with knowledge, hopefully you’ll be able to implement some useful changes into your work. Click the image below to look over my example which puts these techniques to use and see the results for yourself.