{"id":509,"date":"2018-10-07T12:36:11","date_gmt":"2018-10-07T12:36:11","guid":{"rendered":"http:\/\/pauldipper.com\/?p=509"},"modified":"2018-10-07T12:36:11","modified_gmt":"2018-10-07T12:36:11","slug":"pick-a-font-any-font-just-not-comic-sans-by-paul-dipper","status":"publish","type":"post","link":"http:\/\/pauldipper.com\/?p=509","title":{"rendered":"Pick A Font, Any Font &#8211; Just Not Comic Sans <br>By Paul Dipper"},"content":{"rendered":"<h3 class=\"font_8\"><em>\u201cIf you were a web font, what web font would you be?\u201d<\/em><\/h3>\n<p class=\"font_8\">I was once asked a very similar question in a job interview, but that time it involved biscuits.<\/p>\n<p class=\"font_8\"><em>\u201cIf you were a biscuit, what biscuit would you be?\u201d<\/em>\u00a0 It\u2019s personal preference, and there is a wide choice of biscuits out there&#8230;and it\u2019s the same with fonts, with designers and developers enjoying an immensely varied selection of standard \u2018Web Safe Fonts\u2019 or the more daring \u2018Web Fonts\u2019.<\/p>\n<p class=\"font_8\">(And for those still wondering about my choice &#8211; it\u2019s the Bourbon biscuit, always the Bourbon.)<\/p>\n<p>&nbsp;<\/p>\n<h3 class=\"font_8\">Safety in letters<\/h3>\n<p class=\"font_8\"><strong>So what are the differences between Web Safe Fonts and Web Fonts?<\/strong><\/p>\n<h4 class=\"font_8\">Web Safe Fonts<\/h4>\n<p class=\"font_8\">These are the standard available system fonts found on everyone&#8217;s operating system. So it is &#8216;safe&#8217;\u00a0to assume it will render correctly across email clients and platforms.<\/p>\n<p class=\"font_8\">The most common Web Safe Fonts include:<\/p>\n<ul class=\"font_8\">\n<li>\n<p class=\"font_8\">Arial\/Arial Black<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Helvetica<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Times\/Times New Roman<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Courier\/Courier New<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Palatino<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Georgia<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Garamond<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Bookman<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Comic Sans<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Trebuchet<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Impact<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Verdana<\/p>\n<\/li>\n<\/ul>\n<p class=\"font_8\">Out of these Helvetica and Arial are the standard fonts of choice, whereas others are frowned upon&#8230;\u00a0<a href=\"http:\/\/www.bbc.co.uk\/news\/magazine-11582548\" target=\"_blank\" rel=\"noopener undefined\" data-content=\"http:\/\/www.bbc.co.uk\/news\/magazine-11582548\" data-type=\"external\">like Comic Sans<\/a>.<\/p>\n<p class=\"font_8\">Comic Sans was released with Windows 95, it had a bright start in life, and this was possibly it\u2019s downfall. \u201cHmm that Times New Roman header is just too serious, what can I use that\u2019s more fun and quirky\u2026 Comic Sans, it even sounds fun.\u201d The font was overused and wasn\u2019t a good font to start with. The character weight too heavy and poor kerning (the space between characters) made it a designers arch enemy.<\/p>\n<p>&nbsp;<\/p>\n<h3 class=\"font_8\">Web Fonts<\/h3>\n<p class=\"font_8\">These are licensed fonts, hosted and accessible either by purchase and download, or linked\/imported via a host site like Google Fonts. Although these web fonts provide you with a much wider choice of fonts, they don\u2019t yet all render 100% across all devices, so you should use them wisely.<\/p>\n<p class=\"font_8\">At present, a small range of email clients accept web fonts, including:<\/p>\n<ul class=\"font_8\">\n<li>\n<p class=\"font_8\">Android (default mail, not Gmail app)<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">AOL Mail<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Apple Mail<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">iOS Mail<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Outlook 2000<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Outlook.com app<\/p>\n<\/li>\n<li>\n<p class=\"font_8\">Thunderbird<\/p>\n<\/li>\n<\/ul>\n<p class=\"font_8\">However this small number does cover the majority of the\u00a0<a href=\"http:\/\/emailclientmarketshare.com\/\" target=\"_blank\" rel=\"noopener undefined\" data-content=\"http:\/\/emailclientmarketshare.com\/\" data-type=\"external\">top 10 email clients<\/a>\u00a0being used today.<\/p>\n<p class=\"font_8\">Google Fonts started up 7 years ago and provides fonts for free, but if none of the 800+ Font Families float your boat, you can always purchase fonts from numerous web font services, including:<\/p>\n<ul class=\"font_8\">\n<li>\n<p class=\"font_8\"><a href=\"http:\/\/myfonts.com\/\" target=\"_blank\" rel=\"noopener undefined\" data-content=\"http:\/\/myfonts.com\" data-type=\"external\">myfonts.com\u00a0<\/a><\/p>\n<\/li>\n<li>\n<p class=\"font_8\"><a href=\"http:\/\/fontspring.com\/\" target=\"_blank\" rel=\"noopener undefined\" data-content=\"http:\/\/Fontspring.com\" data-type=\"external\">Fontspring.com<\/a><\/p>\n<\/li>\n<li>\n<p class=\"font_8\"><a href=\"http:\/\/youworkforthem.com\/\" target=\"_blank\" rel=\"noopener undefined\" data-content=\"http:\/\/Youworkforthem.com\" data-type=\"external\">Youworkforthem.com<\/a><\/p>\n<\/li>\n<li>\n<p class=\"font_8\"><a href=\"http:\/\/fontshop.com\/\" target=\"_blank\" rel=\"noopener undefined\" data-content=\"http:\/\/fontshop.com\" data-type=\"external\">fontshop.com<\/a><\/p>\n<\/li>\n<\/ul>\n<p class=\"font_8\">Obviously hosting your own fonts is safer than relying upon a third party server. On the off chance that Google gets bored of providing free fonts and decides to stop the whole project, at least your \u201cGotham\u201d won\u2019t become \u201cGeorgia\u201d.<\/p>\n<p class=\"font_8\">Ideally web fonts should be an email designer\/developer&#8217;s preference, the varied choice and potential impact of a unique font could help boost opens and drive click through rates, and without sounding like a supermarket advert, every little helps.<\/p>\n<p>&nbsp;<\/p>\n<h3 class=\"font_8\">Web Safe or Not Web Safe? \u00a0That Is The Font Question&#8230;<\/h3>\n<p class=\"font_8\">The ability for your fonts to render properly in someone\u2019s inbox can actually have a big impact on your click through rates, and not always in a positive way, so your choice between web safe fonts and web fonts is sometimes more than just a style choice.<\/p>\n<p class=\"font_8\">For instance, you might think that \u2018Lato\u2019 font looks great in your new email newsletter, and when you see the ridiculously high click through rates of \u00a070-80% you think you\u2019re campaign has been a roaring successful. But when you look more closely, you discover that the majority of those clicks were people clicking a \u2018download font\u2019 link prompted by their device or browser because it doesn\u2019t have or support the \u2018Lato\u2019 font. \u00a0This \u2018download font\u2019 link has now completely skewed all your click through rates and reporting stats.<\/p>\n<p class=\"font_8\">So, think carefully before you choose a web font instead of a web safe one.<\/p>\n<p class=\"font_8\">Now that you\u2019ve made your font choice, let\u2019s get them coded into your email.<\/p>\n<p>&nbsp;<\/p>\n<h3 class=\"font_8\">Adding Web Safe Fonts To Your Emails<\/h3>\n<p class=\"font_8\">Looking at web safe fonts first, these would sit in the html as inline styles, like so:<br \/>\n(for this instance, we\u2019ve chosen \u2018Georgia\u2019 as our web safe font)<\/p>\n<p class=\"font_8\"><em>&lt;td align=&#8221;left&#8221; style=&#8221;font-family: Georgia, Arial, Times, serif; font-size:20px; line-height:30px; color:#000000;&#8221;&gt;Extra, extra, read all about it&lt;\/td&gt;<\/em><\/p>\n<p class=\"font_8\">Notice that the font-family has others listed after your initial or main font &#8216;Georgia&#8217;,\u00a0this means that if for some reason Georgia doesn\u2019t render in your email, &#8216;Arial&#8217;\u00a0will be next, then &#8216;Times&#8217;\u00a0and so on and so on &#8211; these are what is known as fallback fonts.<\/p>\n<p class=\"font_8\">Outlook 2007\/10\/13 have Times New Roman as their default fallback font. Even if you set your own fallback fonts within your code, Outlook will ignore them.\u00a0\u00a0However, if you want to avoid Times New Roman, this can be fixed with some code in the header:<\/p>\n<p class=\"font_8\"><em>&lt;!&#8211;[if mso]&gt;<\/em><br \/>\n<em>&lt;style type=\u201dtext\/css\u201d&gt;<\/em><br \/>\n<em>body, table, td {font-family: Georgia, Arial, sans-serif, Helvetica !important;}<\/em><br \/>\n<em>&lt;\/style&gt;<\/em><br \/>\n<em>&lt;![endif]&#8211;&gt;<\/em><\/p>\n<p>&nbsp;<\/p>\n<h3 class=\"font_8\">Adding Web Fonts<\/h3>\n<p class=\"font_8\">We can add web fonts in a number of ways, but all are added to the head stylesheet of the email. As an example let\u2019s use the popular Google &#8216;Roboto&#8217;\u00a0font.<\/p>\n<p class=\"font_8\"><em>(<a href=\"https:\/\/fonts.google.com\/specimen\/Roboto\" target=\"_blank\" rel=\"noopener undefined\" data-content=\"https:\/\/fonts.google.com\/specimen\/Roboto\" data-type=\"external\">https:\/\/fonts.google.com\/specimen\/Roboto<\/a>)<\/em><\/p>\n<p class=\"font_8\">After you have selected the \u201cRoboto\u201d font you will be given a\u00a0Link\u00a0or\u00a0@import\u00a0option.<\/p>\n<p class=\"font_8\"><em>&lt;link href=&#8221;https:\/\/fonts.googleapis.com\/css?family=Roboto&#8221; rel=&#8221;stylesheet&#8221;&gt;<\/em><\/p>\n<p class=\"font_8\">Or<\/p>\n<p class=\"font_8\"><em>@import url(&#8216;https:\/\/fonts.googleapis.com\/css?family=Roboto&#8217;);<\/em><\/p>\n<p class=\"font_8\">Then to call the font you use font-family as normal:<\/p>\n<p class=\"font_8\"><em>&lt;td align=&#8221;left&#8221; style=&#8221;font-family: &#8216;Roboto&#8217;, sans-serif; font-size:20px; line-height:30px; color:#000000;&#8221;&gt;Extra, extra, read all about it&lt;\/td&gt;<\/em><\/p>\n<p class=\"font_8\">The difference between Link or @import is the loading. @import waits until the html code is loaded, causing a delay to display, and a possible jump between the fallback font and the web font. Link is the opposite, it will load inline first as the code is read from top to bottom. Depending on the font used it could cause a delay for the whole email to display.<\/p>\n<p class=\"font_8\">Link also offers the option of preferred or alternative style sheets.<\/p>\n<p class=\"font_8\">The last font option is\u00a0<strong>@font-face<\/strong>,\u00a0this is possibly the most precise web font method.<br \/>\nIt allows you to pick the file format from .woff, .woff2, .ttf, .eot &amp; .svg. The former .woff format being a email developer&#8217;s choice, due to more email support.<\/p>\n<p class=\"font_8\">@font-face can be dropped into the head style sheet just like @import and Link, and looks like this:<\/p>\n<p class=\"font_8\"><em>@font-face {<\/em><br \/>\n<em>font-family: &#8216;Roboto&#8217;;<\/em><br \/>\n<em>font-style: normal;<\/em><br \/>\n<em>font-weight: 400;<\/em><br \/>\n<em>src: local(&#8216;Roboto&#8217;), local(&#8216;Roboto-Regular&#8217;), url(https:\/\/fonts.gstatic.com\/s\/roboto\/v16\/DDBbt_SKtg0EqyMEnMOuTX-_kf6ByYO6CLYdB4HQE-Y.woff) format(&#8216;woff&#8217;); unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;}<\/em><\/p>\n<p class=\"font_8\">If you are obtaining the font from a provider like Google Fonts you will need to copy the url in the provided link and paste it into Internet Explorer or Safari to view the @font-face.<\/p>\n<p class=\"font_8\"><em>&lt;link href=&#8221;https:\/\/fonts.googleapis.com\/css?family=Roboto&#8221; rel=&#8221;stylesheet&#8221;&gt;<\/em><\/p>\n<p>&nbsp;<\/p>\n<h3 class=\"font_8\">There\u2019s always an Alternative<\/h3>\n<p class=\"font_8\">Don\u2019t forget your images Alt text, the web fonts have limited platform rendering, but there is no harm in adding some style. We are not talking anything fancy like a Velour jumpsuit and house slippers here, after all this is just the text that loads when your email image doesn\u2019t.<\/p>\n<p class=\"font_8\">That Alt text can be styled with font-family, font-size, font-colour, text-decoration etc. try and match the image style, and get your email looking good even before the images are loaded.<\/p>\n<p class=\"font_8\"><em>&lt;img src=\u201cimages\/grandpa-style.jpg\u201d width=&#8221;200&#8243; height=&#8221;40&#8243; alt=\u201cGrandpa Style\u201d\u00a0style=\u201cfont-size:16px; font-weight: bold; font-family: &#8216;Roboto&#8217;, Arial, Helvetica, sans-serif; color:#000000;\u201d\/&gt;<\/em><\/p>\n<p>&nbsp;<\/p>\n<h3 class=\"font_8\">Put the kettle on<\/h3>\n<p class=\"font_8\">So break open the packet of Bourbon biscuits, put the kettle on for a brew and go crazy with the multitude of font families at your fingertips.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u201cIf you were a web font, what web font would you be?\u201d I was once asked a very similar question in a job interview, but that time it involved biscuits. \u201cIf you were a biscuit, what biscuit would you be?\u201d\u00a0 It\u2019s personal preference, and there is a wide choice of biscuits out there&#8230;and it\u2019s the same with fonts, with designers&#8230;<\/p>\n","protected":false},"author":1,"featured_media":511,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32,29,30,33],"tags":[],"class_list":["post-509","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-email","category-fonts","category-responsive"],"_links":{"self":[{"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/posts\/509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/pauldipper.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=509"}],"version-history":[{"count":2,"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/posts\/509\/revisions"}],"predecessor-version":[{"id":512,"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/posts\/509\/revisions\/512"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/media\/511"}],"wp:attachment":[{"href":"http:\/\/pauldipper.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pauldipper.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=509"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pauldipper.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}