Choosing the right font for your marketing campaign is a very important decision. The font has a direct impact on the look and feel of your email, helps set the tone, and ultimately affects how your leads interpret your message. This article will provide information on the importance of fonts in emails.
The following user roles can create emails:
- Marketing Managers
- Available Fonts
- Using Fonts
- Font Stacks
- Custom Fonts
- Ready to Learn More?
Technically, you can include any font into an email. However, if the recipient does not have that font installed, they are not going to see the email as you expect they would.
Since the late 90s, Mac and PC have had 18 commonly shared fonts that have been collectively called email-safe fonts. Generally, every email platform has these fonts installed so they are available when an email is rendered on the client's side. Although 18 fonts may seem limiting, there are ways to bring in custom fonts and set fallbacks to ensure your message is branded properly.
The 18 email-safe fonts are as follows:
|Arial Black||Arial Black, Gadget|
|Comic Sans MS||Comic San MS5|
|Courier New||Courier New|
|Lucida Sans Unicode||Lucida Grande|
|Palatino Linotype, Book Antiqua3||Palatino|
|Times New Roman||Times New Roman, Times|
|Trebuchet MS1||Trebuchet MS|
|Σψμβολ2 (Symbol)||Σψμβολ2 (Symbol)|
|Wingdings2 (Wingdings)||Zapf Dingbats2 (Zapf Dingbats)|
|MS Sans Serif4||Geneva|
|MS Serif4||New York6|
|Source: www.ampsoft.net – http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
1 Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems.
2 Symbolic fonts are only displayed in Internet Explorer, in other browsers a font substitute is used instead (although the Symbol font does work in Opera and the Webdings works in Safari).
3 Book Antiqua is almost exactly the same font that Palatino Linotype, Palatino Linotype is included in Windows 2000/XP while Book Antiqua was bundled with Windows 98.
4 These fonts are not TrueType fonts but bitmap fonts, so they won’t look well when using some font sizes (they are designed for 8, 10, 12, 14, 18 and 24 point sizes at 96 DPI).
5 These fonts work in Safari but only when using the normal font style, and not with bold or italic styles. Comic Sans MS works in bold but not in italic. Other Mac browsers seems to emulate properly the styles not provided by the font (thanks to Christian Fecteau for the tip).
6 These fonts are present in Mac OS X only if Classic is installed (thanks to Julian Gonggrijp for the corrections).
Fonts can be applied to an email in either the head style or the inline CSS. Style placed in the head can be applied to specific classes and IDs. When those IDs and classes are referenced in the email body, that style is rendered. Inline CSS is placed directly into the HTML element containing the text that should display in that style.
<style> in <head>
Applying style to the head is a simple way to broadcast a font across your entire email or a specific class. It works in all email platforms except Gmail (the ability to use the <style> tag in the <head> is not supported), so it is recommended to include inline styles to accommodate Gmail users.
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
In Table Cells
You can apply a font-family style to all of the text in a table cell by placing inline CSS in the TD tag of your HTML. Using this method will affect the entire content of that table cell, regardless of the amount.
In Text with <span>
Within your content, it is important to be able to control the style of a specific word or section of text. Using <span>, you are able to apply a style attribute to a single word or group of words.
You can declare any font you would like in an email. If the recipient has the font installed, the email will display as expected. However, if the recipient does not have the font available, a default font will be used in its place. Fortunately, you can prioritize a list of fallback fonts to display whenever the original font is not available.
<span style="font-family:'Architects Daughter',cursive,'Verdana','Helvetica';">Hello world!</span>
If there are any fonts that you absolutely must use, you can use the @import method in your CSS. However, there are some limitations to using @import, as it is not supported in all email clients. Most web-based browsers like Gmail, Outlook.com, and Aol.com do not allow it. However, it is supported by iOS devices, Apple Mail, and Thunderbird. Outlook itself has limited support for @import and in some cases, depending on the version, may not support it at all.