Present Your Brand Identity Fonts for email: what you need to know

Fonts are an important part of your visual identity, so naturally you want to use the right ones in your emails. But in email there are a few other things to consider.

Which fonts can I use?

When you open a program like Microsoft Word, you will often see a large selection of fonts. But, just because you have them installed, it doesn’t mean everyone else does.

Email clients such as Outlook can only display fonts that are already installed on your recipients’ computers. So they simply won’t recognize a new, fancy corporate typeface that you are using in your printed materials – the font will instead be rendered as the default for their system (usually Arial on a PC, and Helvetica on a Mac).

Keep in mind that Apple and Windows computers have different sets of fonts installed by default, which generally makes things more challenging.

How to choose a font?

To be safe, use fonts that are commonly included with most versions of Windows and Apple’s OS X.

That way, most computer users will be able to see them.

Failsafe font lists

You should list three fonts in total. Your recipient’s email client will display the first one in the list that it can use.

[Download PDF to see Image]

Try our top three

There’s a wide range of options on the safe font list. At Adestra, we tend to use the following three sans-serif typefaces:

• Arial, Helvetica, sans-serif;
• Verdana, Geneva, sans-serif;
• Trebuchet MS, Helvetica, sans-serif;

A serif is a term from typography, and it defines a small continuation attached at the end of letters. That way, words seem to flow similarly to when we write them by hand. However, serifs make reading on a screen more difficult, which is why we use sans-serif (literally from French ‘without serif’) typefaces.

Want more choice? Try this

Some email clients support @font-face and @import within a stylesheet, so you can specify any font. The font needs to be supplied from somewhere. We recommend hosting your own using @import or a provider such as Google Fonts.

But remember…

Only a small number of email clients accept this: Apple Mail, iPhone, iPad, Android Mail and Thunderbird. If it’s absolutely essential to show a particular font, use an image instead.

Resizing fonts: the options

You can include size inside the font tag, but there are other ways to set font size. Opinions differ about which one is better.

[Download PDF to see Table]

Safe font list:

[Download PDF to see List]

Make your emails picture perfect

Your creative team have spent hours designing your new email campaign. You’ve hired photographers to take the ‘sexiest’ product shots. Now what? Do you need them in a JPEG, GIF or PNG format? Should you overlay text on that beautiful photo? And what if all the money you spent on the pictures goes to waste because your readers don’t let them load?

Image types explained

Think about the type of image you need first.

[Download PDF to see pros and cons of: JPEG, PNG and GIF]

And if images are blocked?

Handle automatically blocked images by making your readers want to take that extra step. It’s a given that you should use alt tags for images, but go further. Make the text alt tags an attractive call to action to entice customers to click the download button.

However, be aware that Outlook attaches a security message to alt tags, pushing the alt text right to the end. It will read something like this “Right-click here to download pictures. To help protect your privacy, Outlook prevented automatic download of this picture from the Internet.”

Make sure the email design looks good without the images.

Get a lesson from McDonald’s! Food is all about the visuals, so how do you sell it without images turned on? In this example, you can guess the hamburger from the colored boxes even when the images are off. We’re really lovin’ it!

[Download PDF to see Image]

What’s the best image to text ratio?

Wisdom is divided when it comes to this, but generally having 35-50% images to text seems to work well.

Why can’t I just use one image?

If the email is one whole image, spam filters might block it and the pre-header text will show ‘This message has no content’. This might prevent some of your readers from opening the email.

Why can’t I just use text?

If the whole email is just text, it will be less engaging and may even seem intimidating.

Communicate Through Design

We’ve covered the basics, now it’s time to delve deeper and learn how colors, shapes and layout help reinforce your message in a more subtle way.

Rethink your color choices

According to color theory, colors can hold particular meanings. So they’re useful in communicating a particular emotion or inducing an action.

But don’t reinvent the color wheel

Remember that your email design should adhere to brand colors for consistency. Just because green CTA buttons worked for Brand X, doesn’t mean it will work for you.

[Download PDF to see Image]

