Email Design: Fonts, Images And Your Beautiful Branding
You’ve spent hours developing your branding. Building such strong brand awareness that your customers know who you are, what you stand for, and what separates you from other brands.
They “get” you.
They could pick you out of a lineup.
Then you log into your Email Service Provider and yay! The drag-and-drop editor is easy to use. But hang on, its design features are limited. Where’s the option for the fancy overlay?! Why can’t you use your custom font?
It’s at this point that popping in an image with your brands’ fonts and colours on looks very appealing…
Then another.
And another…
Not so fun fact; I lost a client once because I was uneasy with their all-image emails.
Now, I’m not here to debate the all-image email today. Maybe you don’t have the skills or resources to create the exact on-brand emails your manager has mocked up in Photoshop and INSISTS have to be replicated exactly-as-they-are because the entire team has already signed off on them.
No judgement. You’ve got to do what you’ve got to do.
But I urge you not to cling on to your image heavy emails so tightly. Don’t let brand fonts become more important to you than deliverability and accessibility.
Like said client above *ahem*.
I want you to use images! I really do. But I want you to use them with intentionality. Your email fonts and images should work in conjunction WITH your branding, driving conversions.
Tip top typography
You should always use live text for the main copy of your emails.
Live text is the copy contained in your email's HTML code (it’s what you type directly into your email service provider's text boxes).
When an email utilises live text, the copy displays clearly as soon as it’s opened. Live text is better for responsive designs and is less likely to see your email go into spam.
But we can’t avoid it, your font choices for live text are limited (no, it's not just your particular email service provider being awkward).
It comes down to the many variables problem.... Apple and Windows computers have completely different fonts installed by default. Outlook and Gmail have different interests and priorities.
Take all the different types of devices, software and email clients into account and it becomes quite the challenge!
So, when choosing what fonts to use in your email, you need to revert to the lowest denominator. The ‘default fonts’ that are found on most devices and operating systems.
Here are the key players:
Sans-serif - Helvetica, Arial, Verdana, Trebuchet MS
Serif - Georgia, Times New Roman, Courier
These are referred to as ‘web safe fonts’.
Choose the fonts closest to your branding, keeping readability and legibility front of mind.
Stick to one or two fonts as this helps keep your brand’s communications familiar
Your font should be suitable for scanning and skimming
The font you choose shouldn’t draw attention away from your CTAs
Some (but few) email clients also support web fonts. There’s a great guide to them here if you want to scope out better creative options, and are up for a challenge.
Picture perfect
Images should work in harmony with your live text, not in place of it.
Think of banners, product shots, social media blocks, team profiles and behind-the-scenes pictures in a supporting role. The creative ways you can integrate images into your email design are endless, and they can ABSOLUTELY feature your band fonts.
If your images are perfectly sized, linked to the corresponding product pages and have concise alt text added? They are the perfect bridge between your branding and the email design limitations you’re facing.
Sizing
Avoid overly large images as they can slow loading times or get your emails clipped
Remember that the maximum file size for images is 1MB
Research the platform you use and size your images with their maximum width in mind (emails have a limited amount of width for images, for example Mailchimp’s email templates are 600 pixels wide)
Alt Text
You’re probably familiar with alt text for website SEO.
Its purpose in email is quite different. Alt text here is a brief description of an image in your campaign that displays when subscribers cannot access your images.
It's essential for accessibility. Without alt text, a screen reader will tell your subscriber there's an image there, but the subscriber has no way to determine what information the image provides.
It’s also important for subscribers who intentionally choose to block images. And for those who might just be having pesky Wi-Fi issues.
Keep your alt text easy to read and digest, one or two sentences
Use punctuation marks (screen readers need them)
If an image includes text, repeat that information in the alt text so your subscribers don’t miss it
Finding balance with a banner
One of my favourite ways to incorporate brand fonts in email is with banners. Watch how I create these in Adobe Express…
Here’s a link to the banner I created. A Summer Sale template for you to use quickly and easily in your own Adobe Express account. No catch, no need to sign up to my newsletter. If you like it, it’s yours.
