{"id":3754,"date":"2023-03-29T14:30:00","date_gmt":"2023-03-29T09:00:00","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=3754"},"modified":"2023-03-29T17:10:03","modified_gmt":"2023-03-29T11:40:03","slug":"significant-web-safe-fonts","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/","title":{"rendered":"Times v\/s Garamond: Significance of Web Safe Fonts in Emails"},"content":{"rendered":"\n

[This post was originally published on 15th June 2016. It has been updated on 29th March 2023.]<\/p>\n\n\n\n

In one of our earlier blogs, we talked about how there\u2019s no single \u201cApproved\u201d font out there, the significance of the simple fonts in body text and reserving the fancy fonts to the headings for attaining a sparkling email body copy.<\/p>\n\n\n\n

Web typography is improving by leaps and bounds with every passing day and yet at the same time email typography continues to be less than ideal, primarily constrained by email client support. However, email marketers are a tenacious bunch, and despite these limitations, they haven\u2019t allowed their creativity to be compromised. They have persisted with figuring out ways that would allow them to infuse spark and exuberance into their custom email marketing templates<\/a>, and one tool that has aided them greatly in this endeavor is web safe fonts for email.<\/p>\n\n\n\n

Web-Safe Fonts: Richness v\/s Compatibility<\/h2>\n\n\n\n

For the uninitiated, web safe or email safe fonts refer to those that have a high probability of being already installed across a vast array of users\u2019 devices. As a result, they are easily recognized by email clients and browsers.\u00a0<\/p>\n\n\n\n

\"Graph\"<\/figure><\/div>\n\n\n\n

The graph above shows the 3 choices of desired fonts in your email. @font-face in CSS, calls for the custom font stored on a web hosting site. Both premium and Google fonts can be served using the @font-face rule. As you can observe moving towards right the compatibility increases at cost of richness and vice versa.<\/p>\n\n\n

\"\"<\/a><\/div><\/div>\n\n\n\n

Choosing The Right Font Is Very Important.<\/strong><\/h2>\n\n\n\n

The ideal method is to use Web safe or Google fonts, considering their aspect ratio (explained below) with email safe fonts and thus allowing maximum email clients to cover richness with compatibility. At the same time, non-supporting email clients would still bring the fallback fonts without breaking the layout or template.<\/p>\n\n\n\n

Breaking on layout usually happens when you choose wider or larger fallback fonts.<\/em><\/p>\n\n\n\n

You can even use a good image text ratio by converting all titles or prominent one liners into images and then using fallback fonts for paragraph fonts. That would allow you to keep your fonts intact for important messages while allowing text render for others.<\/p>\n\n\n\n

Criteria For Choosing Appropriate Fallback Fonts<\/strong><\/h2>\n\n\n\n

Ever since email marketers have adopted HTML emails, the race to offer personalized content has begun. Email design and aesthetics became a priority. Imagine a scenario wherein your email has an optimum design with beautiful typography, but, due to lack of fallback support, the system font ruins the entire look. Sends a chill down your spine, doesn\u2019t it? <\/p>\n\n\n\n

In the 3 seconds that your prospective customer takes to read your email, they may delete or mark it as spam (gasp!). Ideal Characters per Line (CPL) is 75 and ideal email has a 600px width. Based on various factors the CPL changes and along with it the placements of words changes leading to the aforementioned chaos. In order to save yourself, stick to the following pointers while choosing your primary and fall-back fonts. Any reliable agency dabbling in email campaign management services<\/a> is sure to second these pointers.<\/p>\n\n\n\n

\"Fig:
Fig: Text with same font size and weight has different width which may cause improper text display.<\/figcaption><\/figure><\/div>\n\n\n\n

Maintain Aspect Ratio:<\/strong> Each character in your font has 2 values: X-width and Y-height. The values should change proportionally. High width and low height (or vice versa) fonts shall generate low readability. Moreover while choosing fall back font, ensure that x-width is same to the primary font in order to maintain CPL.<\/p>\n\n\n\n

\"Fig.
Fig: Times New Roman & Apple Garamond have the same height but different width which changes the aspect ratio.<\/figcaption><\/figure><\/div>\n\n\n\n

Character Spacing:<\/strong> CPL is also dependent on the space between two characters. Less space will look cramped up and excessive spacing shall generate eye strain to stay on the same sentence.<\/p>\n\n\n\n

\"Character<\/figure><\/div>\n\n\n\n

Line Spacing:<\/strong> It refers to the vertical spacing between characters on two consecutive lines. This is also dependent on the y-height.<\/p>\n\n\n\n

\"Vertical<\/figure><\/div>\n\n\n\n

Font Widths:<\/strong> Depending on the value of the font weight, the thickness of the font shall change the CPL. Never use condensed font weight.<\/p>\n\n\n\n

\"Fig.
Fig: 3 Different font weights of the same font (Lato) have different line width.<\/figcaption><\/figure><\/div>\n\n\n\n

Serif or Sans-Serif:<\/strong> Generate uniformity by providing serif fallback to primary serif font and vice-versa.<\/p>\n\n\n\n

\"Pixel
Pixel Width of different Sans-Serif Fonts<\/figcaption><\/figure><\/div>\n\n\n
\"\"<\/a><\/div><\/div>\n\n\n\n

Some Common Email safe and Web safe Fonts?<\/strong><\/h2>\n\n\n\n

Email marketers resort to using email safe and web safe fonts for email in their emails because it drastically reduces the likelihood of their email font being altered. So, which fonts are considered both email and web safe? Let\u2019s take a look.<\/p>\n\n\n\n

  • Arial <\/li>
  • Georgia<\/li>
  • Times New Roman<\/li>
  • Courier New<\/li>
  • Verdana<\/li>
  • Lucida Sans Unicode<\/li>
  • Trebuchet MS<\/li>
  • Tahoma<\/li><\/ul>\n\n\n\n

    The ideal course of action, irrespective of whether you are using email friendly fonts or not, is to always test your email, across multiple devices and environments, to ensure your emails are rendering as desired. <\/p>\n\n\n\n

    Takeaways:<\/h2>\n\n\n\n
    • Choose fonts that work best for your design for all email clients.<\/li>
    • To avoid the ire of spam filters, steer clear of using more than two different fonts in your email. You can always use different sizes of the same font to structure your copy and ensure high readability. <\/li>
    • If you come across an email safe font that is a close match to the font you intend to use, it is advisable to go ahead with the email safe font in favour of your original choice.<\/li>
    • First choose any web safe or Google Fonts and then match up those with appropriate fallback fonts, on the basis of its aspect ratio and character spacing.<\/li>
    • Avoid using Condensed fonts as no fall back fonts have condensed property.<\/li>
    • Myriad pro and Calibri have least support when it comes to rendering the same fonts in Apple Mail.<\/li>
    • @font-face is widely used compared to @import.<\/li><\/ul>\n\n\n\n

      Wrapping It Up<\/strong><\/h2>\n\n\n\n

      Making use of web safe fonts lets you actualize the user experience you envisioned for your subscribers at the outset. We hope the insights shared above will come to your aid when you sit down to design your future campaigns. <\/p>\n","protected":false},"excerpt":{"rendered":"

      Are you using web safe fonts in your email? This blog tells you why you should!<\/p>\n","protected":false},"author":1,"featured_media":3766,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[367,366],"class_list":["post-3754","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-marketing","tag-fonts-in-emails","tag-web-safe-fonts"],"yoast_head":"\nTimes v\/s Garamond - Significance of Web Safe Fonts in Emails<\/title>\n<meta name=\"description\" content=\"Ever wondered how the web safe fonts are selected such that the overall formatting of the email remains intact? Email Uplers enlighten the significance here.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Times v\/s Garamond - Significance of Web Safe Fonts in Emails\" \/>\n<meta property=\"og:description\" content=\"Ever wondered how the web safe fonts are selected such that the overall formatting of the email remains intact? Email Uplers enlighten the significance here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"Email Uplers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/email.uplers\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-29T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-29T11:40:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/06\/Times-vs-Garamond-Significance-of-Web-Safe-Fonts-in-Emails-Large-Size-copy_A-1-540x282.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"282\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kevin George\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:site\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin George\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/\",\"name\":\"Times v\/s Garamond - Significance of Web Safe Fonts in Emails\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/06\/Times-vs-Garamond-Significance-of-Web-Safe-Fonts-in-Emails-Large-Size-copy_A-1.jpg\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\"},\"description\":\"Ever wondered how the web safe fonts are selected such that the overall formatting of the email remains intact? Email Uplers enlighten the significance here.\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/06\/Times-vs-Garamond-Significance-of-Web-Safe-Fonts-in-Emails-Large-Size-copy_A-1.jpg\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/06\/Times-vs-Garamond-Significance-of-Web-Safe-Fonts-in-Emails-Large-Size-copy_A-1.jpg\",\"width\":\"1170\",\"height\":\"470\",\"caption\":\"Times-vs-Garamond\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Times v\/s Garamond: Significance of Web Safe Fonts in Emails\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\",\"url\":\"https:\/\/email.uplers.com\/blog\/\",\"name\":\"Email Uplers\",\"description\":\"Email Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/email.uplers.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\",\"name\":\"Kevin George\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"caption\":\"Kevin George\"},\"description\":\"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/kevin-george-email\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Times v\/s Garamond - Significance of Web Safe Fonts in Emails","description":"Ever wondered how the web safe fonts are selected such that the overall formatting of the email remains intact? Email Uplers enlighten the significance here.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/","og_locale":"en_US","og_type":"article","og_title":"Times v\/s Garamond - Significance of Web Safe Fonts in Emails","og_description":"Ever wondered how the web safe fonts are selected such that the overall formatting of the email remains intact? Email Uplers enlighten the significance here.","og_url":"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2023-03-29T09:00:00+00:00","article_modified_time":"2023-03-29T11:40:03+00:00","og_image":[{"width":540,"height":282,"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/06\/Times-vs-Garamond-Significance-of-Web-Safe-Fonts-in-Emails-Large-Size-copy_A-1-540x282.jpg","type":"image\/jpeg"}],"author":"Kevin George","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Kevin George","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/","url":"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/","name":"Times v\/s Garamond - Significance of Web Safe Fonts in Emails","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/06\/Times-vs-Garamond-Significance-of-Web-Safe-Fonts-in-Emails-Large-Size-copy_A-1.jpg","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa"},"description":"Ever wondered how the web safe fonts are selected such that the overall formatting of the email remains intact? Email Uplers enlighten the significance here.","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/06\/Times-vs-Garamond-Significance-of-Web-Safe-Fonts-in-Emails-Large-Size-copy_A-1.jpg","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/06\/Times-vs-Garamond-Significance-of-Web-Safe-Fonts-in-Emails-Large-Size-copy_A-1.jpg","width":"1170","height":"470","caption":"Times-vs-Garamond"},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/significant-web-safe-fonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Times v\/s Garamond: Significance of Web Safe Fonts in Emails"}]},{"@type":"WebSite","@id":"https:\/\/email.uplers.com\/blog\/#website","url":"https:\/\/email.uplers.com\/blog\/","name":"Email Uplers","description":"Email Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/email.uplers.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa","name":"Kevin George","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","caption":"Kevin George"},"description":"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/kevin-george-email\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/3754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=3754"}],"version-history":[{"count":19,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/3754\/revisions"}],"predecessor-version":[{"id":35827,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/3754\/revisions\/35827"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/3766"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=3754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=3754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=3754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}