One of the most important things to understand about creating and sending email messages is that any text, images, or formatting may not reach a recipient with the same look and feel that you intended. Because email messages are read on a vast number of different devices and operating systems, it might be helpful to think of your intended formatting as a “suggestion,” rather than a definitive outcome.
For example, you might create an email message in Outlook on a Windows computer, while readers may receive your message on a Mac computer in a web browser, use an email app on a phone set to dark mode, receive notifications on a smartwatch screen, while other recipients may require a screen reader.
Because of the diverse ecosystem of platforms, it is good practice to understand that your email message will have a different appearance on other devices, and that successful communication depends upon a message being received and understood.
With this in mind, the best practice to get your message across, to all recipients, is to do it with simplicity. Your primary focus should be on readability and accessibility for all users. Follow these guidelines to ensure your content can be read on all device types and by all users.
Table of Contents
Body Text
A few guidelines to consider:
Dos
- Use the default font size.
- Use left alignment only for text. This is the easiest to read.
- Use short paragraphs with plain language.
- Use call-to-action links.
Don’ts
- Use custom fonts or font sizes. Your recipients may tailor their device settings to assist their needs and a custom font will override their settings. If you must set a font, choose from sans-serif which presents best on screens; use a default font, such as Arial, Calibri, Helvetica, or Tahoma.
- Use center or justified text. These selections may appear distorted, especially with longer text.
- Never use underlines, this format can be confused with links.
Images
Assume recipients will never see the images you include. If you are including an image that is not for decorative purposes only, then your image must include alternative (alt) text. Some recipients may turn off images for privacy reasons or to limit their bandwidth, be temporarily experiencing connectivity issues, or have visual impairments that may prevent them from viewing the image. The W3C has a guide to determine the type of alt text you will need.
Alt Text
Typically, alt text will be displayed by an email client when the image is not displayed. For those using a screen reader, images will be read to them. Explore our guide on how to add alt text to web pages and emails and how to write descriptive alt text.
Event Posters or Flyers
If you are adding a poster or flyer to your email, you must confirm the text appearing on the image is represented in the email body as live text, or as alt text associated with the image. Any words on the image or flyer must be included in the alt text if they are not in the email body. Important information (such as dates, times, and/or locations) should always be included in the body of the email.
In addition to making your poster or flyer accessible with alt text, you need to consider how that image will look on a small phone or a large desktop. Remember, when you use an image or a PDF, you do not have the ability to automatically resize the content on the image to the device it is being viewed on.
Links
Below are a few, quick guidelines for creating accessible and compelling links. For a full description, review our guide to writing links.
- Always use a descriptive call to action such as “Schedule an appointment.”
- Never use the URL itself as the link’s text. If you put a URL in as the text, screen readers will read the full URL, offering no meaning as to what is being conveyed.
- Do not use generic link text. It will not describe the destination to the user. Some examples to avoid include:
- Here
- Click
- Click Here
- Read More
- Learn More
- Register
Colors
When using color, always consider the following guidelines:
- Color alone should not be used to convey meaning.
- The text needs to have a sufficient contrast ratio with its background.
Don’t forget: not all email clients will render the colors as you expect. As a rule of thumb: you should limit the use of colors in your emails.
Contrast Ratio
When choosing a color, you must ensure that it has a high enough contrast ratio with its background. The current standard is 4.5:1. If the contrast is too low, many people will find it difficult or impossible to see your text. If you are unsure if you have provided enough contrast, you can test your color palette for accessible combinations with the Accessible Color Palette Builder.
Color for Meaning
While most people can see full colors, not everyone can. If you use colors to convey meaning, you risk this meaning being lost on a group of readers. Instead, use another element such as a shape or text alteration to ensure that all of your readers can grasp the meaning.
As an example, if you had an important element in your message that is highlighted in red, it might stand out to folks with the ability to see red amongst other colors. For those who lack this ability, they would never notice the red highlight.
You can test what it’s like to view your designs through a color blindness simulator.
Email Clients
When it comes to the colors you choose for your email, there is no guarantee that the recipient’s email client will display them in the way you expect. Various devices now have a dark and light mode; your color choices might make it difficult, or impossible, for people to read the text in certain color schemes.
Tables
Tables are designed for representing data and should only ever be used to do so, with proper headers. Depending on your email client, you might not be able to create properly formatted tables and might benefit from using an Excel file instead. Note that your email might be displayed on devices with small screens, which should be a consideration when adding a table. Tables with multiple columns will have issues being displayed on a smaller screen. Depending on a variety of factors, the email might scroll horizontally, be cut off, or may have its front shrunk, causing the table to be illegible.
Attachments & PDFs
Before adding an attachment consider the following:
- Will you be able to get your message across if the recipient does not open it?
- Is this attachment accessible?
- Can it be viewed by all on all devices?
- What happens if the recipient opens the item on a device it was not designed for?
- Will this attachment cause the recipients email box to fill up?
Assume that the reader will, either by choice or by circumstance, never open your attachment(s). Any part of your message you want to convey should be a part of the live text in the email body. This is the only way to make sure your message reaches the recipient in a way that they will be able to consume.
PDFs
PDFs are very easy to create incorrectly and very difficult to make accessible. They require a fair amount of testing to make sure they are accessible, including whether the reading order is correct, whether all appropriate images have alt text, whether the text has sufficient color contrast, and whether a proper heading structure was created. You can use Adobe Acrobats’ accessibility assistance tool or an online service that will scan your PDF for accessibility compliance. However, these are not enough to know if the document is accessible and should not be considered as a seal of approval. You should only attach a PDF to your email once you are absolutely certain the attachment is accessible.
Consider all of the ways and devices someone might view the attachment. For example, a PDF of a flyer that was originally designed for print might look acceptable on a desktop computer with a large screen, when you can see the entire flyer at once, but what will it look like on a phone? Due to the smaller size of a phone screen, a user will most likely have to pinch and zoom throughout the document to read each line of text. This experience can be frustrating; thankfully, it’s entirely avoidable by including the content of the PDF as part of the body of the email. When you have the choice, always include your messaging in the email body, rather than as an attachment.
Remember that PDFs are meant to be printed, they are not meant to be viewed on a screen. There are some regulatory instances where a PDF is needed to replicate something on paper, unless you have this need, do not use PDFs.
Images
There are two issues with attaching images to your email. First, images are a fixed design; no matter the device they are viewed on, they will look the same. While the image might look good on a desktop, it might be impossible to read without zooming in on a phone. Second, there is no way to make images accessible to people who are visually impaired.
Audio and Video
Most email clients will not allow you to play audio or video directly in your email, making you either attach the file or link the file to a web page.
As an attached file, you will not be able to include captions or transcripts that would need to be associated with the media. As such, you should not email a file directly. These files are large and may fill up your recipient’s mailbox.
Placing the media on a web page is the best distribution method. Wherever these media items are hosted, videos must have captions associated with them, and the audio must have a transcript associated with it. In addition, the player controls for either of these must be accessible so that they can be used with just a keyboard.
Emojis
Emojis can be fun and add flair to your message but can look unprofessional when used in excess. You also need to consider how emojis will be spoken when somebody is using a screen reader. Consider this example:
“L❤️VE”
To a sighted person, they will probably see the heart emoji as the “O” in love, but to a person using a screen reader they will hear, “L red heart ve.” You should always consider if the recipient will understand the meaning of how the screen reader will read an emoji.
Emoticons
Text-based emoticons should never be used. They are made up of characters and punctuation that will lose meaning for individuals using screen readers. As an example, the classic shrug emoticon “¯\_(ツ)_/¯” may be read out as, “macron backslash underscore left parenthesis katakana letter two right parentheses underscore slash macron.” This is not a user-friendly experience.