Words on the Web: 6 Tips for More Readable Copy

When people discuss websites, they often talk about design, but it is the words on the page that provide the bulk of the message that you want to convey. While you definitely want to make sure that your site is visually appealing to your target audience, you also want to make sure that the text communicates effectively to these people as well. Both the way that you write and the way that your words appear on the page need to be tailored to online readers, who interact differently with websites than they do with printed media.

Words on the web

Let’s take a look at some best practices for using words on the web and how you can create the most impactful copy on your website which will result in longer and more successful visits.

 

1. Understand that people read differently on the screen

Reading on a screen is different than reading printed material. Our eyes interact differently to an illuminated screen, but there is also a practical difference. One study states that 79% of readers tend to skim the text on a web page rather than reading every individual word.

Online readers seek out information or performing a task. Because of this, you should keep blocks of text much smaller and more readable at a quick glance. Present your information in easily digestible chunks that can be skimmed quickly and effectively.

In terms of writing, try to avoid using too many exclamations and parenthetical additions. Lean towards short sentences that present a single idea. Overall, remember that brevity is your friend. Avoid adding extra adjectives or unnecessary words. In fact, the same study mentioned above describes how online readers are less likely to believe anything that sounds too sensational. They prefer simple factual statements over marketing speak.

A good way to learn these writing techniques is to analyze successful content and use it as a template for your own copy.

 

2. Make a great first impression

The web is an amazing and diverse resource with dozens of pages providing answers to even the most mundane questions. Web users are quick to leave if they don’t immediately find what they are looking for. With this in mind, it is important to make a great first impression and hook your reader using the first headline, sentence, and paragraph on each page before they “bounce” away from your site.

Some experts suggest writing your first sentence at the end of the writing process, but I normally advocate for writing the introductory paragraph as the first step after making your outline. You can use the sentence as a chance to hook the reader and sum up all the things that you plan on discussing within that page or post. This blog post from the New York Times has some excellent input on making an unforgettable first paragraph and has lots of examples to analyze.

 

3. Modify your paragraph length

I remember learning about the construction of a paragraph when I was in grade school. We were told that each paragraph should contain three to five sentences, begin with a topic sentence, include supporting sentences, and end with a conclusion.

With the change in reading behavior on the web, these traditional paragraphs are too much. They appear as large clumps on the screen and it is easy to get lost trying to quickly read through them. With this in mind, every paragraph on your website should hover within the one to three sentence range. There is nothing wrong with having a single sentence describing a particular point stand alone.

readability of paragraphs on a website

Which block of text is easier to read?

 

4. Break up the text

To make your text more scannable, it is important to separate the blocks of text. Using shorter paragraphs will make a difference, but there are several additional tricks to help you-–try mixing up these options for maximum effect.

  • White space:
    The empty area between paragraphs, images, and other elements on a web page is called white space or negative space. UX Myths, a website about optimizing the user experience for the web, has an excellent breakdown on the many benefits of white space. These include: making text more readable, increasing comprehension, and creating a sense of balance and harmony on the page.

    Some easy ways to add more white space on your site is to increase the line height of your text, adding more space between your paragraphs, and even increasing the margins padding around other elements on your pages.

Example of using headings on a web page

Click to see full image

  • Headings:
    In addition to being a huge help for your search engine optimization, html headings, are very useful for visually separating content on a page. Use an H1 heading at the top of each page. This is an excellent way to remind your readers what page they are on within your web site.

    Use H2 tags to separate the main sections of content within each page and then utilize H3 tags for minor points within each of those sections. Each heading should be visually different from the standard body text using size, color, or font face. White space should appear above and below each heading as well to help increase the impact and readability.

  • Bulleted or numbered lists:
    When it comes to making text more scannable, lists are a fantastic tool. Use lists to create an array of supporting points or examples to back up a stated claim. Traditionally, lists are slightly indented and have either a bullet point, number, or small image offset to the left of the text to help draw the eye of the reader.
  • Horizontal lines:
    HTML has a tag dedicated purely to the purpose of breaking up blocks of text on a page. The horizontal line, or horizontal rule (HR), can be used between any two sections on a website. These lines can be styled and given more or less space above and below them to further fulfill their goals. Try combining horizontal lines with your headings to provide more definitive separation between sections.

 

5. Contain your line length

Reading on the web is now done on screens of every imaginable size, from giant Apple Cinema Displays to smart phones that fit in the palm of your hand. This means that the width of each line of text will often be rendered at vastly different dimensions.

There has been a lot of research to determine the optimal line width for readability.The correct width, depending on font face and size, is 40–60 characters per line:

Any more than this and the reader may have to start moving their eyes—or even their head—in order to follow the text, which can increase eye-strain and makes the text harder to take in.

If you have a wide layout for your website, try placing your text into multiple columns or putting an image to the side of the text to force the words into a more narrow space. Don’t forget to provide ample white space between the different side-by-side elements to allow for maximum readability.

 

6. Use fonts correctly

In addition to writing properly for the web and laying out your text in a skimmable format, the fonts used on your website also have a huge impact on your readers. Consider these points when selecting the size, color, and font face of your text.

  • Select a readable font
    There is a reason that the bulk of sites on the web use only a few fonts: Arial, Times New Roman, Georgia, Verdana, and Tahoma. These are supported on every computer out there and are all very readable. Never use an overly stylized font, like a script or a handwritten one, for anything other than headings.

    Pay close attention to both the font size and the color of your text. Your words must be large enough to be easily read and should appear in sharp contrast to your background, whether you are using an image or a solid color.

    Select one font and use it for all body copy on your entire website. Consistency is one of the keys to making your site look professional.

  • Bold and italic
    Bolding and italicizing important words or phrases is a great way to single out important information within a block of text. Be careful not to overdo it though. One bolded phrase will make the words pop off the screen but too many in a single paragraph will just turn into noise.
  • Make sure hyperlinks jump off the screen
    Years of internet usage has trained web visitors to identify links as underlined colored text. Never underline any text that is not a hyperlink. If you choose to remove the underlining from your hyperlink style, make sure the color you select is substantially different than your standard one or you may confuse your readers.

Conclusion

Words are the backbone of the world wide web. They are the primary tool for conveying your message to your target audience and should be given the correct amount of attention to make sure they do their job well.

By following the suggestions outlined in this post you will create an excellent online reading experience for your visitors. Don’t miss this opportunity to make a good impression.

Have other tips for working with words on the web? Let us know in the comments.

Follow Me

Brent Gummow

Multi-talento at Jimdo
Brent Gummow has been building websites for small businesses, non-profits, artists, and educators for the past 17 years in both Ohio and California.

He currently serves as the Multi-talento in Jimdo's San Francisco office, solving problems, educating users, and helping to grow awareness about Jimdo, the easiest website builder on the web.
Follow Me

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>