9 Tips For Better Performing Typography On A Landing Page

Elisa Silverman

Visitors to a landing page are going to make their three-second decision whether to stay based on the visual information before them. Consciously or not, their eyes are scanning quickly for certain words; they’re judging the landing page’s design for credibility. As typography is a main factor in both these areas, the choices you make in typography for your landing page design matter.

Not a Typical Webpage

Certainly some design guidelines for web pages apply to designing a landing page as well, but you do want to keep central in your designing what separates landing pages from your typical webpage: A landing page needs to inspire a specific action. If you’re not familiar with landing page terminology – this is the all-important conversion. A landing page serves no purpose other than to convert.

People don’t act on what they can’t read

Stellar copy and a magnificent offer don’t mean much if landing page visitors never actually read them.

Your typography design must promote readability. Keeping that principle at the fore, here are nine tips for designing a landing page typography:

1. Substance always trumps style. An attractive, cohesive design is important.
   It is not more important than what? Than motivating people to take the desired action on the landing page.
   You don’t have to – nor should you – sacrifice style. But between a spine-tingling creative choice and the one likely to improve the user experience and therefore conversions, prioritize the user over your artistic sensibilities.
   
2. Align typeface choices with the target market. A single landing page will never serve all markets. Even when designing a landing page template, you should at least have an idea of the general target market for whom that template is designed.

Everyone coming to a landing page is coming from somewhere that induced them to visit this page.

In a study done on whether typeface could influence believability, it found that the formal Baskerville had more credibility than the whimsical (and much-maligned) Comic Sans. Does this mean you should always select a formal typeface? I don’t think so. A common reason a landing page visitor will leave the page quickly is because the visuals don’t match their expectations. Everyone coming to a landing page is coming from somewhere that induced them to visit this page. So they’ve already built some anticipation of what they expect to see.
Someone motivated to visit a landing page about a dog-walking co-op won’t have the same visual expectations as someone expecting to read about an online legal service. The text that was the subject in the aforementioned study was scientific, a formal subject. This may well explain why the more formal typeface was more believable. A less formal topic may be better served with a less formal typeface. (But still, stay away from Comic Sans, really.)

1. Serif or Sans-Serif: The eternal question. The answer for playing the odds for designing a landing page template → Pick one for the body copy and the other for the headline text. That’s a total of two typefaces on your landing page, except for…
   
2. Use a stand-out font for the Call-to-Action. The call-to-action (CTA) is the specific language, usually on (and possibly around) a button that completes the action the landing page owner wants visitors to take. This is copy that really needs to stand out from the rest of the page. This may mean a third typeface and/or other distinct font choices that differ from the body and headline copy.

Avoid fancy typeface. Fancy or script typefaces degrade readability and legibility, which adversely impacts reader comprehension. Readers aren’t going to act on copy they aren’t reading. Don’t read this to mean you can’t use a non-standard typeface. However, if you are going to use a web-based font, be mindful of how your choice impacts the loading rate of the landing page. People will abandon a page that takes too long to load, usually around the four second mark.

1. 16 pixels for body copy may be the sweet spot. Here is one author’s case for 16 pixel body copy. A recent study conducted by the same site reviewed the typeface choices of sites with high motivation to maximize their readability and the resources to likely have done a lot of testing for what works best. It found that average pixel sizes for body copy has increased to between 14-16 pixels.
   
2. Keep headline size proportional to body copy.Font size that’s too big has been shown to negatively impact readability as much as font that’s too small.

Font size that’s too big has shown a negative impact on readability as much as font that’s too small.

1. Allow color options to be used for emphasis. The web design principle of copy contrast to background holds for landing pages. You want body copy that provides a dark contrast to a lighter background. Within this parameter, an alternate font color can be used on headlines, specific words, and links to provide emphasis and guide the reader’s eye.
   
2. More white space = easier readability. When designing the typography, consider the white space between the letters and the lines. Crunched up words and lines of text are harder to read. In one case study, one IT website saw a 133 percent boost in conversion rates after increasing the font size and space between each line on its website.

The bonus tip: A/B test

The typography scheme that’s best for your landing page is the one that results in the highest conversion rates. If that means it’s the one with five different fonts all smashed together, then go with it. When you come to create your landing page – think about the way your typography choices will affect the end-user.

(198)