How Typography Shapes Email Readability
Every morning, millions of people sit down in front of their screens, open up their email programs, and start scanning through message after message. Some of these messages will be read from start to finish; others will be deleted within seconds of being opened. Why do some emails get more attention than others? The content of the email and the subject line of the email are, of course, two of the main factors that determine how much attention an email receives. However, there is another factor that plays a huge role in the attention an email receives. This factor is typography.
Email typography is far more than choosing the right font.
Good typography aids the processing of information in an email, but that’s only obvious once it’s actually been applied well. When it hasn’t, even well-written copy can become difficult to read.
The First Impression of Text
As the reader opens up the email, they are instantly determining the effort that it will take to read the message. They look at the overall layout of the message, the density of the text, and how the message has been put together. If the text appears to be a solid wall of heavy paragraphs, then immediately the subscriber’s brain determines that there is a lot of cognitive friction involved in reading the message, and this is not something that the reader wants to do. The reader immediately turns to other messages in their inbox.
So, how do you fix that?
Good typography is easy to read. Simple letterforms with generous line spacing and adequate margins create good reading experiences. This respect for the reader’s time is fundamental to how you organize content in your emails.
Looking at real-world email examples will help you see how successful senders have used layout to earn more interaction. Studying their approach to text hierarchy and readable structure can guide the same choices in your own emails.
Choosing the Right Typefaces for Screen Readability
Fonts are made differently. Some are suited better for printed materials. These can include the fine detail of serif fonts, for example. On screens with low resolution and made of pixels (in order to display images as well), it is not possible to make such detailed fonts. Therefore, most mail and websites use so-called web fonts.
These are known as system fonts, or web-safe fonts, and they are the safest choice when sending correspondence via digital means. The emails will display consistently in the majority of email clients, on desktops and mobile devices, and the recipient’s ability to read the correspondence will not be compromised by the choice of font.
Custom web fonts can also fail to load in certain email clients. When that happens, some clients automatically fall back to system fonts, which can undermine your design and leave readers straining over small, cramped text.
They are great for the body copy of your email; however, there are some fantastic serif fonts for headings, provided that you are going to use a large enough size for the heading. This way, you can get the fantastic lines and Venetian feel of a serif font to enhance the heading of your email, while keeping the body copy of your email a clean, simple, readable sans serif font.
Hierarchy and Contrast Guide the Eye
Readers do not read emails in a linear fashion from top to bottom. Readers tend to scan information and, based on the anchors of information, look to read more in depth on the information that will provide the greatest amount of value.
Creating a clear visual hierarchy satisfies this scanning behavior. Hierarchy is built using three primary tools:
- Size: Primary headlines are the largest and are the first thing that grab the reader’s attention. Secondary headlines such as subtitles are slightly smaller than the primary headlines. The body copy is the smallest of the three.
- Weight: Using bold weight to create natural anchors and draw attention to key insights or important information. Note that bold weight should be used sparingly to avoid overwhelming the user.
- Color and Contrast: High contrast between text and background is required. Comfortable reading is achieved with dark gray text on a light background. However, it’s worth noting that black text on a white background can sometimes appear too harsh, especially when reading on a bright screen late at night. Conversely, light gray text on a white background fails accessibility tests for readable text.
Readers have very short attention spans when reading emails. If a person can read your email in about five seconds or less, then they will have grasped the main message of your email.
Line Length and Spacing Keep Readers Moving
However, even the best selection of font and hierarchy can fail when space between lines and between words is not given enough consideration. These two variables are referred to as line length and line height.
Line Length is also known as the Measure of the text. If the line length is too long, then the reader will have to travel too far across the line before returning to the start of the next line. This can cause fatigue. Conversely, if the line length is too short, then the reader will have to return to the start of the next line too quickly, and this will also cause eye fatigue. In desktop and mobile communications, it is best to aim for lines of text that are 50-70 characters in length.
Line height is the space between lines of text. This space is usually set by the editor by default. However, it is usually too tight for digital reading. It is recommended to set the line height to about 150% of the font size. This gives enough space between lines for comfortable reading.
Finally, there is the spacing between paragraphs. The same principle applies to paragraph indentation: skip it, and let white space do the separating instead. Short paragraphs with plenty of white space between them are the most effective way to create immediate relief for the reader’s eye as they read through the post.
Mobile First Considerations
Over 50% of all email opens now take place on mobile devices.
Small text sizes on mobile can be very frustrating as they cause users to have to pinch, zoom or even strain to read your emails. This is especially true when reading emails on public transport such as trains and buses.
It’s difficult to read small text on a mobile device. Typically, body text will never go below 16px. The headline will resize depending on the screen size to never take up the entire width of the screen. In some rare cases, the headline may even wrap to a single word. In those cases, it is desirable to ensure adequate padding between characters to allow for touch-accurate tapping. Touch-accurate tapping is typically achieved with a minimum of 6px of padding between characters.
Touch targets need to be considered when setting up typography. If a text link is in the body copy of an email or is a standalone call to action, there needs to be enough padding around the link so that the user can click on it with their thumb.
The Power of Restraint
The biggest mistake in using email typography is to try to do too much. Using too many different fonts, colors, and sizes can make for a very messy email.
Stick to the rule of using no more than two font families within an email: the headline font and the body copy font. Use the same font sizes and consistent margins in all of your emails in order to create a familiar visual experience for your readers.
Ultimately, typography in email should never be a distraction but rather serve as a gateway for readers to better grasp your message. Only by utilizing proper spacing and solid structures do your emails cease to be simple texts and transform into true reading experiences.