Webfonts in e-mail, de trend van 2015?

Webdesigners zijn er van overtuigd dat in 2015 steeds meer gebruik zal worden gemaakt van typografie. Er wordt zelfs beweerd dat typografie de ruggengraat van het visueel design zal gaan vormen. In 2015 mag tekst groter dan ooit, soms zelfs als vervanger van beeld. Daarnaast wordt aandacht voor maximale leesbaarheid van content een absolute pijler. Maar binnen e-maildesign zie of hoor je nog relatief weinig over deze trend. En dat is jammer, want iedereen wil toch dat het font in de e-mail hetzelfde is als het font op de website?

Onderstaand zet ik alle voor- en nadelen van webfonts in e-mail op een rij. Inclusief hoe je dit technisch moet aanpakken. Zodat je hierna zelf de keuze kunt maken of je wel of niet webfonts in e-mail moet overwegen.

De belangrijkste reden om webfonts in e-mail te gaan verwerken is heel simpel; het is nu eenmaal mooier. Nu is mooi natuurlijk een relatief begrip. Maar ik denk dat we het erover eens zijn dat het mooier is als het font in de e-mail gelijk is aan het font op de website. Helaas is het e-maildesigners in de afgelopen jaren wel duidelijk geworden dat wat mooier is, niet altijd werkt in de praktijk. En dat is ook het geval bij typografie in e-mail. Webfonts worden nu eenmaal niet breed ondersteund door alle e-mailclients, zoals je verderop in dit artikel kunt zien.

Maar in plaats van ons bezig te houden met alles wat niet kan, kijk ik liever naar de mogelijkheden. En die zijn er wel degelijk. De stijgende groei van het aantal e-mails dat op mobiele devices wordt geopend biedt namelijk mogelijkheden. Volgens de laatste cijfers van Litmus wordt gemiddeld 53 procent van de e-mails geopend op een smartphone of tablet, waarvan 40 procent op iPhones (28 procent) en iPads (12 procent) en 7 procent op een Android apparaat.

En laten nu de standaard e-mailapps van iPhones, iPads en Android apparaten webfonts ondersteunen! Hierdoor is er dus een grote kans dat de ontvanger van je e-mail ook netjes het webfont te zien krijgt. Maar er is meer! Zo is het percentage van Apple Mail opens op desktops gestegen naar 38 procent. Dit is zo’n beetje acht procent op het totaal aantal opens. Ook in Apple Mail worden webfonts ondersteund. Bij elkaar opgeteld zitten we dan op 55 procent opens in e-mailclients waarvan we weten dat die webfonts ondersteunen en dit zal hoogstwaarschijnlijk alleen maar toenemen.

Het toepassen van webfonts kan op een aantal manieren. Er is een mogelijkheid om webfonts via @import in te laden in je e-mail, maar je kunt ook een specifieke font op je eigen server plaatsen en deze vanaf die locatie inladen in je e-mail via @font-face. Hieronder leg ik je uit op welke wijze je beide manieren in je e-mail kan integreren.

De @import regel geeft je de mogelijkheid om styles uit andere stylesheets te laden. Dit doe je ook met Google Fonts. Deze @import regel plaats je als eerste binnen je stylesheet en zo laad je de styles van bijvoorbeeld het Google font ‘Merienda’ in.

Vervolgens kun je het font ‘Merienda’ gebruiken binnen de e-mail. Bijvoorbeeld op een table cell:

@font-face

Ook met de css regel @font-face is het mogelijk om specifieke webfonts in e-mail te gebruiken. Het voordeel van deze manier is dat je niet alleen fonts uit de bibliotheek van Google Fonts kan gebruiken, maar bijvoorbeeld ook een specifiek font van je merk. @font-face plaatsen we binnen de styles als volgt:

In onderstaand overzicht zie je de ondersteuning van deze twee manieren per e-mailclient:

Webfonts in e-mail op desktop

Webfonts in e-mail op mobiel

* Android (vooral oudere versies) geeft soms wisselende resultaten, maar lijkt webfonts over het algemeen te ondersteunen.

Webfonts in e-mail op webmail

* AOL geeft soms wisselende resultaten in combinatie met verschillende browsers, maar lijkt webfonts over het algemeen te ondersteunen.

Mocht je geen ontvangers in je database hebben die hun e-mail openen in Outlook 2007, 2010 of 2013 dan ben je met het inzetten van @import of @font-face klaar. Maar heb je deze wel dan moet je helaas nog een paar handelingen uitvoeren om webfonts in de e-mail te integreren. Wanneer je @import of @font-face in je e-mail gebruikt, zet Outlook al je fonts om naar Times New Roman en dat is in de meeste gevallen niet wenselijk. Maar dit kun je op twee manieren voorkomen en wel door de @import of @font-face in een media query te plaatsen of een fallback font definiëren binnen een conditional comment voor Outlook specifiek. De media query wordt niet gelezen door Outlook en zodoende genegeerd, waardoor je fonts niet meer omgezet worden naar Times New Roman. Dit heeft als gevolg dat je webfont niet meer wordt getoond in Outlook 2000.

Met een conditional comment zeg je tegen Outlook dat deze een ander font moet gebruiken dan eerder aangegeven. Outlook zal in onderstaand voorbeeld het font Verdana gebruiken op table cells in de e-mail.

Een laatste tip voor webfonts in e-mail

Als laatste wil ik nog een tip meegeven om altijd een goed websafe font als alternatief mee te geven. Let hierbij wel op de hoogte en de breedte van de karakters en laat deze zoveel mogelijk overeenkomen. Als de e-mail dan wordt geopend in een e-mailcliënt waar webfonts niet worden ondersteund heeft dit weinig tot geen invloed op bijvoorbeeld de uitlijning van de e-mail. Je kunt hierbij denken aan titels van een regel die vervolgens twee regels in beslag nemen en je design uit elkaar drukken.