You’ve spent many hours planning your website. It’s filled with good keyword phrases and does a great job representing your business. Now your visitors arrive. You figure that your exceptional service and glowing testimonials will persuade them to choose your business.
But your website may be missing one key ingredient: readability.
Is your website content actually enjoyable to read?
Movie Theater Example
Consider, for example, your last visit to a movie theater.
Did you put much thought into the chair you sat in or the temperature of the room?
More likely, you recall if you gave it a “thumbs up” or a “thumbs down.” You remember if the movie was a tearjerker or a comedy, but, not the cinema itself… unless it was uncomfortable.
If you had to squeeze into a small chair or shield your eyes from bright ceiling lights, it would surely ruin the movie. You’d want your money back.
Your Website Visitors
Your visitors also have some basic expectations of your website and/or blog. Consider not just what you have to say, but also how you say it to keep your audience comfortable and engaged.
Did you know that reading from a screen takes 25 percent longer than reading a printed page?
Your visitors may be in a bright office on a desktop computer or standing with a cell phone under a street light. They are dealing with their device and their environment at the same time. You must keep in mind how they are viewing your website, not just how it looks to you.
Why fuss about making a website reader-friendly?
Improved readability equals increased time on your website, decreased bounce rates and improved sales. Visitors who are delighted by their online experiences are more likely to become paying customers.
Keep in mind. Most people don’t read a website word for word; they scan headings first.
- They often scan a web page, then decide if they want to read the content in greater detail.
- They will jump to something that interests them and skip irrelevant sections.
- If you can help them find what they’re looking for, you can keep their attention longer.
The good news is that you can fine-tune your web pages and/or blog posts. With some simple design techniques, you change a page from an unfriendly mass of overwhelming text to something more enjoyable.
1) First, Let’s Make our Content Easy to Scan.
Making our content easy to scan makes it easier to read.
Online readers like short sentences that don’t require much thinking. You can also break up long pages into shorter easy-to-scan paragraphs. With these simple steps, you’ve already made the task of reading your web pages less of a chore.
2) Let’s utilize Headings and Subheadings.
Your main heading is important. It helps your visitors know they are in the right place when they arrive at your page. If they came from a search engine, such as Google, you want to reassure them immediately. Yes. They’re in the right place.
Make your headline an attention-grabber. Convince them to make the greater effort to read your paragraphs… or at least some of them. Your headline can help do that. Make it stand out visually. Also provide ample space beneath it.
Subheadings add structure to your content and give hierarchy to your page. They also summarize the paragraphs that follow. Use them to help visitors understand your page at a glance.
They should clearly stand out from your paragraphs, but be less visually dominant than your main heading. They are a level lower in the hierarchy than your headline (main heading) so should look less important. You can also use color to make subheadings stand out.
3) Let’s be choosy about our font families and sizes.
A good, comfortable font size also helps make a page reader-friendly.
Consider increasing font size for large screens and reducing it for small screens (such as cell phones).
- A good font size (not too big) promotes horizontal eye motion.
- A good font size (not too small) is readable.
Also, consider using a non-serif font for paragraphs such as Arial, Helvetica, Trebuchet, or Verdana. Fancy serif fonts are fine for headings, but for paragraphs, the little serifs in serif fonts easily blur together on a screen, making the text more difficult to read.
4) Let’s use Left-Aligned Text for Paragraphs.
Most online text is aligned left, resulting in a ragged right edge. You can help your readers by providing a consistent left edge in your paragraphs. Left aligned paragraph text is much easier to read than centered text. Visitors can read each line by simply moving their eyes to the left edge. Their eyes don’t have to work as hard to find where the next line starts.
5) Let’s Fine-tune our Line Length and Width.
Line Length (the measure)
Reading a long line of type causes fatigue.
The reader must move his head at the end of a long line to search for the beginning of the next line. Long lines make it more difficult to correctly jump from one line to the next. Readers may accidentally read the same line twice.
Short lines can also break the reader’s rhythm. The optimal line length (measure) on the Web is considered between 50-60 characters. A good measure improves the reading experience.
Line Height (spacing between lines)
Like the space between movie theater rows, line height is the space between individual lines of text.
A line height that is too short is uncomfortable. It will cause readers to squint and scan down the left edge of a page.
While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size. If your text is at 16 pixels, your line spacing should be around 24 pixels.
6) Add White Space for Comfort.
White space also helps minimize the work your readers have to do. Start with good margins. Good margins improve white space. They help the reader focus inward on the main content of the page.
7) Include Images and Captions.
Most people would agree that popcorn makes a movie better. Similarly, images make a website more enjoyable. Images help tell your story and keep your readers focused. They also increase your visitors’ average time on page.
Image captions are read 50% more than the rest of the copy.
You may have already scanned this page and jumped straight to the popcorn image, perhaps wondering about the connection between popcorn and website readability. It’s a bit of a stretch. I know.
Images like this encourage people to stop and read the text that goes with them. Try adding a caption under an image to entice your reader to dig deeper.
8) Use Ordered and Unordered Lists.
- Lists like this help break up big blocks of copy.
- They also look different from the rest of your text.
- The white space around them attracts the eye.
- Lists are very easy to scan.
- People like reading lists.
9) Create High Contrast between Text and Background.
The better the contrast between the background of a web page and the text, the better the readability. Poor contrast, on the other hand, will force your readers to squint.
Choose dark text on a light background for large blocks of text. (When white text is placed on a dark background, computer monitors create an annoying “glow.”) Consider your readers, not your preferences. If you do decide to use white text on a black background, decrease your font-weight.
10) Make your Content Mobile-Friendly.
Remember the cell phone users under the street light? How can we cater to them?
For optimum readability on mobile devices, let’s pay special attention to spatial hierarchy. Use short paragraphs. Mobile readers may get lost in long paragraphs. Use relevant images. Studies show that mobile users look at images more than they look at text. Relevant images help tell your story.
The small screens also make it difficult to read lines of text that are set close together. Don’t squeeze them together. Consider increasing line-height to 1.75 and decreasing the measure to roughly 35-50 characters.
Be sure to utilize a responsive design to help your mobile readers.
A responsive website responds to the viewport of the device, improving readability. With responsive design, CSS media queries can be used to change the visual styles of a web page based on a visitor’s screen size. This means that you can use one set of typographic styles for larger screens and another set for smaller screens.
You may not be able to woo your website visitors with popcorn, 3-D glasses or surround sound, but you can pamper them with white space, images and headings. Make them comfortable. Help them find what they are looking for so they can be on their way.
They may not notice your “reader-friendly efforts.”
That’s actually a good thing.