best font for email

Everything You Need to Know About Email Fonts


By Jay Oram

Fonts are an essential part of any design, whether it’s print, web, or in our case, email. Whether you’re designing or developing emails, everyone needs to understand what is possible with fonts and what isn’t. Otherwise, you could be facing the worst-case scenario: Your email—which you spent hours crafting—is unreadable.

Let’s look at the basics of fonts in email and progressively enhance our email designs where we can.

email fonts

In this post, I’m going to talk about the basics of email fonts and designing with brand guidelines in mind, making sure to find the best web safe font that will work in every client. Then, I’ll walk through how to progressively enhance your font skills by:

Before we jump in, I want to make an important point: Images are not the answer to your font problems.

Have a quick search online as to why all-image emails are bad. For one, they hurt your deliverability. You can also look at the forums and the #emailgeeks community to see the lengths we take to make sure we use semantic markup and text in emails. So, let’s agree that we need fonts and web text in email.

Now, let’s get started!

Introducing Email Fonts

Font blocks

A font is how a letter or string of letters is displayed. There is a huge number of fonts to choose from, including more than 130,000 on myfonts.com. We’ll take a look at the components of a font and how you can add attributes to style a font.

Serif vs. Sans-Serif

There are two main types of fonts:

  • Serif; or as I like to remember it, the fonts with curly bits
  • Sans-serif; without curly bits.

Different designs lend themselves to different font styles.

x-height

The x-height is defined as the height of the letter ‘x’ in a font. This is helpful when choosing fonts that look similar. By choosing a group of fonts with similar x-height, you can ensure a good design experience across email clients.

font-size

This is how large a font appears in your design.

Email font-size can be defined with pixels (px), points (pt), percentage (%), viewport width (vw) em and relative em (rem). Pixels are the most common font-size measurement and most email clients support this unit. However, it is worth experimenting with vw and em – both have large support amongst email clients. W3Schools has more detailed information on font sizes.

line-height

Some email clients (Outlook) require you to set the line-height to display the font as designed. You can set line height using any of the same units used for font size, but it is generally larger than font size. As a rule of thumb, I add six to the font-size (in pixels) to get the line-height, e.g. font-size: 14px; line-height: 20px;

letter-spacing

This is the amount of space between each l e t t e r. Traditional typographers referred to this as kerning. You can define letter-spacing with the same units as font-size and line-height. Additional spacing can make some fonts more legible or draw attention to a certain part of the email.

font-weight

Font-weight defines the thickness of your letters.

You can define font-weight with a number or a keyword. Font-weight can be normal , bold , bolder , lighter or set at a number in 100 intervals: 100 200 300 400 (standard) 500 600 700 (bold) 800 900. It’s important to remember that you must import or link each of these number weights for your font. Otherwise, the client will choose the closest number and, in the case of web-safe fonts, many only have 400 (normal) or 700 (bold). Check out the full range of font-weights in a live example.

Font weights

font-style

Font-style is the presentation or style of the text. This can be: normal, italic, oblique.

text-transform

Using text-transform in your style will determine how the letters look.

  • lowercase sets all letters in lowercase (no capital letters)
  • uppercase will make all letters UPPERCASE
  • capitalize Will Add A Capital Or Uppercase Letter To The Start Of Every Word, But Not Immediately After A Number (For Example, ‘4th’ July).

font-variant

With font-variant, you can add small-caps to a style to capitalize all letters but at the smaller, lowercase height.

font variant with small capital letters
Font-variant with small capital letters

Font Color

Choosing the correct font will help set your branding, but color will help your message stand out and be unique.

When choosing the color of your font, make sure the contrast is high enough with the background color, so it is easy to read. The Web Content Accessibility Group (WCAG) have set up guidelines for contrast ratios to ensure your email (or website) is accessible and readable for users with visual impairments. You can learn more about color contrast and email accessibility in this article.

There are several online tools you can use to check your font contrast, including the WebAim: Color Contrast Checker. Email on Acid’s Campaign Precheck accessibility check also includes a color contrast check as well as a tool to show you what your email looks like with different color deficiencies (color blindness).

