Improve your email typography with these simple steps

From many questions and comments I’ve seen from designers, email design can be tricky. 

It’s an oft-unlooked part of design education that has its own rules and best-practices you end up having to learn through experience. 

So I wanted to show you an email design redo and the thought process behind each decision to help you create your future email designs. 

Some key things to keep in mind when designing an email: 

1. Make it mobile-friendly - that means larger text, no more than 2 columns, images that aren’t too short (or too tall)

2. Make it skim-able - keep paragraphs short, use font size and bold words for strong hierarchy and to guide the reader's eye

3. Make links obvious - use at least 2 types of contrast for links such as bold and underline or underline and a color change. Also remember that typing out urls isn’t necessary - change link/button text to be a call to action instead, such as Start Your Journey or Learn More rather than the actual URL.

The best way to learn is through experience. So let’s jump right in! 

This specific example focuses on text layout in the body of the email. 

Before

There are some issues in the design and layout of the body copy here that will effect the email's readability.

1. Font size is too small for mobile. For email, I use a font size that's much larger than I would use in print to make it easier to read on all screen sizes.

2. Not enough leading and paragraph spacing. See above. We need extra breathing room to read easily on a digital screen.

3. Unclear direction in the bold phrases. Why are some phrases bold when they're unimportant? Bold should be used for emphasis and to guide the reader's eye as they skim through the most important parts of the message.

4. The icons are too small to make the impact they could potentially have.

Fortunately, these are easily solved!

The Process

Step 1: Legibility 

• Increasing the font size to make it more legible on small phones

• Increasing the leading - I make it much higher for email than in print design

• Increasing and adjusting the paragraph spacing to accommodate the extra line-height

Step 2: Meaning

• Removing unnecessary bold phrases such as the "Dear" line which had no significance to deserve the reader's extra attention

• Adding helpful bold phrases to make it easy for readers to skim the main points of the email without reading every word

Step 3: Icons

• Making the icons larger for greater impact and skimming - now you can know what items they're distributing without reading every word

• Adding a Call to Action right after people read the list of bare necessities that people are lacking and are feeling moved to help them

And behold!

The Before and After you've been waiting for:

Which email would you rather read?

Which email do you think will get better results?