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.

Type Styles

Utility classes to change the style and weight.

Accessibility

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.

Responsive

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.

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.

Web Font Usage

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

Import

Link

Font-Face

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.