How to Design the Perfect Email: Part Deux
How to Design the Perfect Email: Part Deux
Once you’ve gotten your message nailed (or good enough for “version #1”, at least), it’s time to think about how you’re presenting it.
In the case of email, the first thing you look at should at is typography, specifically typographic hierarchy.
A wise man once said typography exists to honour content.
Typography exists to honour content
– Man, Wise
What is “typography”?
Typography is generally used to describe the type of fonts you use. Traditionally serif fonts have been reserved for print, and sans-serif fonts have been used for the web, although this is changing as our screens become much higher resolution.
And what exactly is “typographic hierarchy”?
Typographic Hierarchy is the name given to how you arrange fonts, font size, font weight, paragraph length and white space, to visually establish an order of importance in a body of text.
It exists to help your readers easily digest your content – without it, no matter how good your content is, it’ll be incredibly difficult to read.
Compare these two entries:
Come to Automation Summer Camp
Do you find it easier to get work done out of the office?
Do you need a road map and a plan of attack for 2015?
Is something going to give if you don’t make changes to the way you run your business?
Work with the world’s fastest growing Infusionsoft Partner to transform your business in 2015.
In the first example, our goal is to get you to come to one of our training workshops. However, without any kind of visual hierarchy it’s very hard for you to realise. You’d have to work quite hard to read the whole excerpt.
Imagine what it’d be like in a long email, or a full page of copy!
In the second example, there is a clear separation between the title and the body of content.
The body of content is separated into short, punchy sentences that are easy to read (a-la Hemingway).
It allows your brain to easily isolate the information that is key to you (if any), and disregard that which isn’t important to you.
The link at the end is a different colour to the body of text, and while much less obvious than a button, still provides a visual cue for your brain.
We can use html tags to easily create a visual hierarchy that pulls our readers step-by-step down the path we’ve laid out for them.
Think of yourself as the woodcutter leaving trails of pebbles and breadcrumbs, so that Hansel and Gretel may return safely home.
Basic visual hierarchy (and believe me, basic is all you need) is very easy to accomplish. In order of importance:
- Weight (i.e. Normal vs Bold)
Size is the most important, easiest, and most obvious way for your readers to distinguish between sections of content.
It applies as much to email copy as it does to web copy.
Font weight is the next way to help your readers distinguish between a body of text, and the really key parts of text. It’s as useful as italics for highlighting, but much more reliable across multiple devices and different kinds of screen.
You can use text alignment to highlight especially key parts – whether or not they’re a sub-section, a main section or a call to action.
Think about it.
Doesn’t this centred text jump out at you?
Use positioning as much as size and weight to really get your point across.
The final tool is the judicious use of colour.
While buttons have become the norm for CTAs, you can also use stand out colours that contrast with your colour scheme to make important lines stand out.
For a long time the internet standard has been blue, and underlined. It was originally blue for no other reason than the first web developers who were creating something called “html” liked the colour, and it stuck.
But really, use whatever colour you like. Combine it with weight or size. Just don’t over do it…
Hierarchy and Email
The fact that our copy will be read on the web means that, unlike print, it has a requirement beyond readability: interaction.
As we’ve already seen, the goal of an email is to elicit an action – we want, at the very least, for our subscribers to click on some kind of link so that they leave their inbox and enter our distraction-free world.
Remember, you’re the woodcutter, and you want your readers to follow the trail.
We’ve already seen how some companies have used visual hierarchy to direct readers to the desired outcome in an incredibly subtle, but incredibly effective way:
We can use visual hierarchy to make our emails easier for our readers to follow, and therefore, easier to act on.
With the simple addition of typographic hierarchy, we can turn this email:
- Is my copy divided up into short, easy to digest sections?
- Are my headlines in a heavier, larger font than the main copy?
- Are my CTAs:
a) a different colour to the main copy,
and b) would aligning the CTA in the centre make it easier to click on?
- Is my body copy big enough to read?
That should be enough to get you started!
Before I let you go, there are a few more things to consider:
Don’t use too many fonts.
The current trend is to use sans-serif fonts for headlines, and serif fonts for body copy, but honestly, it’s not that big a deal.
Just pick one and roll with it.
For whatever reason I prefer sans-serif fonts like Helvetica for emails, even though I love serif fonts on websites.
Keep the main colour dark.
Low-contrast font-to-background ratios are a spam flag, and make it hard to read for those with bad eyes.
Keep the font colour #333 or darker.
There’s a lot of research that shows pure black is the best to go with for readability – #000000 all the way!
BLOCK CAPITALS ARE HARD TO READ.
So is bad spelling.
So is bad grammar.
While nobody is perfect it can be extremely difficult to read long paragraphs if theres no punctuation to ease the readers eye and getting simple grammer rules wrong not to mention spelling mistakes is and instant credibility killer.
Now, how hard to read was that?