Pick a font, any font – just not comic sans

“If you were a web font, what web font would you be?”

I was once asked a very similar question in a job interview, but that time it involved biscuits.

“If you were a biscuit, what biscuit would you be?”  It’s personal preference, and there is a wide choice of biscuits out there…and it’s the same with fonts, with designers and developers enjoying an immensely varied selection of standard ‘Web Safe Fonts’ or the more daring ‘Web Fonts’.

(And for those still wondering about my choice – it’s the Bourbon biscuit, always the Bourbon.)

 

Safety in letters

So what are the differences between Web Safe Fonts and Web Fonts?

Web Safe Fonts

These are the standard available system fonts found on everyone’s operating system. So it is ‘safe’ to assume it will render correctly across email clients and platforms.

The most common Web Safe Fonts include:

  • Arial/Arial Black

  • Helvetica

  • Times/Times New Roman

  • Courier/Courier New

  • Palatino

  • Georgia

  • Garamond

  • Bookman

  • Comic Sans

  • Trebuchet

  • Impact

  • Verdana

Out of these Helvetica and Arial are the standard fonts of choice, whereas others are frowned upon… like Comic Sans.

Comic Sans was released with Windows 95, it had a bright start in life, and this was possibly it’s downfall. “Hmm that Times New Roman header is just too serious, what can I use that’s more fun and quirky… Comic Sans, it even sounds fun.” The font was overused and wasn’t a good font to start with. The character weight too heavy and poor kerning (the space between characters) made it a designers arch enemy.

 

Web Fonts

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’t yet all render 100% across all devices, so you should use them wisely.

At present, a small range of email clients accept web fonts, including:

  • Android (default mail, not Gmail app)

  • AOL Mail

  • Apple Mail

  • iOS Mail

  • Outlook 2000

  • Outlook.com app

  • Thunderbird

However this small number does cover the majority of the top 10 email clients being used today.

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:

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 “Gotham” won’t become “Georgia”.

Ideally web fonts should be an email designer/developer’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.

 

Web Safe or Not Web Safe?  That Is The Font Question…

The ability for your fonts to render properly in someone’s 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.

For instance, you might think that ‘Lato’ font looks great in your new email newsletter, and when you see the ridiculously high click through rates of  70-80% you think you’re campaign has been a roaring successful. But when you look more closely, you discover that the majority of those clicks were people clicking a ‘download font’ link prompted by their device or browser because it doesn’t have or support the ‘Lato’ font.  This ‘download font’ link has now completely skewed all your click through rates and reporting stats.

So, think carefully before you choose a web font instead of a web safe one.

Now that you’ve made your font choice, let’s get them coded into your email.

 

Adding Web Safe Fonts To Your Emails

Looking at web safe fonts first, these would sit in the html as inline styles, like so:
(for this instance, we’ve chosen ‘Georgia’ as our web safe font)

<td align=”left” style=”font-family: Georgia, Arial, Times, serif; font-size:20px; line-height:30px; color:#000000;”>Extra, extra, read all about it</td>

Notice that the font-family has others listed after your initial or main font ‘Georgia’, this means that if for some reason Georgia doesn’t render in your email, ‘Arial’ will be next, then ‘Times’ and so on and so on – these are what is known as fallback fonts.

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.  However, if you want to avoid Times New Roman, this can be fixed with some code in the header:

<!–[if mso]>
<style type=”text/css”>
body, table, td {font-family: Georgia, Arial, sans-serif, Helvetica !important;}
</style>
<![endif]–>

 

