How to use experimental typography in email without breaking your design - envato.com coupon

As web fonts and CSS tricks for typography make progress on the web, the less developed email component is still working it’s way through old school HTML and system fonts.

You might have come across the scenario where what you thought was a great, typographically simple idea that already works well on a website, is used in your latest email newsletter. You leave the office for the day, happy with the results of your creation, only to have five missed calls from your clients stating that the beautiful web font they signed off on has now defaulted to Times New Roman in their mail app. How could this have happened?

In this article, we’ll guide you through the experimental vs. safe use of typography in emails and show you some examples of how to use this in your own work.

Email-safe fonts

Since several email clients can block images from being displayed, it is important to emphasise the one thing that will be visible across all programs – the text. If you want to play it safe and prioritise the accessibility it is best to use these email-safe fonts, so that you know exactly what your email will look like in all programs.

Fallback fonts

Another way to keep it safe is to suggest fallback fonts to your preferred font. This will ensure that if the user opening the email doesn’t have the font installed, you can choose what other font options are shown, instead of a generic sans-serif font which would most likely mess up the whole design of the email as shown in the gif below.

The most commonly used email programs use the following generic fallback fonts:

• Apple Mail = Helvetica
• Gmail = Arial
• Microsoft Outlook = Calibri

In the example above, our chosen font Georgia falls back to the generic font Arial in Gmail which moves all the content and breaks the layout.

So, if we want to use a bold Georgia with the fallback of Times New Roman instead of the standard font Calibri for Microsoft users, you would use the following code:

<style type=”text/css”>
  .text {
    font-family: Georgia, Times New Roman,  serif;
  }
</style>

<td class=”text” style="font-family: Georgia, Times New Roman,  serif;”>I’m keeping it safe by using email-safe fonts!</td> 

And of course, to make things more complicated, Outlook 2007/2010/2013 have their own way of approaching this. Which means that we have to add a few customised lines of code, just for Outlook.

<!--[if mso]>
  <style type=”text/css”>
    .fallback-text {
      font-family: Georgia, Times New Roman,  serif;
    }
  </style>
<![endif]-->

<td class=”text” style="font-family: Georgia, Times New Roman,  serif;”>I’m keeping it safe by using email-safe fonts!</td> 

Always make sure that the x-height (the height of the lowercase x of your font) is similar to the x-height of your fallback font so that if the original font isn’t loaded, the difference is minimised and the rest of the email follows your brand.

Experimental users

For those who don’t like limitations and want to think outside of the box, there are some really fun options available. A few email client programs are now supporting web fonts which means that you can spice things up with a font of your choice and then use the principles of a fallback font for email programs with no support.

Web fonts are supported by the following apps (which are all currently in the top 10 most used mail programs):

• iOS Mail
• Apple Mail
• Android (default mail client, not Gmail app)
• Outlook 2000
• com app
• Thunderbird

There are several excellent font libraries such as Envato Elements, Typekit and Google fonts that provide web fonts (some are even free). After selecting your preferred font, the provider will present you with a unique URL which can be used in three different ways to add the font to an email.

The examples shown below are using Google’s font Roboto but you can also use your own fonts, just change the URL below to the URL where your font is located. Make sure that the method you use is placed in the <style> tag of the email.

<link>

This method is Google Fonts preferred method and it is supported by all the mail apps listed above.

<link href="http://ift.tt/1xg2FV4" rel="stylesheet" type="text/css">

And the special code for Outlook:

<!--[if mso]>
<link href="http://ift.tt/1xg2FV4" rel="stylesheet" type="text/css">
<![endif]-->

Please note that the @import method is currently not supported in AOL using IE11 and Android 2.3.

@import
If you prefer a CSS option or a simpler way, @import is the way to go.

@import url('http://ift.tt/1xg2FV4');

Please note that the @import method is currently not supported in AOL using IE11 and Android 2.3.

@font-face

You might have noticed that neither of the above let’s you choose a font format. This is where @font-face comes in handy. This approach takes slightly longer to set up since you have to write a new rule for every font style or weight. However, it is the safest method out there.

@font-face {
  font-family: "My-roboto-font";
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), local('Roboto-Regular'), url("Roboto-Regular.ttf") format('truetype');
}

.roboto {
      font-family: "My-roboto-font", Verdana,  sans-serif;
}
  </style>

A good rule is to always use inline CSS as an addition to the above examples along with the special lines of code for Outlook.

The future of email typography

We asked Jason Rodriguez, Product Manager at Litmus (a testing and QA service for email marketers) what new features he sees for email typography in the future and he answered:

The biggest trends for typography in email are accessibility (mainly using semantic markup) and the use of web fonts in email. More email designers are using semantic markup for things like headings and paragraphs, which not only helps people with disabilities better understand the contents of an email, but also aides in maintaining hierarchy when CSS isn’t loaded or supported. And the use of web fonts in email is steadily growing. Support for web fonts is fairly good across popular email clients, allowing designers to move away from all image emails and still maintain brand consistency.

The examples above might not seem as much, but this is actually how far email typography has come as far as using safe strategies that will work on most email platforms goes. But what else does the future hold for this unique genre? Are there any email client programs that are breaking out of the chains of 1990’s code? The answer is yes.

Gmail recently released support for CSS properties such as the <code>font-feature-settings</code>, <code>font-kerning</code> along with <code>column-count</code> and there are other email apps starting to follow as well. This gives great opportunity for designers to finely craft the typography in their emails while businesses can use it to target their market by strengthening their brand. Now you can create an identical version of your logo without having to use low resolution images that might not be displayed.

Looking for a template to start from? Check out our email template library.

_{Featured image: SF Kingston font, Grunge watercolor backgrounds.} 

The post How to use experimental typography in email without breaking your design appeared first on Envato.

envato.com coupon from Envato http://ift.tt/2mzAu8p
envato.com coupon