How to Use Email Typography That Speaks Volumes

When we think about creativity in email, we often consider imagery as the go-to solution for eye-catching designs, but there is also a way to get creative with copy, by leveraging typography.

Typography is the styling of the written content and includes things like the typeface, weight, size, color, or letter spacing.

Well-considered typography can be so impactful, that the need for imagery is reduced. Many brands today are grabbing subscriber attention and getting their message across with well-styled copy and few or no images.

Learn how you can make an impact, too, as I walk through:

Different typefaces
Creative ways to style fonts
Tips for typography in emails
Examples of email typography

What’s a typeface?

A typeface is the design of a set of characters including letters, numbers, punctuation marks, and symbols. There are a plethora of typefaces out there that can be used to style email copy. This can make it a little daunting, especially if you are not bound by brand guidelines. But there are some general guidelines you can follow to help with your selection.

Typeface classification

There are five basic classifications of typefaces: serif, sans serif, script, monospaced, and display.

examples of how serif, sans serif, monospaced, script, and display fonts look

Serif fonts are recognisable by the decorative stroke at the end of letters, also often described as feet.

Sans serif, meaning ‘without serif’ in French, has clean, precise ends to each letter.

Monospaced typefaces have characters that each occupy the same amount of horizontal space. Fonts that are not monospaced are variable-width fonts, with letters and spacings that are different widths.

Script, or cursive fonts, are often fluid, joined letters, similar to handwriting.

Display, or fantasy fonts, are decorative, creative typefaces, which are intended to be used in large format, or in logo design.

Serif and sans-serif are the most commonly used typefaces, especially for body copy. This is because they are most readable and therefore accessible. They render well when scaled down and at lower weights.

Script and display typefaces are often too complex for body copy. Meaning, they can be hard to read and even harder to scan. So they are usually reserved for headlines.

Monospaced typefaces are also less commonly used as body copy. Instead, they are favoured in technical resources for programming languages to distinguish code from natural-language.

Web typefaces

To use a typeface within an email, it needs to be a web font.

This is a digital typeface that can be called into your code. There are many free web fonts available as well as those that can be purchased. First, though, let’s look at the two types of digital font you can call into your email: web safe fonts and web fonts.

Web safe fonts

These are typefaces that are installed on most operating systems, meaning that calling these fonts into your email code will result in consistent rendering across email clients, devices and operating systems.

Here are the web safe fonts best supported across Windows and Mac devices:

web safe fonts best supported across Windows and Mac are Arial, Arial Black, Arial Narrow, Tahoma, Trebuchet MS, Verdana, Baskerville, Courier New, Georgia, Palatino, and Times New Roman — List devised using CSS Fonts and font availability on personal machine (Mac)

🔧 You can grab web safe CSS font stacks from CSS Fonts. Fonts stacks are a list of fonts starting with the primary typeface you would like to render followed by fall back fonts that will render if a subscriber doesn’t have your chosen font installed. For example:

font-family:’Helvetica Neue’,Helvetica,Arial,sans-serif;

Web fonts

These are typefaces that are not available on all operating systems.

Therefore, you need to add some extra code to your emails to put them to use. You must also ensure you have fallback web safe fonts in your font stack, as not all email clients will render web fonts.

There are many different places where you can find web fonts, such as Google Fonts which is a free resource and Adobe Fonts which requires a subscription.

For a comprehensive guide on web fonts check out our Ultimate Guide to Web Fonts.

Ideally, you shouldn’t use more than two font styles at a time. This is partly because it can become noisy and confusing if you apply too many, but it can also increase the load time of your email if you are calling in multiple web fonts.

Font styling

There are additional font styles we can design and code to help draw attention to words and sentences within our email. But how and when we use these is important as they can impact the readability and accessibility of our emails.

The Ultimate Guide to Email Accessibility

Discover the insights and step-by-step advice you need to write, design, and code emails that can be enjoyed by anyone—regardless of their ability.

