Thirteen Tips To Make Sure People CAN READ Your Damn Ad

2019-10-16 08:35:00


Reprinted from STM forum

You know what really crushes your ROI? 

If no-one can read your ad. Or your landing page. 

And this is a very common problem I see in affiliate campaigns, particularly for newer affiliates. 

You can have the best, most persuasive, most selling copy in the world, but if your prospects can't read it, you'll be looking at an ROI apocalypse of Biblical proportions.

So - yes, typography is boring. For a lot of people, anyway - me included. But you know what aren't boring? Large sums of money. And learning a bit about typography helps you get there. 

Let's get going! 

Use Bigger Type.

If there's one tip on this entire list that you follow, make it this one. 

Almost everyone chooses font sizes for the Web that are too small. Bigger fonts are more readable, and whilst that's important for all websites (I significantly dropped the bounce rate on one of my authority sites just by moving from 12pt to 16pt) it's critical for advertisers, because the chances are our prospects aren't highly invested in reading what we have to say. So if the physical act of reading is hard, they'll just stop. 

Smashing Magazine made the case for 16px fonts as an 
absolute bare minimum, and I agree. Indeed, as I said above, I've made money by simply making fonts that size in the past. That's 16pt in Photoshop if you're using 72 DPI (Dots Per Inch) images. 

How does that look? Well, here's a font-too-small ad: 


and here's one with an appropriate text size: 


We see a little less of Miss Piggy in the latter image, but it's clearly worth it. 

16px is for your body text, which will be the smallest text in your advert. Headers should be larger -we'll get to that in a moment. 

Another way to look at this, and something else you should consider, is to look at the number of characters per line on your lander (this rule doesn't apply to ads). 75 characters is the maximum for optimal readability, and for advertising copy 50 is better. Why? Because research shows that readers get a small, subconscious boost to excitement every time they finish reading a line. Short lines keep your readers focused and excited. 

You can use techniques like 
viewport size typography to fix the number of characters per line on most devices. 

Contrast Is King

And here's the other one tip you should follow. 

The biggest error I see in readability on ads is not using high enough contrast. If the text doesn't stand out from the background enough, it simply won't be readable. 

Here's an example: 


So what can we do to make it more readable? 

The gold standard of readable contrast is white background, not-quite-black text. Lots and lots of studies have been done on this, and it wins every time - in particular, showing that readers showed 26% more comprehension of text in black-on-white rather than white-on-black colour schemes. Here's 
a summary of some of the research.

Why not-quite-black? Because completely black text on a computer monitor is really, really black - far darker than print. In fact, it's so dark that it can cause 
eye strain. Again, that makes reading our ads less fun.

So if you possibly can, use a white background and a font set around #444 for web colours or around 68, 68, 68 in Photoshop (RGB). 

If you can't do that, choose the highest contrast you can between light and dark. Good tricks include the Web favorite of putting a semi-transparent black box behind the text to increase readability, or using a thin contrasting stroke to make the text stand out. Here's that image again: 


Try HARD To Use HTML Not Images For Text.

... for text. (The rules are very different for images.)

If at all possible, you should try to ensure that the user's browser renders your text rather than having it as an image. Over 30 years of research have gone into rendering text on screens as cleanly and readably as possible, using advanced techniques like sub-pixel sampling. Text will always, always be more readable as HTML text than it will be as an image, to the point where if you simply replace your single-JPG quick test lander with an HTML equivalent, you'll see a CTR boost most of the time. 

(That's why if you do use the "single image lander" test approach as a quick way to test landers, you should definitely not stick with them after you've found a winner, but recreate them as an HTML page.) 

As a bonus, HTML text is incredibly bandwidth efficient. This line: 

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "

takes 20kb as a 16pt JPG image, 7kb as a PNG image, and less than 500 bytes as text. That's over 10x compression! 

If you have to use images for text, consider PNG or GIF

Obviously, you usually can't upload banners as HTML. In that case, it's worth thinking hard about what image format you use. 

JPGs are terrible at rendering text. They're designed and optimised for photographic images, and the same low-level "fuzzing" that makes them work so well for that role makes them work really badly for mostly-text images. 

PNGs and GIFs work much better for text, producing nice clean, crisp edges that make it both more attractive and easier to read. As a bonus, they also compress text better - PNG-8 is a particularly efficient format for text, often halving file sizes compared to JPG. 

If your banners are significantly text-based, and particularly if they use illustrations or icons rather than photos, test GIF or PNG banners as well as JPGs. You'll often see a significant increase in CTR. 

Indeed, in one test I did a while ago, even 24-bit PNGs (much larger filesize) outperformed JPGs as mobile ads.

Line Spacing Is Important

One of the "big four" elements of readability according to typographers is line height - the vertical spacing between lines. And it's an easy one to forget. 

As a rule, your line height should be set to at least 1.5x the size of your font. Try all the way up to 2.5x and see what looks best. Most programs, including Photoshop and default CSS, set this too small. 

You can change it using the line-height property in CSS and in the character tab in Photoshop. 

It's a subtle tweak, but one that's very worth doing. 

Try To Use System Fonts For Landers

Web fonts like Google Fonts and Typekit are great, and can make a site look very attractive, but they come at the expense of loading speed. 

And this is me, so you know you're not getting away without at least one point about loading speed in this article. 

As I've said before, loading speed directly correlates to ROI. It's the only variable on a lander you can change that will improve your ROI with 95% certainty. So it's worth obsessing over. 

@font-face declarations do bad things to page loading speed. They don't necessarily stop the page loading (although they can, particularly on IE), but they do cause the infamous "Flash Of Unstyled Text" where the text on the screen suddenly, jarringly changes, and they'll eat up bandwidth. 
Here's a good overview of the problems with @font-face. You can get deep into fixing these loading problems, but it's hard, time-consuming stuff. 

As a rule, it's better to rely on system fonts for your landers unless you have a very strong reason to go for a non-standard font. When you're choosing system fonts, the best options are "font stacks" based on Helvetica, Georgia, or Verdana - the most readable and universal fonts. 

As a side-bonus, those fonts also have decades of research behind them making them as readable on the Web as possible. 

You should also pay attention to making sure your system fonts have fall-back options. This is known as a "font stack", and it both lets you take advantage of other less-used system fonts, if you want to, and means that none of your readers will see butt-ugly, unreadable text. 

Here are three good font stacks: 

·        Georgia-based: Cambria, Georgia, serif;

·        Verdana-based: Verdana, Geneva, sans-serif;

·        Helvetica-based: "Helvetica Neue", Helvetica, Arial, sans-serif;

You can find more font stacks 
over on this great site

For ads, of course, you can ignore all this and use whatever font you want, as you'll be rendering them as images anyway. 

Make Heading Size Proportional

Another simple but effective tweak - don't choose your heading sizes randomly, make them proportional to your body font size. 

This gives the overall design a more pleasing look, and makes the site or ad look more professional/trustworthy. 

As a very simple rule, use a header that's 2x your body text size. 

If you want to get more complex, you can use 
this calculator to spit out a wide variety of proportionally-sized header options. 

Finally, use bold text for your headline, and make sure that your headline is in the largest font size you use in the lander. 

Use The Right Text Options In Photoshop

Even after you've chosen the right file format in Photoshop, there are still a bunch of other settings you should use for optimal text rendering. 

For starters, set the text tool to "Crisp", not "Sharp". Sharp is mostly for print or very large text. 

Set the kerning to "Optical" - that'll even out spacing between the letters - and add a bit of negative tracking, around -5 to -10. Here's a screenshot of those options set in the Character tool in Photoshop: 


Justified Text

Don't. Seriously. 

Justified text might look more regular when you're looking at the design as a whole, but it seriously decreases readability. 

Colour Emphasis On Text

Here's a great tip I got from fellow STM mod Shishev (who is a typography expert) - use colour emphasis in your lander to increase CTR. 

What do I mean by this? Either add a small rectangular background in a different colour to the regular background (the infamous "yellow highligher" effect) or just change the colour of the text for key words and phrases. 

He's tested this "a million times", and used the approach for multiple consulting clients, and it's one of his favourite CTR-boosting techniques. 

On a similar note, changing the font-weight does much the same thing. When reading cmdeal's posts, notice that he often bolds key words and phrases? Yep, that's why. Great tip to draw the eye down the page. 

Don't Use Too Many Fonts

The infamous Newbie Mistake #1 when choosing fonts is simple: choosing too many of them. 

Don't go wild with a dozen fonts on a single page. Two fonts is plenty, and one font is fine. 

If you're choosing two fonts, make sure they contrast strongly. Reserve any "fancy" fonts for headers only - smaller text should always be super-readable. 

Tailor Your Font To Your "Persona".

The precise font you choose has a very strong effect on how your lander or ad is perceived. 

Filmmaker Errol Morris did a test in the New York Times a while ago, where he proved that 
certain fonts rendered an article more believable than others - literally changing nothing but the font in the article. 

The font you choose is incredibly powerful - but it's powerful because of what it makes the reader believe about you. 

Fonts like "Baskerville" are very formal, old-fashioned, and scream "authority". (That's the font that Morris found made NYT articles believable.) 

By contrast, whilst Morris found Comic Sans massively reduced believability, I've found that it works extremely well for less formal venues - like dating ads. Again, literally just changing the font significantly increased CVR and CTR on some of my dating campaigns. 

Choose wisely and appropriately, and consider split-testing fonts and nothing else.