If you’re using fonts on background images, don’t forget to include a thoughtful fallback background color. Although there are few email clients that cannot show background images, the image may take longer to load and you don’t want the user to miss out on the message.

Font color contrast

Tip: Black (#000000) on White (#FFFFFF) is quite harsh, but by changing the Black to #000001 it will make a softer color combination that is easier to look at.

Web Fonts in Email

Selecting a web-safe font that is already loaded onto a recipient’s device or computer will ensure your email looks exactly like your original design. It’s also the safest way to ensure your email will look as intended to the widest audience possible.

Check out CSS font stack for stats on the percentage of users with a given font on their machine.

If you are looking for a sans-serif font that has almost 100% client share, whether Mac or Windows, Arial, Verdana or Tahoma are safe fonts. Helvetica is on 100% of Apple devices.

If you are looking for serif fonts that have almost 100% client share, whether Mac or Windows, Times New Roman and Georgia are safe fonts.

Font Stacks in Email

Using a specific font within your email is like setting any style throughout the message. You can specify the font in the head of the email or as an inline style by declaring the CSS attribute font-family and following it in order of preference with your font choices.

A sans-serif inline style font-stack could look like:

style=”font-family: Helvetica, Arial, sans-serif;”

Font stack

In this case, if a user opened the email on an Apple device, he or she would see the text in Helvetica, whereas a Windows user, who does not have Helvetica, would see Arial. If Helvetica and Arial were not available on the client, the user would see whichever sans-serif font was available on his or her device.

Custom Fonts in Email

If your brand must use a font that isn’t web-safe, there are still ways to include them in your email marketing. This may happen if your brand has a commissioned font or has found a font that fits the brand guidelines perfectly but isn’t web-safe.

Web fonts are now widely supported by 50% of top email clients. As is the case with all email development though, you should consider your specific audience. The clients that support importing fonts into your email are:

  • Apple Mail
  • iOS Mail
  • Samsung Mail
  • Outlook.com

Finding web fonts is as easy as a quick online search. Some you will need to purchase, others are free. It’s important to check the license on any fonts you use, as some are limited to websites only and some cost more to host on your own servers. Here are some recommended sites:

Using Web Fonts

<link>

One of the easiest ways to import a font is to use <link>. By adding this line of code (below) in the head of your email, you can use the font throughout your email.

<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">

To use the <link> method, find the hosted link to the web font and place it in the href=””. Bear in mind that the link is loaded inline with the HTML, and by placing this in the head of your email a large font file may slow down the email load time.

If you use fonts.google.com within the link you can load different font-styles and weights. Once you select the font, you can ‘customize’ the link to include everything you need. For example:

customize google font stack

<link href="https://fonts.googleapis.com/css?family=Sarabun:100,200,300,400,500,600,700,800" rel="stylesheet">

To use the font inline in your html, you can use the following code. In this case the font family is ‘Lora’ and is a serif font. Therefore, the font-stack could be:

<td style=”font-family: ‘Lora’, Georgia, Times New Roman, serif;”>Lorem ipsum dolor sit amet</td>

@font-face

The most reliable way to include a specific font into your email is with @font-face. This method has the most email client support.

To include a font using @font-face you will need to find certain formats of a web font. Web fonts are stored in .svg, .eot, .ttf, .woff and .woff2. For email you will need to find the link to the .woff and .woff2 versions, as these have the most support across clients. Including fonts in this way means you can specify all the attributes. Check out the code below:

<style type="text/css">
@font-face {
  font-family: 'Timmana';
  font-style: normal;
  font-weight: 400;
  src: local('Timmana'), url(https://fonts.gstatic.com/s/timmana/v3/6xKvdShfL9yK-rvpOmzRKV4KQOI.woff2) format('woff2');
}
</style>

If we break down the above:

<style> tags to enclose the @font-face.

font-family: ‘Timmana’; The name of the font to include in the font-stack.

font-style: normal; the style the font should be in the text.

font-weight: 400; The weight of the font to be used for the text.

src: url(https://fonts.gstatic.com/s/timmana/v3/6xKvdShfL9yK-rvpOmzRKV4KQOI.woff2)  the font location.

format (‘woff2’); The format of the font.

To use the imported font in your font-stack, you can include the name in the font-family attribute inline e.g. style=”font-family: ‘Timmana’, Helvetica, Arial, sans-serif;”

To find the .woff and .woff2 format of Google fonts, copy the href within the <link> and paste it directly into Google Chrome (for woff2) and Safari (for woff).

Thanks to Elliot Ross for the insight to find the .woff and .woff2 formats.

Web Fonts in Gmail

One big player that doesn’t support web fonts is Gmail. However, Gmail renders two of its own fonts, Open Sans and Roboto, so adding these to your font-stack will ensure they are shown in your emails. For example:

style=”font-family: ‘Timmana’, Roboto, Helvetica, Arial, san-serif;”

If neither is in the font-stack, then Gmail tends to render Roboto as the fallback font.

Web Fonts in Outlook 2007/10/13

As usual, Outlook 2007/10/13 don’t play ball and don’t support @font-face or <link>. Also, when you include a special web font in the font-family it will revert to Times New Roman, whether you have specified a fallback or not.

To get around this problem when using the <link> method, wrap the <link> in a mso conditional comment to hide it from Outlook:

<!--[if !mso]><!-- -->
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<!--<![endif]-->

When using the @font-face method of importing fonts, ensure you wrap it in @media{}:

<style>
     @media {
     @font-face {
  font-family: 'Timmana';
  font-style: normal;
  font-weight: 400;
  src: local('Timmana'), url(https://fonts.gstatic.com/s/timmana/v3/6xKvdShfL9yK-rvpOmzRKV4KQOI.woff2) format('woff2');
     }
    }
</style>

An older fix was to use a mso conditional Outlook comment to show a fallback font. For example:

<!--[if mso]>
<style type="text/css">
.fallback {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->

Then, add a class to all appearances of text: <td style=”font-family: ‘Timmana’, Helvetica, Arial, san-serif;” class=”fallbackfont”> This is still valid and works if already in place in an email template.

Advanced Techniques for Fonts in Email

By using all the methods above, you can now have an imported, hosted font that will fallback gracefully to a specific font in Gmail and Outlook. And, using the attributes at the start of this post, you can control further how a font looks. But we can take it to another level.

Mobile-specific font-size

To add a mobile-specific font-size to your email text, use a media query to set the font-size at a certain screen size. A responsive “fluid” way to do this is to use the viewport-width unit (vw) instead of pixels.

Viewport-width uses 1% of the viewport width as the standard size from which to work from. For example, the viewport-width of an iPhone7 is 750px, therefore 1vw is 7.5px. In this case, we set font-size: 2vw to get 15px font-size. This is responsive to screen size; as a viewport gets bigger or smaller the font will be responsive.

Along with font-size, we need to also adjust the line-height to ensure it is consistent. Experimenting with the number here can give different outcomes, and in the case above, line-height:3vw is enough to ensure the text isn’t squished.

To ensure the font doesn’t become too big, we add it to a class within a media query that will only work on a smaller viewport size. To ensure the font-size in our media query displays, we include !important to override the inline font style. Check out the example code below:

<style type="text/css">
@media screen and (max-device-width:640px), screen and (max-width:640px) {
.mobfont {
font-size: 2vw!important;
line-height: 3vw!important;
}
}
</style>

Then, we add the class mobfont to any text we want to resize:

<td style=”font-family: ‘Timmana’, Helvetica, Arial, san-serif;” class=”mobfont”>Responsive Text</td>

Color Gradient Text Effect

Add some color to your text by adding a CSS gradient. By using the -webkit-linear-gradient -webkit-background-clip: text; and -webkit-text-fill-color: transparent; css attributes we can add a linear gradient to our text. Wrapping the class .gradient in a webkit media query ensures it only shows on supported devices.

<style>
@media only screen and (-webkit-min-device-pixel-ratio:0), (min--moz-device-pixel-ratio:0) {  .gradient {
background:
-webkit-linear-gradient(#e0c29e, #a98c70, #e4c8a3, #fcdeb4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;                                                     }
}
</style>
Gradient font
Gradient font effect

Animated Fonts

animated web fonts

We can enhance our fonts further using CSS animation. For more on CSS animation, check out this excellent guide to CSS animation.

Below I will share how I added rotation to a string of letters that works across webkit, but the font looks normal on clients that don’t support the animation.

Setting up the animation using @keyframes, we set the animation to happen at 50% (halfway) and use -webkit-transform: rotate(-180deg); We then use a class .txtupsidedown and set more animation attributes, such as the animation-name animation-duration animation-iteration-count and use display: inline-block to ensure the text stays inline. Check out the live result with some other animations.

<style>
@keyframes upsidedown {
     50% {
     -webkit-transform: rotate(-180deg);
     }
          }

.txtupsidedown {
          animation-name: upsidedown;
          animation-duration: 5s;
          animation-iteration-count: infinite;
          display: inline-block;
     }

</style>

To add this animation to a letter in your text, wrap it in a span with the following class name:

<span class="txtupsidedown">A</span>

Final Thoughts

It is now easier than ever to include brand fonts, style them with CSS, and create a responsive design without reverting to using images in email. Hopefully, this has inspired you to get out there and have a go at including some web fonts in your emails!

About the author

Jay OramJay Oram is part of the design and code solutions team at the email specialist agency, ActionRocket. In his role at ActionRocket, Jay is usually experimenting with new code for emails or finding that elusive rendering fix. See more articles from Jay at emaildesignreview.com or find him on Twitter at @emailjay_.

Fix email mistakes while you QA.

Save time and create more engaging emails. Email on Acid’s Campaign Precheck allows you to find and fix email problems mid-workflow, so you can streamline your email QA and testing. Take advantage of our accessibility check, preheader preview, URL validation and image validation. Try it free for seven days!

Start for Free

Author: Melanie Graham

Born and raised in New England, Melanie has a background as a writer, editor and journalist. After roaming the U.S. as an expert vagabond, she’s landed in Denver as Email on Acid’s content manager. She’s a music nerd at heart who loves spending time at the piano.

3 thoughts on “Everything You Need to Know About Email Fonts”

  1. While I agree with your position on all image emails, I feel you missed an important opportunity to state you case with additional documented research. Linking to one internal EOA deliverability post is simply not enough to influence your argument nor does it attempt to speak, in any leadership, to the audience of this blog. That said, your font techniques are mostly sound throughout the article. Thanks.

    1. Hi Eric –

      We’ll certainly let Jay respond, as well, but we appreciate your feedback and opinion. Yes, deliverability is a factor (we mention this in a few other blog articles, as well), but we should also be thinking about user experience and subscriber engagement. All very important pieces of the email marketing puzzle.

      A separate post on all-image emails may be a better place to expand on these ideas. Something I’ll be sure to pass on to our team.

      Thanks again for reading and sharing your feedback. Much appreciated!

    2. Hey – thanks for reading the blog!

      It was aimed at looking at fonts more specifically, so I steered it in that direction as it is quite a lengthy subject. An idea for a future post could be looking at the reasons live text performs better than all image emails.

      I can find more info & statistics but; spam scores are generally higher for all image emails & deliverability can be affected, which are both bad from an email sender point of view, but for recipients; accessibility, user experience, mobile rendering & clients blocking images are a start. I’ll chat to Melanie and the team to see if I can fit in a blog about all image emails and some more information.

      From Hubspot: https://blog.hubspot.com/customers/dont-send-image-only-email

      From Taxi for Email: http://taxiforemail.com/blog/all-image-emails-still-suck

      It looks like a subject that needs more investigation and information Eric!

Comments are closed.

Free Email Goodies