Both of the html samples above will show: 

But the one with the styles in the head is much cleaner and easier to read and also has a smaller file size. If you use the styles in your head section and find some of them not translating in a certain email client, you can duplicate them inline in the specific place where you are seeing the issue. This is a good way to troubleshoot and identify an email clients that do not support a specific style in the head section.

Choose readable fonts

The best font for the job depends on where it lives in your email:

• Use serif and sans-serif for body copy. These typefaces are the most commonly used, especially for body copy, because they are the most readable and, therefore, accessible. They also render well when scaled down and at lower weights.
• Reserve script and display for headlines. These typefaces are often too complex for body copy because they can be hard to read and even harder to scan. 
• Differentiate technical content with monospaced typefaces. Monospaced typefaces are also less commonly used as body copy. Instead, they are favored in technical resources for programming languages to distinguish code from natural language.

Prioritize readability and accessibility

We briefly mentioned readability and accessibility in regards to typefaces, but there are more factors to consider when designing email typography that’s easiest for sighted subscribers to read and comprehend. Coding your email typography—not locking it away within an image—also ensures screen readers and subscribers with images turned off can fully enjoy your design. 

• Add a little letter spacing to uppercase and small typography. Uppercase and small text benefit from some breathing room between letters, but too much letter spacing harms readability. For more information on the dos and don’ts here, check out this helpful post on letter spacing.
• Use a line height that’s 1.5x or 2x your font size. Spacing between lines of text prevents copy from looking like a solid wall of words, but too much room between each line can feel like it’s independent from the next, making reading and scanning a challenge. We aim for line heights between 1.5 and 2 times the size of the text. For example, a font size of 20px should have a line height of 30-40px.
• Maintain a high font contrast. When you select text colors, make sure they’ll stand out against your background colors or images. This will help make your content readable for subscribers with vision impairments. The best way to find out whether you have a good contrast ratio is to test your colors in the WebAim contrast checker.
• Use bold, italic, and uppercase styling sparingly. Bold fonts, italic words, and uppercase headers all help copy stand out. But, there can be too much of a good thing. Use these typography styles mindfully to maintain readability. 
• Align text based on language and copy length. Right-aligned body text should only be used for languages that read right to left. Center-aligned text should be reserved for headlines or short paragraphs of no more than 3 lines. Use left-aligned for left-to-right languages to create a visual anchor point to return to each time a line is read.
• Use at least a 14px font size. There isn’t really an upper limit to how big you style your text, but there is a limit to how small text should be. Anything below 14px becomes hard for many people to read, and iOS Apple Mail’s automatic text adjustment feature will kick in and enlarge your text. At Litmus, we rarely stray below 18px. If we do, we limit it to tertiary information such as caveats, footnotes, and footer content.

Pro tip: for a deeper dive into creating, designing, and coding accessible content for email, check out the Salesforce Trailhead sessions we recorded with Mark Robbins, Software Engineer at Salesforce. 

Customize typography for your audience

There are general best practices for email typography, but you can also use email engagement metrics to learn what your audience likes. For example, you can try placing information in different spots within the content hierarchy to see which increases clicks. Or, you can play around with styling and take note of which typography increases read time. 

Of course, it’s always a good idea to check how your email renders across different devices to know what subscribers will see, and you can prioritize testing for the devices and email providers your subscribers use most. 

Brands getting creative with email typography

Now for some examples of brands with great use of typography in their email designs. What makes them stand out and draw readers in?

DAMP

DAMP, a newsletter highlighting winemakers and retailers that focus on making and selling natural wines, leans heavily into typography, working with serif and sans-serif fonts to lay out the hierarchy of content.

Source: Really Good Emails

Fonts used: Helvetica neue with Arial fallback, and serif system font Times New Roman.

The hero area displays the only image in this long form newsletter, with bold typography setting the tone for the email on open. This email design trend of bold typography makes a statement. It’s no wonder so many brands have adopted this style.

What is really interesting about this email, is that they achieve this modern and clean style using system fonts rather than web fonts—meaning that the fonts will render similarly across all email clients.

Ready Mag

Ready Mag, an in-browser graphics editor, also leans into system fonts, leading with Mac system fonts, followed by an array of Helveticas. This is probably beyond what is required of a font stack in email.

Source: Really Good Emails

Fonts used: Apple system fonts, falling back to Helvetica and Arial.

What I love about this email is how bold typography separates content. It makes the email easy to scan. And with minimal body copy, readers in a hurry can get the value of each section and take action quickly.

Blurb 

Self-publishing platform Blurb uses web fonts to bring its brand identity to emails, using light and bold weights as well as uppercase letters to outline hierarchy and action areas.

Source: Really Good Emails

Fonts used: Futura and Proxima Nova (web fonts), falling back to Helvetica and Arial.

It’s great to see the numbers–the ones that make up the steps–styled using live text rather than imagery. This creates a much smoother experience for subscribers reliant upon screen readers and also means that these will render when images are not loaded.

Tripadvisor

Like many brands, travel platform Tripadvisor sent out their COVID-19 messaging using a letter-style template. This is a more personal and direct way of communicating with customers, offering important information without the distraction of imagery, or the likelihood of being mistaken as a marketing email.

Source: Really Good Emails

Fonts used: Arial.

Big, bold typography highlights the overarching message of the email. At the same time, the headline stands out against blocks of body copy, breaking up content and providing anchor points for the reader to understand the value of a section.

This highly scannable email also has ample padding left and right of the main container, which is a great technique for preventing large blocks of copy from overwhelming the reader.

Tattly 

Temporary tattoo retailer Tattly has a very creative approach to email design, with promotional emails often leveraging exciting design techniques and trends. They use bold typography in the hero of this email to draw attention to the new products featured within the email.

Source: Really Good Emails

Fonts used: Open Sans (web font), falling back to Helvetica and Arial.

It is common with highly designed emails, such as this one, for typography to be image based, rather than live text.

There are a number of accessibility considerations that need to be made when using imagery for text, such as applying ALT text that echoes the copy, and taking into account what the text will look like for people who need to enlarge the email due to a visual impairment. Will the text pixelate and become unreadable? Also, how readable is image-based text when the email scales down on mobile devices?

Although live text is the best way to keep your emails accessible and readable, there is a way to make image based hero areas valuable to a wider audience, by wrapping your hero image in an H1 tag and adding the image text to your ALT tag, like this: