Typography

Typography in email is arguably more important than other design elements since type is the one thing that is consistently rendered across different email clients. Most email clients block images from first-time senders by default, so your subscribers will almost always see the print content of your email before anything else.

Cross-platform Fonts

Unfortunately, you can’t just go and use an excellent font like Gotham for your copy. Like anything else with HTML email, there are some limitations. Here, you’re pretty much stuck with the basic, cross-platform fonts:

Sans Serif Web Safe Fonts

These are your best bets for sans serif fonts. If you include these in your font stacks, most people will see the page correctly.

  • Arial

  • Arial Black

  • Tahoma

  • Trebuchet MS

  • Verdana

These choices will give you good coverage, but you should include a more common one as a backup in your font stack.

  • Century Gothic

  • Geneva

  • Lucida

  • Lucida Sans

  • Lucida Grande

Serif Web Safe Fonts

These are your best bets for serif fonts.

  • Courier

  • Courier New

  • Georgia

  • Times

  • Times New Roman

These choices will give you good coverage, but you should include a more common one as a backup in your font stack.

  • MS Serif

  • New York

  • Palatino

  • Palatino Linotype

Monospace Fonts

There are not as many monospace fonts with wide, cross-platform support. These are your best bets.

  • Courier

  • Courier New

These fonts have some coverage.

  • Lucida Console

  • Monaco

It’s best to stick with a small list of fonts known to work across all platforms, and your ideal, bullet-proof font stacks should look something like this.

  • sans-serif: Helvetica, Arial, Verdana, Trebuchet MS

  • serif: Georgia, Times New Roman, Courier

Here’s a list of all widely-supported cross-platform fonts: Helvetica, Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Charcoal, Lucida Console, Lucida Sans Unicode, Lucida Grande, Palatino Linotype, Book Antiqua, Palatino, Tahoma, Geneva, Times, Times New Roman, Trebuchet MS, Verdana, Monaco.

Experimenting with Web Fonts

While web fonts may be common in modern site design, in the world of HTML email, they’re experimental at best. If you want to work on the ragged edge of email technology, however, you do have a few options. A (really) small number of email clients support the use of web fonts provided through services like Google Web Fonts.

  • Outlook2000 (crazy, we know)

  • iOS Mail

  • Apple Mail

  • Android (default client, not Gmail)

  • Thunderbird

So long as the client itself supports the use of <link>, @import, or @font-face, your choice of web font can be served with those methods and not with JavaScript, there’s a pretty good chance web fonts will show up just fine. The actual use of web fonts is pretty straightforward, using standard HTML and CSS syntaxes. If you prefer the HTML approach, <link> is your best option:

<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

CSS, meanwhile, offers two methods of importing fonts. @import is the cleanest of the two:

<style type="text/css">
    @import url('http://fonts.googleapis.com/css?family=Open+Sans');
</style>

@font-face includes more-familiar CSS properties, and is exactly what you if you visit the URL in the example above:

<style type="text/css">
    @font-face{
        font-family:'Open Sans';
        font-style:normal;
        font-weight:400;
        src:local('Open Sans'),
            local('OpenSans'),
            url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
    }
</style>

After the import is complete, regardless of the method you choose, you can set the font family value as you normally would:

<style type="text/css">
    .emailContent{
        font-family:'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
    }
</style>