Share

5 Simple Ways to Improve Landing Page Readability

Published: February 25, 2014

Author: Glenn Walker

Share

You often have only a few seconds to convince a visitor to convert, and a poorly executed design can leave visitors with a bad first impression. A pleasing design can provide visitors a good first impression and prime the customer for conversion.
Type is a big part of design, and we all know that people don’t read online; they scan. Type and design have their own rules to help designers and non-designers choose the best layout according to type. What follow are five basics I often see ignored when I come across many disjointed (and likely underperforming) landing pages.

In the text above, you wouldn’t know it, but we have a headline, a few short paragraphs, and important phrases we would like to highlight – in other words, exactly the type of copy you would find on your typical short copy pay-per-click landing page. Unfortunately as the copy is presented it just looks like a blob of text.

1. If it’s important, make it bigger but not too big.

Size is a key element of design. The eye is drawn to larger text, and it indicates the relative importance of the headline. If it’s too big it can bury your other messages, but too little size difference means it all blends together. Fortunately for over 500 years people have been laying out text, and there are tools to help non-designers balance size versus visual flow.

The typographic scale, for example, is a guide for choosing headline type sizes that differentiate type just enough based on size while keeping a sense of balance in your page copy.

More on typographic scale

–Five Simple Steps to Better Typography
–A More Modern Scale for Web Typography

2. Give copy room, but keep spacing consistent.

Space allows copy to breathe. Above we spaced out our headlines, but our body copy still looks like one blob of text. As most people scan rather than read online, breaking up long pieces of copy is important.  So use spacing to let your copy breathe and give your readers’ eyes a rest.

Similar to the typographic scale above, vertical rhythm and baseline grids are two topics you could investigate if you need to improve spacing to make your landing page copy look clear and more legible.

More on vertical rhythm and baseline grids

–4 Simple Steps to Vertical Rhythm
–Designing Faster with a Baseline Grid

3. Don’t shock the eyes. Keep it simple.

Alignment of headlines, body copy, and form labels is best left simple. Just because it’s easy to make text left, right, or centered doesn’t mean you should do it. A simple bit of advice is to ensure the reader’s eye line moves in straight lines and from left to right as little as possible.

Most western languages read from left to right, so you really want to avoid ragged edges on the left margin, like you see on the right-justified last paragraph in our example. Also centered text in body copy would yield a similar left-side ragged edge. As a rule, irregular-shaped text blocks are harder to read.

More on alignment

–Top, Right or Left Aligned Form Labels
–Design Basics: The Alignment Analysis
–F-Shaped Pattern For Reading Web Content

4. Don’t let text get lost. Ensure good contrast.

Contrast is key. Without it, your message and background blend together. There are many ways to create contrast: differing shapes, changing direction, introducing color, and changing color tone or value.  An attempted highlight text can fail, like below, when not enough tone difference is present between the background or surrounding text.

Common contrast problems I see are a headline over a lighter background image where the text fades into the image or the use of light grey text on a light background. A common test for contrast  is to take a screenshot of my landing pages and convert it  to grayscale to see whether any elements fade into the background or any copy becomes unreadable.
More about contrast:

–Fully Understanding Contrast in Design
–Contrast Rebellion – Rebel against low contrast unreadable text

5. Use color to highlight, but don’t wreck the mood.

Color can do more than highlight. Color can communicate feeling and emotion quickly and effectively. Highlighting text using color, like in the blue example below, is an effective way to emphasize text using contrast as we discussed above.

Choosing your color is not just about highlighting text; it’s also about communicating emotion. Colors like blues and greens are cool colors and can give a passive feel, while reds and oranges can communicate activity and are warm in nature. Choose colors that stand out but also colors that match the message you want to communicate on your landing page.

More about Color

–Basic Color Theory
–Paper Leaf’s Color Theory Quick Reference Poster

If you are interested in learning more about type and the basics of typography, I can recommend two books. These two books are well known in the design community and I reference them often when I want to make reports, banner ads, and even landing pages look just a little bit better.

–The Elements of Typographic Style by Robert Bringhurst
–Thinking with Type:  A Critical Guide for Designers, Writers, Editors, & Students by Ellen Lupton