Email Kit


Great typography and a consistent type scale creates a clear hierarchy. Typography is a core structure of Email Kit.

Paul Sylling

Type Scale

Typography aligns to a baseline unit of 4. All line heights must be a value that is divisible by 4 to maintain the grid. To make things easy, Email Kit includes a default type scale that adheres to a uniform scale of font sizes and line heights.

Name Class Properties
Headline 1 headline-one Font size: 32px
Line height: 40px
Font weight: 500
Headline 2 headline-two Font size: 24px
Line height: 32px
Font weight: 400
Headline 3 headline-three Font size: 20px
Line height: 24px
Font weight: 400
Heading heading Font size: 16px
Line height: 24px
Font weight: 500
Subheading subheading Font size: 12px
Line height: 16px
Font weight: 700
Text transform: Uppercase
Body body Font size: 14px
Line height: 20px
Font weight: 400
Caption caption Font size: 12px
Line height: 16px
Font weight: 400
Button button Font size: 14px
Line height: 20px
Font weight: 700
Table Heading table-heading Font size: 12px
Font weight: 700
Text transform: Uppercase
The Email Kit type scale.

Type Styles

Utility classes to change the style and weight.

Name Class Properties
Bold text-bold Font weight: 700
Italic text-italic Font style: Italic
Uppercase text-uppercase Text transform: Uppercase
Underline text-underline Text decoration: Underline
Primarily used within body copy.


You want to make sure your beautifully designed email can actually be read by your audience. The proper style and sizing is one of the most important considerations when making your email accessible.

Considerations for accessibility:

  • The text of your email should be actual text rather than embedding it as part of an image or graphic.
  • Maintain a high contrast ratio with your background color.
  • Use a font size of 14 to 16 for your body copy and limit anything lower than 12 when possible.


While the base font size of 14px is fine for your desktop audience, it might be difficult to read on mobile devices. By using media queries, you can adjust to 16px when your email is viewed on a mobile device.

You can override other text classes in this CSS block in order to improve the readability on mobile devices.

Web Safe Fonts vs Web Fonts

Web safe fonts are a set of default fonts found on the majority of most operating systems and devices. You have the advantage of knowing they will work regardless of the device or operating system someone is viewing your email on.

Common web safe fonts include:

  • Arial
  • Verdana
  • Georgia
  • Times New Roman

Web fonts, on the other hand, are not part of the default fonts found on most operating systems and devices. Instead they must be served through the use of a @import, <link> or @font-face.

Although web fonts don’t have universal support, they are supported by some of the top clients like Apple Mail, iOS Mail, Google Android and Samsung Mail. If you do choose to use a web font, make sure to include a suitable web safe fallback option.

What if there was a better option to have great looking fonts which don’t require being downloaded? Keep reading to find out.

The System Font Stack

System fonts bring together the best of both worlds and are now the default in Email Kit. They are free, look great and best of all, don’t require to be downloaded by the client.

Are you just learning about this now? System fonts are being rapidly adopted in favor of traditional web safe fonts like Arial and web fonts such as Open Sans due to their beauty, speed and compatibility.

However, because you are defining fonts that need to include all the different operating systems, you’ll end up adding a few more fonts than normal to the .font-family property.

System fonts are the default in Email Kit.

Web Font Usage

Still want to use web fonts? There are three common ways to include web fonts in your email.

Add the import in the head section of your email within the style tag.
Add the link in the head section of your email.
Add the font-face in the head section of your email within the style tag.

Best Practices

Follow these best practices when choosing typography to create emails that are easy to read.

  • Select simple and easy to read fonts.
  • Use a limited number of fonts and sizes.
  • Avoid using all capital letters if possible. It’s just annoying.
  • Use centered text sparingly. Left-aligned is much easier for your reader.
  • Pay close attention to white space around your text in order to attract attention to the your copy.
  • Make use of headings to logically structure your content.

Frequently Asked Questions

Answers to common questions about typography in Email Kit.

Should I combine serif and sans-serif fonts?

As long as you keep the total number of fonts to a minimum, try using a serif for the headline and a sans-serif for the body or vice-versa.

Should I use a web-safe font or a web-font?

While web-safe fonts are ultimately the safer option, there is no reason not to use web-fonts if they support your overall brand and identity. Keep in mind though that using system fonts such as -apple-system and Roboto will match the user experience someone already has on their native device.

What is the most readable font?

Although there is no general agreement on what is the most readable or appropriate font to use, sticking with a common system font that is available on most modern operating systems is always a safe choice.