Website Text Vector

For your small business, your website plays an important role in establishing credibility and enticing people to become consumers. It is a primary method of verification among the public, and people don’t take website appearance lightly. If you’re an established business, your website is expected to reflect your level of professionalism and legitimacy. In fact, according to the Vistaprint Digital Impact Report on Online Identity,

“45% of people are unlikely to buy from a business with a poorly designed website.”

That’s nearly half of the population! In order to attract the greatest number of potential customers, your website structural design and content design need to be seamless. Fortunately, we recently highlighted the structural requirements of a great small business website, and today we’re going to examine the content side, specifically website text and its readability. Website text readability is often overlooked, but is so important to your business success. Your text must be relevant to its audience so it engages and converts readers into subscribers and eventually loyal customers.

We’ve gathered the six best practices for creating readable website text, so let’s dive in!

Line length

Believe it or not, but the length of text on a single line is incredibly important for attracting your readers. The ideal measurement for web pages, according to Smashing Magazine, is between 45 and 85 characters per line. This length is long enough to appear worthy of reading, but short enough not to scare readers away.  However, the character lengthy may vary depending upon your website settings. Use your instincts and find a balance between short and sweet sentences and those that run the entire length of your page.

Secondly, you should avoid text wraps. A text wrap, as seen below, is when an image of graphic is inserted next to a column of text and it forces the text column to significantly decrease in width. This creates two visual columns for the reader; one being the image and the other is the text.

Text wrap example on website

image courtesy of Spoon Graphics

The narrower text column forces sentences to wrap onto second and third lines, making it more difficult for the reader. For most people, they read from left-to-right, and having a graphic directly next to text causes a distraction. Text wraps break up the natural reading and scanning rhythm for the reader, and it takes extra effort to calibrate to this change. If you include images, which we highly suggest, make sure to insert them in between paragraphs or sentences, like in the example below.

Image between text for website readability

Typeface style

Choosing fonts for your website is an extremely nuanced process. You want to find a font that represents your brand, but is also easy to read. The hyper-stylized and faux calligraphy fonts may be beautiful, but if your readers can’t decipher what is written on your webpages, it isn’t the best choice for your site. The number one criterion for your font choice is readability. Popular and easily read fonts are Sans-Serif, Helvetica, and Arial. Use these as guidelines for finding your perfect font that doesn’t look exactly like your competition.

To add dimension and break up your text, include bold versions of your font for headlines, section titles, and other headings. For example, use Neue Helvetica Light as your body text and Neue Helvetica Bold for your headlines and section titles.

Neue Helvetica Light Font Sample

Neue Helvetica Bold Font Sample

Margins and padding

Give your words some space! Line spacing and margin widths should be considered as you fill your webpages with valuable content. We’ve all experience reading a website where the text seemed dense, and I’d wager to bet that spacing was a main culprit. While there is no specific science behind how much spacing is required, you can do a gut check when your text is on the page. At first glance, does it seem heavy or are you unmotivated to read it? If you said “yes”, then you should increase the line spacing and review your margins. White space, even between lines of text, is beneficial to viewers and makes your webpage more readable.

Color and contrast

You most likely have carefully selected colors that are part of your brand identity and they should be represented on your website. Strategic placement of your logo is powerful for creating recognition, however, when optimizing your site for readability, basic colors are best. Think about the websites you frequent most often. They probably have accent colors and logos in the headers and footers, but the primary text and backgrounds are simple, clean, and reader-friendly. They offer a stark contrast between the text and background so there is no strain or deterrent from reading on.

If you want to use background images or colors on your website, ensure that you choose a font color that clearly juxtaposes with it. Creating the strongest contrast possible encourages your viewers to read your entire page and allows them to process your content without interruption.

Mobile and desktop optimization

As you could have guessed, having your website optimized for mobile and desktop is integral to the readability. While this can be overlooked when you’re in the midst of designing your site, it is important to revisit and revise when you can. People are using their mobile devices more and more, and it is safe to assume the majority of your viewers are accessing your site on a mobile device. Build mobile optimization into your web design and development to make reading off your site as simple as possible, no matter the device.

Designmodo published the following guidelines for character length and line spacing of mobile and desktop sites. They are worth printing out for quick reference.

Desktops:

  • Characters: 55 to 75 per line, including spaces; ideal is closer to 65 characters per line
  • Line spacing: 1.5 times the size of type

Mobile Devices: 

  • Characters: 35 to 50 characters per line, including spaces
  • Line spacing: 1.75 to 2 times the size of type

Easy to Scan

As mentioned above, reducing the dense feel of text and having your webpage appear approachable is largely tied to how it is segmented for the reader. In order to nab a reader’s short attention span, include intriguing headlines on your pages and have the text stand out. Bold or underline the header or use a contrasting color to have it pop from the page. Similarly, breaking up paragraphs of text with images and bulleted or numbered lists provides another opportunity for the reader to pause while on your webpage. People’s eyes are drawn to things that stand out, and these tactics will invite their attention.

Use of hyperlinks is a lesser known way of making a page easy to scan. These links instantly draw the eye because they are underlined and appear in a contrasting color from the remainder of your text. The link text should be user-friendly and convey what the reader can expect from clicking the link. Again, this is a visual break for the reader, but one that gives important context to the subject of your page.

Lastly, utilize white space. The most enjoyable and popular websites for consumers have a lot of white space and that is intentional. Open space offers breathing room for the viewer as there are physical breaks between text where they can process what they’ve just consumed before moving on to the next headline, graphic or page. Apple’s website is an example of brilliant white space. There is just enough text to communicate what the company is about, and the abundant white space highlights the simplicity of their offerings. It is a subtle way of showcasing an understanding of their audience and how much information they want to absorb at any given moment.

Apple website

image courtesy of Apple

Don’t underestimate the power of white space as it’s a simple way to enhance your page readability with minimum design effort.

In essence, crafting appealing, easy to read website text significantly increases a visitor’s duration on your site and likelihood of becoming a valued customer. Make it simple for your guests and have your text readability match the flow of your website design. Have your own best practices? Please share them below so the entire community can benefit from your expertise.

About the Author: Julie Chomiak is the Content Marketing Specialist for Webs and Pagemodo. When she’s not scouring the web for small business trends, Julie loves traveling, interior design, and animals of all kinds. Get more from Julie on the Webs Blog and the Pagemodo blog.

5 Responses

  1. Reply
    Sourav Saha
    Jun 17, 2016 - 04:44 AM

    Design and the proper text view really plays the key value for the popularity of any site. The viewers tend to more attract to the good designed blogs and its obvious.
    And thanks for the great tips. All are just well described.

  2. Reply
    Aditya singh
    Jul 14, 2016 - 01:48 PM

    Perfectly written!! Searching for this topic for 1 month on google. Such a nice post and nice information about website readability. Thanks for this.

  3. Reply
    parag shah
    Jul 15, 2016 - 02:07 AM

    This is something web developers need to get a grasp on. It’s key in modern design.

  4. Reply
    rationalweb
    Jul 21, 2016 - 06:28 AM

    Great post,The viewers tend to more attract to the good designed blogs and its obvious.

  5. Reply
    Taylor Minaj
    Sep 15, 2016 - 10:28 AM

    Good article, I am sharing this article with my friends

Leave a Comment

STYLE SWITCHER

Layout Style

Header Style

Accent Color