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.
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. Also centered text in the 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
5. Use color to highlight, but don’t wreck the mood
Color can do more than highlight. Color can communicate feelings and emotions 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
Learn more about our creative performance offering
Explore
Questions?