Adding value to your color hues

Experimenting with all these colors at once could confuse your subscribers about what to pay attention to first. Unless your brand has a particularly quirky personality, it’s better to convey your message using value. Value is a term that describes how light or dark a color is, based on how close it is to white.

High values (closer to white) give the illusion of space, calm and happiness. Low values (closer to black) express closeness, drama and conflict.

[Download PDF to see Images]

Add shapes and lines to highlight your message

Lines:

• can be thick, thin, delicate or bold
• curved lines look organic and natural
• straight lines look man-made and give a sense of order
• horizontal and vertical lines are static, whereas diagonal lines show dynamism and excitement

Shapes:

• Squares and rectangles give a sense of order and structure
• Circles are associated with endurance but also friendliness
• Buttons with rounded corners feel more tangible - try testing them out!

[Download PDF to see Image]

Email layouts: design to fit your style

Make sure the layout of your email design fits your style. How? It’s all in the hierarchy.

What goes where:

• Put the most important CTA at the top. Use a different design so it’s clearly identifiable.
• Include other CTAs underneath. Design these in a different way so they don’t take away from the main one.
• But if you know subscribers are looking for a particular link in your email, try placing it further down to expose them to more of your content. Make sure to test, test, test!

[Download PDF to see Image]

Engage Your Audience

People receive an increasing amount of emails, which means it’s becoming more and more difficult to stand out in your customers’ inboxes. And sometimes great copy and enticing images just aren’t enough to engage and inspire them to take action.

Introduce animation with GIFs

Why they work:

• They can break the general monotony of the email environment
• They can help your emails stand out against all the other static campaigns in a recipient’s inbox
• They can be used as visual explanations for a feature if done right, e.g. food and drinks-related businesses can use them to entice viewers to crave the product
• They are overall more attractive because they contrast with the rest of your content

[Download PDF to see Image]

This GIF was part of a newsletter directed at Costa Coffee Club Members using personalization and relevant content to start a conversation around coffee. The animation showed coffee being poured and steaming out of the cups. The email achieved a fantastic 44% open-rate and produced some other great insights.

And the best part is…

GIFs render in most email clients with the exception of Outlook 2007+ and the Windows Phone 7 OS. If it’s not supported by the email client, it will just render the first frame from your animation. Check where your clients are opening emails to be sure.

When GIFs get too big

GIFs are essentially a bunch of images on top of each other, so watch out for large file sizes. The good news is that, if you understand this, you’re already halfway to solving the problem.

Fix it with frames

Test how many frames you can delete without losing the illusion of motion and then start chopping. You’d be surprised at how few frames it takes to trick our eyes.

Fix it with layers

Or use layers to change just a small size of the image every time you repeat it.

Before you get carried away…

Don’t include an animated GIF in every single email you send! Choose situations where they can make a difference, like enticing readers to a particular purchase. Otherwise, you risk losing the surprise effect. Or your customers get distracted by it and forget about your message altogether.

Advanced engagement with video

Videos can be a powerful tool for marketing. After all, we spend 29% of our time online watching them. So why not combine them with email?

Why they work:

• Good way to explain something complex, especially for new product launches
• Sound can make them even more engaging than animated GIFs
• Gets more of your message across in 8 seconds (the average attention span) than anyone could read in that time

Movies on the move

Rendering is again a big concern with video, but it shouldn’t be. With mobile opens on the rise comes the possibility of rendering video right then and there on the phone.

Will it play?

Yes. The latest versions of web browsers should be able to display it.

Just don’t use Flash…

Flash video doesn’t work on most mobile platforms, so be wary of using it.

A word about B2B emails

Things get more complicated in B2B marketing because most businesses use Outlook as an email client. Outlook uses Microsoft Word to render emails and that doesn’t read or render all HTML coding, so videos won’t work.

Thanks for reading

We hope you’ve found this Email Design Guide useful and informative. You should now understand the basics of using fonts, still and moving images, colors, shapes and layout. So you’re ready to create stunning emails that will work even harder for your brand.