Email Typography Guidelines

This document provides detailed information on Fishbowl's email font and typography requirements, suggestions, and usage guidelines. If you require further feedback or assistance, please feel free to contact us.

What are email safe or web safe fonts?

Email-safe fonts are reader-friendly and visually consistent across email provider platforms. It is crucial to choose appropriate fonts for your emails to effectively convey your brand's tone and message.

Considering that people typically spend only 10 to 12 seconds reading or scanning a business email, typography plays a significant role in email design. Alongside a captivating subject line and visuals, font selection greatly impacts your email's effectiveness in attracting new clients and improving conversion rates.

To optimize your company emails and email marketing campaigns, opt for font styles and sizes that enhance your brand's image. Ensure that your email fonts align with your brand's design and tone, are visually appealing, easy to read, and entice readers to engage with your content. By prioritizing these factors, you can choose the best fonts for your emails.

The two primary font styles

The two main types of font to consider for your email content are serif and sans serif. Serif font designs include a small serif or tail at the end of each character. The most frequently used different fonts of this type are Times New Roman and Georgia. Sans-serif fonts do not have tails on their characters. The most common fonts of this type in use today are Arial and Helvetica.

10 email-safe fonts for major email providers:

• Arial
• Helvetica
• Times New Roman
• Georgia
• Tahoma
• Verdana
• Courier New
• Palatino
• Futura
• Calibra

Best font size for email

Choose an appropriate email font size that is neither too large nor too small. While there are no set standard recommendations for headline or body text sizes, aim for a range between 10 and 16 points. Extremely large fonts can overwhelm email content and appear distorted on certain platforms.

If your chosen font size is too small, recipients, including clients and potential customers, may skip reading your message. This can be problematic, particularly in transactional emails. To ensure quality and readability, send test emails to yourself before sending to a larger group. This is especially important for marketing campaigns or when sending a significant number of sales announcements. Through testing, you can determine the optimal font size for your emails.

Make your emails stand out

The font style and size you use greatly impact the success of your email marketing. Your customers' perception of your brand, products, and services is influenced by how they react to your email presentation. The quality of your message content can either boost or hinder your brand promotion.

To create impactful email marketing messages, use a clear and attractive font style and size, along with a streamlined color scheme and design. Companies of all sizes respond best to well-designed messages that are easy to read. Focus on these two tips to achieve greater success for your brand.

Fishbowl’s Google Font suggestions

Sans-Serif Fonts Open Sans Open Sans is a great choice for minimalist business designs. With a variety of different styles available, there is something for everyone. Use the "Light" style for a modern, stylish feel in your meeting minutes, or go all out and define key points with "Bold" or "Extrabold." Roboto Similar to Open Sans, Roboto is a very simple all-rounder. This clear, easy-to-read font style is perfect for the main text of your newsletter and still makes a change from the likes of Arial and Times New Roman. Because this is such a simple typeface, it is easy to pair with another, more unique font (e.g. your logo or typical brand font) without appearing to clash or be distracting. Montserrat Another highly popular Google font, Montserrat brings a bit more attitude to your design. This font choice would work extremely well as a CTA for your email newsletter. Noto Sans Noto Sans is an unmodulated (“sans serif”) design for texts in the Latin, Cyrillic, and Greek scripts, which is also suitable as the complementary choice for other script-specific Noto Sans fonts. It has italic styles, multiple weights and widths, and 3,741 glyphs.

Serif Fonts Playfair Display A slightly more interesting choice, Playfair Display is an elegant, serif typeface, well-suited to announcements, updates, or company news. Give this font a go in your shareholders' newsletter or your monthly round-up. Source Serif Pro Source Serif Pro is a serif typeface in the transitional style. It is available in six weights in upright styles and italics,[5] and five optical sizes.[6] It is also available as a variable font with continuous weights from 200 to 900. DM Serif Display DM Serif Display is a high-contrast transitional face. With delicate serifs and fine detailing, the design has been shaped for use in super-sized poster settings. It is accompanied by DM Serif Text, for use in smaller point ranges. Noto Serif Noto is a global font collection for writing in all modern and ancient languages. Noto Serif is a modulated (“serif”) design for texts in the Latin, Cyrillic and Greek scripts, also suitable as the complementary font for other script-specific Noto Serif fonts. It has italic styles, multiple weights and widths, and 3,256 glyphs.

Adding Google Fonts to your email messaging

Google Fonts is a free web font service. You can embed the fonts via an URL or download the web fonts if you’re mocking up designs on your local machine with design software. Google Font licenses allow you to use them in your emails. Below, we’ll talk more about how you can embed Google Fonts in your email with the <link> method.