GET YOUR GUIDE

Bold

Try to limit bolding text to a handful of words you would like to stand out amongst the rest of the copy in your email. This will ensure you don’t have multiple keywords fighting for attention.

bold text

Whilst bolding text can help sighted subscribers identify key information, it’s only through semantic coding that screen readers will pick up on the difference.

The bold tag isn’t semantic and will not emphasise your chosen word(s) to the screen reader user. So to echo the experience your sighted users are getting, always use the tag.

Be bold, be brave

Italic

Similar to bolding, italicizing words adds emphasis, albeit to a lesser extent.

italic text

Like with bolding, there are multiple ways to code italicized text. However, it’s the tag that is WCAG compliant (not the tag) and can give screen readers an indication of how something should be understood.

I love funny English words like gubbins and gnarly.

Strikethrough

Applying this styling can draw attention to a price reduction or information update.

strikethrough

However, it doesn’t render consistently across email clients.

The <strike> HTML tag is unsupported by Hey and only partially supported by Gmail apps. And tackling this style with CSS line-through also has limited support with some email clients rendering the line so thin, it’s quite hard to see.

It’s also worth noting that there is an accessibility issue with this style, as screen readers won’t emphasise a word with a strikethrough, which could negatively impact the experience of those reliant on assistive technology. Adding context before each amount, such as ‘was’ and ‘now’ will make this a valuable experience for everyone.

The best way to code a strikethrough is using the HTML <strike> tag, like so:

Was <strike>$200</strike>

Uppercase

Using uppercase can draw attention to keywords and show hierarchy. However, it can also be seen as shouting, so it is best to use sparingly.

Uppercase text

Another reason to go easy on the capitals is that it impacts readability. We are familiar with identifying words by their shape. The uniform rectangular shape of uppercase text slows us down and reduces scannability.

I would also recommend styling uppercase text using CSS styling, as writing in capitals could negatively impact screen readers. In some cases, a screen reader may increase volume when it encounters capitals, or it could read words out letter by letter as it is identifying them as acronyms.

CSS styling isn’t identified by screen readers, so it will treat uppercase text styled using CSS the same way that it would regular text.

We need to shout about this big win

Letter spacing

Adding letter spacing can bring a little extra character and identity to your fonts, and it can also make some font styles more readable.

letter spacing

For example, if you do need to apply some uppercase styling to your text, then adding a little letter spacing, too, can improve readability. However, it’s a fine balance, as too much letter spacing will harm readability.

For more information on the dos and don’ts of letter spacing check out this helpful post.

Support is good across email clients with just Outlook offering partial support. To add some letter spacing, you want to style using CSS:

A little letter spacing helps readability

Text alignment

There are a couple of out-and-out no-nos with text alignment.

Text alignment

First of all, justified styling: This will make text anchor to the left and right of its container. To achieve this, it adds unequal spacing between words, heavily impacting readability.

Right-aligned body text should only be used for languages that read right to left. It’s very unnatural for left-to-right languages to be read when right-aligned and will also negatively impact readability.

Center-aligned text should be reserved for headlines or short paragraphs of no more than 3 lines.

The optimum alignment is left aligned for left-to-right languages. This creates an anchor point to return to each time a line is read, and is a key consideration for accessible reading experiences.

To code text alignment you can use the HTML align attribute. However, this will also align any other elements you have within the cell. Using CSS on semantic tags, such as headers or paragraphs, is the most effective way to align your copy:

I am left aligned

Color

The thing to remember with color is contrast.

Contrast

When you select text colors, you need to ensure they are going to stand out against your background colors or background images. This will help make your content readable for subscribers with a range of 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.

Trailheads

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

Size

There isn’t really an upper limit to how big you style your text. However, you want to keep words on one line for them to be readable and not break your email.

Text sizes

There is a limit to how small text should be, though. 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. This allows primary content to dominate.

Line height