Adding Web Fonts

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’s use the popular Google ‘Roboto’ font.(https://fonts.google.com/specimen/Roboto)

After you have selected the “Roboto” font you will be given a Link or @import option.

<link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>

Or

@import url(‘https://fonts.googleapis.com/css?family=Roboto’);

Then to call the font you use font-family as normal:

<td align=”left” style=”font-family: ‘Roboto’, sans-serif; font-size:20px; line-height:30px; color:#000000;”>Extra, extra, read all about it</td>

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.

Link also offers the option of preferred or alternative style sheets.

The last font option is @font-face, this is possibly the most precise web font method.
It allows you to pick the file format from .woff, .woff2, .ttf, .eot & .svg. The former .woff format being a email developer’s choice, due to more email support.

@font-face can be dropped into the head style sheet just like @import and Link, and looks like this:

@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’), url(https://fonts.gstatic.com/s/roboto/v16/DDBbt_SKtg0EqyMEnMOuTX-_kf6ByYO6CLYdB4HQE-Y.woff) format(‘woff’); unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;}

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.

<link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>

 

There’s always an Alternative

Don’t 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’t.

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.

<img src=“images/grandpa-style.jpg” width=”200″ height=”40″ alt=“Grandpa Style” style=“font-size:16px; font-weight: bold; font-family: ‘Roboto’, Arial, Helvetica, sans-serif; color:#000000;”/>

 

Put the kettle on

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.

/by

Emoji here, emoji there, emojis everywhere

Emojis are everywhere…on social media platforms, blogs, text messages, and now they are even in movies. They are used by almost everyone – even your grandma (once she’s worked out how her smartphone works).  Although you personally might not use them, it is highly likely that someone has sent you an emoji on more than one occasion by now.

One platform where emojis are undoubtedly quite useful is email marketing; especially when your open rates are at stake!

With marketers making every effort to cut through the noise within the inbox and get their message seen by their target audience, emojis come in quite handy.  When used appropriately, these little emojis can be a huge help with increasing open rates.

Before choosing whether to use or ignore them, perhaps have a quick read about our experience with emojis and what we really think of them. There’s no stopping these little guys, with 56 new emojis moving onto your smartphone this autumn, so if you are thinking about using emojis within your email marketing we have some helpful advice…

The best way to really maximise the impact of these little icons and really drive increased engagement is to place them within your subject lines.

 

Emoji-Style Subject Lines

One excellent example of emojis within your subject lines is when they are used as an extension of your brand. For example, if you are a music company selling gig tickets, you could use a speaker emoji in a subject line:

Another attention grabbing example is the one I from travel agent, as shown below. The company was able to convey the call to action: Book a trip > Get on the plane > Enjoy the sunshine, all through the use of emojis.  With emojis taking up so few characters, they free up valuable space for this tech-savvy travel to convey their CTA hook: a ‘discount’ and sale’.

And here is my favourite one, from a fashion retailer who has taken email personalisation and targeted data to the emoji level. Not only did they send a birthday message, they also included a birthday balloon in the subject line:

Why Use Emoji Subject Lines?  They Help Boost Open Rates

There’s something about an emoji that simply makes people want to click. Why? The answer to that is actually quite interesting. According to TNW (The Next Web), when we see a face emoji online, the same parts of our brain react as when we look at a real human face hence the instant engagement with emoji. Our mood adjusts depending on the emoji’s association in our brain and sometimes we even mimic the emoji’s face expression subconsciously. At this point we engage with the emoji by opening an email/ reading an article or anything else that call-to-action (CTA) asks us to do as we empathize with these online avatars.

 

How To Use Emojis In Your Emails:

Inserting emoji is as simple as copying an emoji from a website/ document and pasting it into a subject line of your email. However to ensure the symbol displays correctly, make sure you test the email by sending it to yourself and your colleagues.

There are, however a few things that could go wrong when using emojis in the subject lines.  For example, the email client might not support emojis in the subject line, displaying the symbol ‘▢’instead.

The emojis will display differently depending on recipients’ operating system (see example right). Most browsers support emoji on iOS, OS X, Android and Windows operating systems.

For more info on emoji compatibility with emails and browsers, here are some helpful links:

Litmus – Emoji Support in Email

Can I Emoji – Browser Support

We’ve found a useful site where you can choose emojis and check how they would render within a different inboxes.

 

 

 

 

Emojis – Are They Good Or Bad?

 

It depends. As shown above, when used appropriately, emojis can convey emotions or act as an extension of your brand.  They also help shorten subject lines (1 emoji = 1 character), boost open rates and in turn click-through rates.

There is however, a risk of overusing or even misusing emojis. A big no-no for emoji use would be to insert an emoji within the main body of an email, especially if the context of the email is serious or has a professional target audience.

We also recommended to not replace words with emojis. The reason for that is the fact that recipients can’t always figure out what message the sender is trying to convey. For example a sentence ‘Have a Nice Day’, when used with an emoji would read as follows:

Everyone interprets an emoji symbol differently, so the question is – will your recipients correctly guess the word you are trying to replace? This is only a simple example but as you can imagine, the more complex the sentence the lesser chance the recipient will decrypt your message correctly.

There is also a risk that the emoji will not display at all or display as a question mark or empty box symbol and so the recipient would read ‘Have a � day. ‘

 

Think Before You Emoji

Emjois might seem like fun, but you should consider their use carefully.  You should avoid using them for sensitive or important matters as it may irritate or offend your recipients, as you could be seen to be trivialising the subject matter.

One recently unfortunate use of emojis that backfired was with an American politician who asked young voters on social media platforms to express their opinion on student loan debt using 3 emojis. What could possibly go wrong?  Quite a bit.

By using emojis in this fashion your target audience is likely to feel (as was the case here) that you are not taking them or the subject matter seriously.

You should also consider your brand and whether using emojis is appropriate for your tone of voice.  Some brands may be able to use emojis in the main body of the email copy, for example toys manufacturer or other brands that target younger audiences or millennials (apparently the latter are inseparable from emojis).

So always ask whether emojis are appropriate for your brand, and think carefully about the icons you choose and how you place them within your emails.

However you decide to implement them, please…

…use emojis responsibly.

/by