It’s important to mention that, for whatever reason, most Google fonts (and other web fonts) won’t display in Gmail. Seems strange, right? It is what it is.

Now that we know where to find web fonts, let’s talk about three different ways to embed web fonts in your HTML email template:

• • • • • • • • @import
              • <link>
              • @font-face

We’ll dig into each of these below and why you might want to choose each method. In the following sections, we’ll talk about using web fonts in your emails and how to use a font stack to specify fallback fonts in case your web font doesn’t display in a particular email client. This is important because web fonts only work in a limited number of email clients.

How can I use the @import method to embed a web font?

The @import method defers the loading of the web font until your email’s HTML is fully loaded. In other words, your email will load first, and then your font will load after. This      means your font may take a bit longer to appear. Here’s what email client support loos like for the @import method:

To use the @import method, we’ll first obtain the @import code from the web font service. Then, we’ll embed the method in the head of our HTML email template.

We’ll use Google Fonts for this example, but the procedure is similar for other web font services. To use the @import method:

1. Navigate to your font on Google Fonts.
2. Next to your font, click +Select this style.
3. In the sidebar which pops up, click the radio button for @import, as shown below.
   
   
4. Select and copy the code.
5. Paste this code, including the <style> tags, in the <head> of your HTML template.

How can I use the <link> method to embed a web font?

The <link> method loads your web font inline as your email’s HTML code is read from top to bottom. In other words, your email might take longer to load if your web font file is very large. Here’s a look at email client support for using the <link> HTML element:

element” width=”640″ height=”400″ style=”vertical-align:middle; border:0; max-width:100%; height:auto;”>

To use the <link> method, we’ll first obtain the <link> code from the web font service. Then, we’ll embed the method in the head of our HTML email template.

We’ll use Google Fonts for this example, but the procedure is similar for other web font services. To use the <link> method:

1. Navigate to your font on Google Fonts.
2. Next to your font, click +Select this style.
3. In the sidebar which pops up, click the radio button for <link>, as shown below.
   
   
4. Select and copy the code
5. Paste this code in the <head> of your HTML template.

How can I use the @font-face method to embed a web font?

The @font-face method is the most bulletproof way to embed fonts, since it imports the web font directly from the source. This method also allows you to specify the format of your web font, like .eot, .woff, .woff2, .svg, and .ttf. The .woff and .woff2 formats have the best support when it comes to email. As you can see, the @font-face approach seems to be the most reliable method among email clients.

But Gmail. Yahoo Mail, AOL, and some version of Outlook are still, shall we say “unsupportive” of web fonts.

To use the @font-face method, we’ll first obtain the @font-face code from the web font service. Then, we’ll embed the method in the head of our HTML email template.

We’ll use Google Fonts for this example, but the procedure is similar for other web font services. The only difference is that it’s a bit harder to find the @font-face code for Google Fonts. Other web font services may supply you with this code directly. To use the @font-face method:

1. Navigate to your font on Google Fonts.
2. Next to your font, click +Select this style.
3. In the sidebar which pops up, click either radio button. Select the URL, as shown below.
   
   
4. Copy this URL and paste it into the search bar of your web browser. A web page will open, as shown below.
   
5. Scroll down and copy the code for /* latin */. For the example above, you’d copy the following code:
6. Paste this code in the <head> of your HTML template:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzIXKMny.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

 

How do I display web fonts in my emails?

Okay, now that you’ve embedded your web font using one of the three methods above, it’s pretty easy to use your web font in your email.

Simply use CSS inline or in your stylesheet to display the web font as you would any other normal font, as shown below:

font-family: 'Roboto';

So that’s it, right? Not quite. In the next section, we’ll talk about font stacks and how they’re crucial to using web fonts.

Why are font stacks important and how do I use them?

Since not all web fonts display properly across all email clients, we highly suggest that you use a font stack. This allows you to specify “back-up” fonts if your web font fails. This means that if your brand wants to use a particular font, you can do so in email clients that support web fonts. At the same time, you also ensure that you’ve specified the next-best options for email clients that do not display your chosen font. This way, you can select fonts with similar typefaces to your chosen font to preserve your visual brand identity.

For instance, here’s a modified version of the code above:

font-family: 'Roboto', Verdana, sans-serif;

First, we call the Roboto web font. If this font doesn’t work, the email client will try to use our fallback, Verdana, a web safe font. Finally, the email client will default to Sans Serif if all other fonts fail. These default fonts are important: choose them wisely so that they don’t disrupt your email design too much in case your primary web font fails.

Now, we’re ready to get cracking with web fonts!