Fonts, Colors, and Styling in Email Templates
In my last post on the basics of email template layout, I covered the structure and different regions of email templates. In this post, we’ll talk about the font families, font sizes, colors, and styles.
The font you use in your emails should be the same or similar to the font you use on your website. Different computers come with different sets of fonts installed. If you’re using a custom font on your site, you may not be able to use the same font for your emails. Many email clients don’t allow importing custom fonts, so if you use a custom font in your email and someone opens it on a computer that doesn’t support custom fonts, it will default to a generic font. If a custom font is not available, this will impact spacing and text wrapping. For example, if a line of custom text doesn’t wrap, the generic font may add an extra line of text to the email.
|Lucida Grande||Times New Roman|
If you use different fonts for your headings and paragraph text on your website, do the same in your emails.
One of the keys to good design is consistency, so it’s important that the font sizes you use are consistent across your website and emails. For paragraph, or normal, text, use the same font size you use on your website. This is likely between 11 px and 16 px. In addition to paragraph text, you should have four larger types that correspond to heading types — H1, H2, H3, and H4. You heading sizes should change in relation to your paragraph font size. You may remember the golden ratio (approximately 1.6) from high school geometry. It’s often found in mathematics, art, nature, and web design, so it makes sense to use it in your email templates, too. The table below will help you find heading sizes that will work for your templates.
|11 px||18 px||28 px||45 px||72 px|
|12 px||19 px||31 px||49 px||78 px|
|13 px||21 px||33 px||53 px||85 px|
|14 px||22 px||36 px||57 px||91 px|
|15 px||24 px||38 px||61 px||98 px|
|16 px||26 px||41 px||65 px||105 px|
Even though the above table shows five different font sizes, you don’t have to go any larger than an H3 heading, since there will be a stark size difference between your H1 heading and paragraph text. If you need additional headings after H3, then you can move on to H2 and H1. Only use two or three font sizes in total. Likewise, you can scale down your paragraph text using the golden ratio for image captions or preheader text.
To be consistent, the color palette in your emails should match the color palette of your website. The areas in an email where colors matter are:
- Email background
- Content background
- Navigation bar
We covered how to select email and content background colors in the last post. If your emails have a white content background, use a black or dark gray text. As a reminder, avoid using “pure” black, and instead use an off-black.
Using color for links or buttons draws attention to them. Unless your website is entirely grayscale, incorporate the primary color on your website into your email templates. Colors are particularly effective when used sparingly, since they will pop against black and white. If you use too many colors, on the other hand, your template will look busy and distract recipients from the primary areas you want to call attention to. Notice in the image below how much more prominent the button is in the template on the right.
Styling Buttons and Borders
The other style element from your site you should include in your templates is the border radius you use for your buttons. Your website uses one of two styles of buttons: rounded or square. If the buttons on your website use a small border radius — 2px, for example — use this for the buttons in your emails.
You may also choose to include a border around the email content area. While the content area must be rectangular, you can use a rounded border, if this is the styling you use on your site.
Below, you can see the visual distinction between round and square buttons.
Use these font, color, and styling tips in combination with our layout guide, and you’ll be well on your way to creating great looking email templates. In part three, I’ll continue our design series with a post on responsiveness, columns, and more, so stay tuned!
What type of fonts do you use in your emails? Let me know in the comments!