{"id":98,"date":"2017-11-03T04:55:04","date_gmt":"2017-11-03T04:55:04","guid":{"rendered":"https:\/\/xhtmlteam.com\/blog\/?p=98"},"modified":"2024-09-02T05:14:38","modified_gmt":"2024-09-02T05:14:38","slug":"list-email-safe-fonts-2017","status":"publish","type":"post","link":"https:\/\/www.xhtmlteam.com\/blog\/list-email-safe-fonts-2017\/","title":{"rendered":"List of email safe fonts 2017"},"content":{"rendered":"<p>When it comes to designing email templates, fonts play a crucial role in delivering the right message with a visually appealing look. However, unlike websites, emails are more restricted in terms of font usage due to email clients not always supporting custom fonts. This is where <strong>email safe fonts<\/strong> come into play.<\/p>\n<p>Email safe fonts are standard fonts that are widely supported across most email clients, ensuring your email&#8217;s typography remains consistent and readable. In this article, we will discuss why email safe fonts are important, which fonts to use, and how to ensure your email design remains intact across different platforms.<\/p>\n<h3>Why Email Safe Fonts<\/h3>\n<p>Emails are opened in a variety of clients such as Outlook, Gmail, Apple Mail, and Yahoo Mail. Each of these clients has different levels of support for custom fonts. If a font isn\u2019t supported, the email client will default to a substitute font that may not align with your design, which can affect readability and overall presentation.<\/p>\n<p>Using email safe fonts ensures:<\/p>\n<ul>\n<li><strong>Consistency:<\/strong> Your email looks consistent across different clients and devices.<\/li>\n<li><strong>Readability:<\/strong> The fonts are legible, making it easier for recipients to read your message.<\/li>\n<li><strong>Professionalism:<\/strong> A polished, well-formatted email enhances your brand\u2019s image and engagement.<\/li>\n<\/ul>\n<h4>The Best Email Safe Fonts to Use<\/h4>\n<p>Here\u2019s a list of widely supported email safe fonts that will work across almost all email clients:<\/p>\n<table cellspacing=\"0\">\n<colgroup>\n<col \/>\n<col class=\"bold\" \/> <\/colgroup>\n<tbody>\n<tr style=\"font-family: 'Serif', Arial, Helvetica, sans-serif;\">\n<td>Serif, <span class=\"mac\">Serif <\/span>, <em>Serif<\/em>, <strong>Serif<\/strong><\/td>\n<\/tr>\n<tr style=\"font-family: Arial Black, Gadget, 'sans-serif';\">\n<td>sans-serif, <span class=\"mac\">sans-serif<\/span>, <em>sans-serif<\/em>, <strong>sans-serif<\/strong><\/td>\n<\/tr>\n<tr style=\"font-family: 'Monogram ', Textile, cursive;\">\n<td>Monogram, <span class=\"mac\">Monogram <sup>5<\/sup><\/span>, <em>Monogram<\/em>, <strong>Monogram<\/strong><\/td>\n<\/tr>\n<tr style=\"font-family: 'Calligraphy', Courier, monospace;\">\n<td>Calligraphy , <span class=\"mac\">Calligraphy<\/span>, <em>Calligraphy<\/em>, <strong>Calligraphy<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Email-safe fonts include <strong>Arial, Georgia, Helvetica, Lucida, Tahoma, Times, Trebuchet, and Verdana<\/strong>.<\/p>\n<p>Here is the list of standard set of fonts common to all versions of Windows and Mac.<\/p>\n<table cellspacing=\"0\">\n<caption>Windows fonts \/ <span class=\"mac\">Mac fonts<\/span> \/ <em>Font family<\/em><\/caption>\n<colgroup>\n<col \/>\n<col class=\"bold\" \/> <\/colgroup>\n<tbody>\n<tr>\n<th style=\"width: 50%; text-align: center;\">Normal style<\/th>\n<\/tr>\n<tr style=\"font-family: Arial, Helvetica, sans-serif;\">\n<td>Arial, <span class=\"mac\">Arial, Helvetica<\/span>, <em>sans-serif<\/em><\/td>\n<\/tr>\n<tr style=\"font-family: 'Arial Black', Gadget, sans-serif;\">\n<td>Arial Black, <span class=\"mac\">Arial Black, Gadget<\/span>, <em>sans-serif<\/em><\/td>\n<\/tr>\n<tr style=\"font-family: 'Comic Sans MS', Textile, cursive;\">\n<td>Comic Sans MS, <span class=\"mac\">Comic Sans MS<sup>5<\/sup><\/span>, <em>cursive<\/em><\/td>\n<\/tr>\n<tr style=\"font-family: 'Courier New', Courier, monospace;\">\n<td>Courier New, <span class=\"mac\">Courier New<\/span>, <em>monospace<\/em><\/td>\n<\/tr>\n<tr style=\"font-family: Georgia, 'Times New Roman', Times, serif;\">\n<td>Georgia<sup>1<\/sup>, <span class=\"mac\">Georgia<\/span>, <em>serif<\/em><\/td>\n<\/tr>\n<tr style=\"font-family: Impact, Charcoal, sans-serif;\">\n<td>Impact, <span class=\"mac\">Impact<sup>5<\/sup>, Charcoal<sup>6<\/sup><\/span>, <em>sans-serif<\/em><\/td>\n<\/tr>\n<tr style=\"font-family: 'Lucida Console', Monaco, monospace;\">\n<td>Lucida Console, <span class=\"mac\">Monaco<sup>5<\/sup><\/span>, <em>monospace<\/em><\/td>\n<\/tr>\n<tr style=\"font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;\">\n<td>Lucida Sans Unicode, <span class=\"mac\">Lucida Grande<\/span>, <em>sans-serif<\/em><\/td>\n<\/tr>\n<tr style=\"font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;\">\n<td>Palatino Linotype, Book Antiqua<sup>3<\/sup>, <span class=\"mac\">Palatino<\/span>, <em>serif<\/em><\/td>\n<\/tr>\n<tr style=\"font-family: Tahoma, Geneva, sans-serif;\">\n<td>Tahoma, <span class=\"mac\">Geneva<\/span>, <em>sans-serif<\/em><\/td>\n<\/tr>\n<tr style=\"font-family: 'Times New Roman', Times, serif;\">\n<td>Times New Roman, <span class=\"mac\">Times New Roman, Times<\/span>, <em>serif<\/em><\/td>\n<\/tr>\n<tr style=\"font-family: 'Trebuchet MS', Helvetica, sans-serif;\">\n<td>Trebuchet MS<sup>1<\/sup>, <span class=\"mac\">Trebuchet MS<\/span>, <em>sans-serif<\/em><\/td>\n<\/tr>\n<tr style=\"font-family: Verdana, Geneva, sans-serif;\">\n<td>Verdana, <span class=\"mac\">Verdana, Geneva<\/span>, <em>sans-serif<\/em><\/td>\n<\/tr>\n<tr class=\"symbol\" style=\"font-family: Symbol;\">\n<td>Symbol, <span class=\"mac\">Symbol<\/span> <span style=\"font-family: Verdana; white-space: nowrap;\">(Symbol<sup>2<\/sup>, <span class=\"mac\">Symbol<sup>2<\/sup><\/span>)<\/span><\/td>\n<\/tr>\n<tr class=\"symbol\" style=\"font-family: Webdings;\">\n<td>Webdings, <span class=\"mac\">Webdings<\/span> <span style=\"font-family: Verdana; white-space: nowrap;\">(Webdings<sup>2<\/sup>, <span class=\"mac\">Webdings<sup>2<\/sup><\/span>)<\/span><\/td>\n<\/tr>\n<tr class=\"symbol\" style=\"font-family: Wingdings, 'Zapf Dingbats';\">\n<td>Wingdings,\u00a0<span class=\"mac\">Zapf\u00a0Dingbats<\/span> <span style=\"font-family: Verdana; white-space: nowrap;\">(Wingdings<sup>2<\/sup>,\u00a0<span class=\"mac\">Zapf\u00a0Dingbats<sup>2<\/sup><\/span>)<\/span><\/td>\n<\/tr>\n<tr style=\"font-family: 'MS Sans Serif', Geneva, sans-serif;\">\n<td>MS Sans Serif<sup>4<\/sup>, <span class=\"mac\">Geneva<\/span>, <em>sans-serif<\/em><\/td>\n<\/tr>\n<tr style=\"font-family: 'MS Serif', 'New York', serif;\">\n<td>MS Serif<sup>4<\/sup>, <span class=\"mac\">New York<sup>6<\/sup><\/span>, <em>serif<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h5><strong>1. Arial<\/strong><\/h5>\n<p>Arial is one of the most commonly used fonts across web and email design. It\u2019s a versatile, sans-serif font that is easy to read on any screen size.<\/p>\n<h5><strong>2. Times New Roman<\/strong><\/h5>\n<p>For a more traditional, serif look, Times New Roman is a classic option. It\u2019s often used for text-heavy emails or formal business communications.<\/p>\n<h5><strong>3. Helvetica<\/strong><\/h5>\n<p>Helvetica is another popular sans-serif font that is similar to Arial but offers a slightly more refined look. It\u2019s a clean, modern choice for emails.<\/p>\n<h5><strong>4. Georgia<\/strong><\/h5>\n<p>If you need a serif font that works well for both titles and body text, Georgia is a good option. It is elegant and widely supported across email clients.<\/p>\n<h5><strong>5. Tahoma<\/strong><\/h5>\n<p>Tahoma is a sans-serif font that is known for its excellent legibility, especially on smaller screens. It\u2019s a great option for mobile-friendly email designs.<\/p>\n<h5><strong>6. Verdana<\/strong><\/h5>\n<p>Verdana is designed specifically for screens, making it an ideal choice for email. It features wide letter spacing and is very easy to read, even at smaller font sizes.<\/p>\n<h3>Fallback Fonts and Font Stacks<\/h3>\n<p>Even when using email safe fonts, it\u2019s essential to define fallback fonts in your CSS. Fallback fonts ensure that if the primary font doesn\u2019t load, a similar alternative will be used instead. Here\u2019s an example of a font stack for email:<\/p>\n<pre class=\"brush:php\">font-family: Arial, Helvetica, sans-serif;\r\n<\/pre>\n<p>In this case, Arial is the primary font, and if it\u2019s not available, the email client will default to Helvetica or a generic sans-serif font.<\/p>\n<h3>Custom Fonts in Emails<\/h3>\n<p>While email safe fonts provide reliability, you may want to use custom fonts to align with your brand\u2019s identity. To do this, you can use web fonts such as <a title=\"Google Fonts\" href=\"https:\/\/fonts.google.com\" target=\"_blank\" rel=\"noopener\" rel=\"noopener noreferrer\">Google Fonts<\/a> or <a title=\"Adobe Fonts\" href=\"https:\/\/fonts.adobe.com\" target=\"_blank\" rel=\"noopener\" rel=\"noopener noreferrer\">Adobe Fonts<\/a>, but keep in mind that custom fonts are only supported by certain email clients, such as Apple Mail, iOS Mail, and some versions of Outlook for Mac.<\/p>\n<p>For example:<\/p>\n<pre class=\"brush:css\">@font-face {\r\n  font-family: 'YourCustomFont';\r\n  src: url('your-custom-font-url');\r\n}\r\n<\/pre>\n<p>Always define fallback fonts in your CSS so that clients who can\u2019t load the custom font will display the email in a safe font instead.<\/p>\n<h3>Conclusion<\/h3>\n<p>Using email safe fonts ensures that your emails look polished and professional across all email clients and devices. Fonts like Arial, Helvetica, Times New Roman, Georgia, Tahoma, and Verdana are reliable options that will help maintain design consistency and readability. If you want to experiment with custom fonts, ensure you have a fallback strategy in place to handle email clients that don\u2019t support them.<\/p>\n<p>When designing your next email campaign, use any font, and XHTMLTEAM will convert your <strong><a title=\"PSD to Email\" href=\"https:\/\/www.xhtmlteam.com\/psd-to-email.html\" target=\"_blank\" rel=\"noopener\" rel=\"noopener noreferrer\">PSD to Email<\/a><\/strong> designs into responsive email templates, ensuring your message looks great across all devices.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When it comes to designing email templates, fonts play a crucial role in delivering the right message with a visually appealing look. However, unlike websites, emails are more restricted in&hellip; <a class=\"read-more-link\" href=\"https:\/\/www.xhtmlteam.com\/blog\/list-email-safe-fonts-2017\/\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":300,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[20],"tags":[37],"class_list":["post-98","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-browser-safe-fonts","tag-browser-safe-fonts"],"acf":[],"aioseo_notices":[],"views":9019,"_links":{"self":[{"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/posts\/98","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/comments?post=98"}],"version-history":[{"count":0,"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/posts\/98\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/media\/300"}],"wp:attachment":[{"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/media?parent=98"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/categories?post=98"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xhtmlteam.com\/blog\/wp-json\/wp\/v2\/tags?post=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}