Good readability also relies on adequate space between each line of text. Too little, and it can be hard to follow a single line of text without your eyes straying to another line. Too much, and each line can feel like it’s independent from the next, making reading and scanning a challenge.

line-height

To achieve this, line heights should be 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.

Tips for using typography in email design

A lot can be achieved by styling written content. I’ll explain four ways you can effectively use typography in your emails to make an impact and guide readers.

Help subscribers identify your brand

First of all, you can apply brand fonts to help subscribers identify your brand when they open your email. Some fonts are very distinctive, even out of context. Think of Walt Disney and Coca-Cola.

Differentiate communication types

You can style different types of communication such as transactional emails and newsletters by using different font styles. This helps your audience quickly identify the type of communication they have received.

Elevate brand personality

Brand personality can also be elevated with creative typography, such as the use of display fonts in the hero area calling out key messaging.

Is your message coming across right?

Keep mistakes at bay—and ensure your emails make an impact. Preview in 100+ apps and devices, validate links and images, test accessibility, and more.

Make no mistake

Create hierarchy

One of the most useful things you can do with typography is to create hierarchy, helping to guide the reader through your email. So I’ll spend a bit more time here.

Today, the volume of emails received by most subscribers is substantial. To get through and digest all the messaging received just isn’t possible. Therefore, opened emails are often scanned as the reader searches for anchor points within your email to understand the value.

By leaning into font styles, sizes, weights, and colours, you can show which parts of your email are most important. Although I am not a believer in ‘the fold’, I do think it’s important to give subscribers the opportunity to understand the aim of the email, and take action without having to commit to reading lots of copy.

Let me break it down for you with this example:

email typography example showing the power of hierarchy

It uses big and bold typography in the hero area to draw attention to a headline that sums up the value or purpose of the email.

If clicks and conversions are the objective of your campaign, following up with a call to action can help the reader take the action without having to consume the whole email.

Then, add less dominant headlines that break up body copy so that this content can be easily scanned if the reader can’t commit to reading every word.

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.

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.

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 their brand identity to emails, using light and bold weights as well as uppercase letters to outline hierarchy and action areas.

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 likelihood of being mistaken as a marketing email.

Fonts used: Arial.

Big, bold typography highlights the overarching message of the email, whilst headlines styled to stand out against blocks of body copy break up content 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.

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:

<h1 style=”Helvetica Neue,Helvetica,sans-serif; font-size:50px; line-height:75px; color:#262524;”><img src=”hero.png” alt=”Image based hero messaging - there is a way!”></h1>

This approach makes the email scannable for subscribers reliant upon screen readers, as they are able to use shortcut functionality to navigate through headlines.

“Wrapping an image within a H1 tag is valid semantic code and will be included in screen reader headings shortcut menus. However, it is important to note that ALT text may not be read out by all text reading tools.” – Mark Robbins, Software Engineer, Salesforce

Email typography packs a punch

With the rapidly growing number of messages competing for your subscribers’ attention, the burden to stand out and still provide a reliable experience—fast—keeps getting heavier. Typography is a great way to make your emails beautiful, effective, and accessible without slowing you down.

Keep this guide in mind, and share how you use typography in your emails. I’d love to see them!

Create on-brand, error-free emails—with Litmus

No more broken emails. Build and test your emails with Litmus to ensure a great subscriber experience in every inbox.

Start your free trial

More Than Words: How to Use Email Typography That Speaks Volumes

What’s a typeface?

Typeface classification

Web typefaces

Web safe fonts

Web fonts

Font styling

Bold

Italic

Strikethrough

Uppercase

Letter spacing

Text alignment

Color

Size

Line height

Tips for using typography in email design

Help subscribers identify your brand

Differentiate communication types

Elevate brand personality

Create hierarchy

Brands getting creative with email typography

DAMP

Ready Mag

Blurb

Tripadvisor

Tattly

Email typography packs a punch

You might also like