Email Safe Fonts & Typography: Improving Accessibility In Emails TEST THIS

Kevin George is Head of Marketing at Email Uplers, one of the fastest growing custom email design and coding companies, and specializes in crafting professional email templates, PSD to HTML email conversion and free HTML email templates. He loves gadgets, bikes, jazz and eats and breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on his blog.

“Everyone is created different but can access places, things, or something non-tangential like an experience, without any hindrance”

This is the general interpretation of the term “Accessibility”. In the digital realm, web accessibility means designing elements in websites and/or emails to bypass any temporal, situational, or permanent disability. Creating an accessible email with email safe fonts and typography not only helps convey the message to those who find it difficult to access your emails but also provides a great user experience all of your subscribers. But before we get into the finer points of Typography, we have to take a look at fonts first.

Font Choice

As you probably know, a font is a typeface that the email client uses to display the text. There are two types of fonts: Serif and Sans-serif. Serif fonts like Times New Roman and Georgia have little embellishments (serif) at the end of each character, which aids the eye movement from letter to letter. Sans-serif fonts like Arial, Tahoma, or Verdana don’t have such nuances and so each character in a word is separated from each other.

From the accessibility point of view, serif fonts can tire the eyes out when used in large paragraphs in an email or web page. When it comes to email design, sans-serif characters are easily distinguishable on a screen and don’t tire the eyes as much as a Serif font.

Additionally, the font you choose needs to be both readable and legible. Readability ensures that one can easily identify the words when you scan through the text. On the other hand, legibility ensures that identical looking characters such ‘1’ (one), ‘l’ (el) and ‘I’ (eye) are easily distinguishable. In the example below, each character is distinguishable and cannot be confused with each other.

When it comes to email safe fonts that have good readability and legibility, it largely depends on the font and font family itself.

So which do you choose?

It’s important to think about your branding and messaging when picking out your fonts. What will go best with your email marketing, and which are web safe? Arial, Tahoma, and Verdana are all great sans-serif, web safe, and email safe fonts to choose from. While they may not be better looking as some Google fonts are like Open Sans, they’ll still be readable even in the most clunky of email clients.

Remember that sans-serif fonts have better web accessibility. Should you feel like a Serif font is more genuine to your brand and email marketing, Times New Roman, Georgia, and Courier are all web safe as well. Most if not all email clients should display these fonts with no problem, but they might be a little harder to read on the screen.

Improving Accessibility with Typography

Contrary to popular belief, creating accessible emails doesn’t always mean reworking your email HTML from the ground up. By tweaking different email design aspects like the color contrast, typography, or CTA placement, your emails can become more accessible to a larger audience. Easy fixes mean less of a headache for you, and better reading for your audience. Plus, Typography in emails isn’t just restricted to the fonts you choose in your email, but also extends to font-styling, formatting, and words per line.

Emphasis or Highlight Keywords

Make certain keywords in your email copy stand out from rest by either making them bold, italicized or by just underlining them. This way, your subscriber can skim through the email copy, yet get all the necessary information. Also, adding appropriate emphasis to your email copy is achieved by just clicking a button or adding just a touch of HTML to the body of the email — easy stuff.

Line Spacing and Words Per Line

As you can observe in the above image, if your paragraph has closely placed lines, it becomes difficult to jump to the next line when you reach the end of the current line. Always maintain a line spacing of 1.5 times the font size for better accessibility.

Moreover, the number of words you cram in a single line makes the line length long enough to tire your eyes before you return to the start of the next line. Ideally, don’t have more than 10 words in a single line as it becomes easy to read. This added measure provides better interpretation and engagement with your content for your customers.

Text Formatting

Separate different sections of your email copy through proper formatting. Headings need to be at least 22px in order to separate them from 14px email copy. Sub-headings can be 20px to better distinguish from the heading, but still stand out from the paragraph text. In the email below, I’ve have marked up the different headings EmailMonks use in our email to give you an idea of what I mean. ‘P’ is paragraph text and ‘Hx’ are the heading tags.

Font Color

Although not particularly part of typography, a dark font over a white background is readable from an arm’s length minimum. This means that you don’t have to stick to a black font, you can be a little flexible with color. If you have a darker color in your branding guidelines, feel free to use that.

Wrapping Up

As I stated earlier, creating accessible emails not only helps you reach out to your subscribers who may be experiencing temporal, situational or permanent disability as well as create a good user experience for the rest of your subscribers. Plus, picking a reliable web font means your email layout are less likely to break and become an unreadable mess for everyone. By following the above-stated tips for email safe fonts and typography in your emails, you’ll make yourself more available to everyone in your audience and have a better, happier sending.