Bij het ontwikkelen en designen van e-mails, speelt het lettertype een grote rol. Het bepaalt de look & feel van jouw e-mail en, aangezien het voor al je e-mails hetzelfde is, geeft een punt van herkenning voor je ontvanger. Een goed font kiezen is dus van groot belang. Om je te helpen bij het kiezen en gebruiken van een lettertype (‘font’), zetten we in dit artikel een aantal zaken op een rijtje.
Er zijn dus eindeloos veel lettertypen beschikbaar, maar je kunt niet ieder lettertype ‘zomaar’ gebruiken. Naast het feit dat je voor sommige lettertypen een licentie nodig hebt, spelen je ESP en de e-mail client van je ontvanger een grote rol. Waar je op je website vrijwel elk lettertype kunt kiezen, geldt dat niet voor e‑mail. Je kunt een website namelijk “dwingen” jouw lettertype te vertonen, maar niet alle e-mail clients ondersteunen dat. Je moet dus bewust bezig zijn met je lettertypen in je e-mails, anders leest je ontvanger een e‑mail in een font dat je helemaal niet zelf gekozen hebt. Om ervoor te zorgen dat dit jou niet overkomt, behandelt dit artikel de volgende stappen:
- Je ‘eigen’ font kiezen
- Een fallback font (websafe font) kiezen
- Je lettertypen ophalen in je e-mailtemplates
Jouw stijl, jouw lettertype
Een belangrijk aspect van de huisstijlgids van organisaties is het gebruikte lettertype. Bij Spotler gebruiken we bijvoorbeeld Greycliff en Open Sans voor onze website. Het bepaalt de uitstraling van je teksten en website als geheel. Soms is een font zo bepalend voor een merk, dat mensen dat font onlosmakelijk verbinden aan dat merk:
Net als Disney, heeft bijvoorbeeld ook de New York Times een volledig eigen lettertype ontwikkeld, dat alleen zij gebruiken. Het geeft des te meer het belang van een lettertype aan. Wil je speels overkomen of juist serieus? Kinderlijk of zakelijk? Avontuurlijk of romantisch? Dan is er een belangrijke rol weggelegd voor het lettertype dat je kiest.
Hoeveel lettertypen er precies zijn, is lastig te duiden. Aan het begin van internet en e-mail was het kiezen van een lettertype vrij snel gedaan: je had alleen een basissetje fonts tot je beschikking. Maar met de groeiende interesse in andere lettertypen, nam niet alleen het aantal gestandaardiseerde lettertypen toe, maar werden ook custom lettertypen ontwikkeld door designers over de hele wereld.
Ga je aan de slag met lettertypen in je e-mails, dan kun je o.a. terecht bij MyFonts, Google Fonts, Commercial, FontSpring, Typotheque, Process Type Foundry en meer. Waarschijnlijk heb je zelf al een standaardlettertype gekozen voor de koppen op je website, dus kun je die ook gebruiken voor je e-mails. Heb je dat nog niet of wil je een nieuw lettertype gaan gebruiken, onthoud dan dat je voor veel webfonts een licentie nodig hebt. Kies je een lettertype van een commerciële partij, dan is het goed om hun EULA (End User License Agreement) te raadplegen over het gebruik van fonts in je e-mails.
Een lettertype om op terug te vallen
E-mail is niet het meest populaire medium voor lettertype-fanaten. Er zijn maar weinig lettertypen die door alle email clients ondersteund worden en niet-ondersteunde lettertypen worden vervangen door een standaardfont. Apple Mail vervangt je lettertype dan voor Helvetica, Gmail voor Arial en Microsoft Outlook voor Calibri of erger: Times New Roman. Je moet daarom altijd een back-up plan hebben. Want misschien ondersteunt Gmail je mooi afgeronde lettertype wel, maar zien je Outlook-ontvangers je teksten in Times New Roman.
Om dit probleem op te lossen, maak je gebruik van zogeheten ‘fallback’-fonts: lettertypen die niet jouw huislettertype zijn, maar die er genoeg op lijken én werken in elke client. Waar je voor je eigen stijl een webfont kiest, kies je voor je fallback een websafe font. Er bestaan drie typen websafe fonts:
- Websafe fonts met schreef
Lettertypen met schreef (serif) zijn lettertypen waarvan de letters eindigen met een schreef, een hoekig uiteinde. Er zijn drie websafe lettertypen met schreef: Georgia, Palatino Linotype en Times New Roman.
- Websafe fonts zonder schreef
Schreefloze lettertypen (sans-serif) zijn lettertypen waarvan de letters afgerond worden.
- Websafe ‘monospace’ fonts
Monospace fonts kenmerken zich door de ruimte die voor elke letter hetzelfde is. In tegenstelling tot andere lettertypen, waarbij de letters elk proportionele ruimte krijgen.
Alle websafe fonts vind je hier.
Een fallback-font is misschien niet het lettertype dat je graag zou willen gebruiken, maar door het juist lettertype te kiezen, hoeft het niet per sé op te vallen in de inbox. Natuurlijk is de keuze tussen schreef, schreefloos of monospace belangrijk, maar ook de hoogte van je gekozen lettertypen is van invloed. Is je font-size 14 px? Dan kan het per font verschillen hoe hoog je letters zijn. Om te voorkomen dat je e-maildesign verpest wordt door te hoge (of te lage) letters, heb je idealiter dezelfde hoogte voor je lettertypen.
Vaak zie je in HTML dat er meerdere lettertypen achter elkaar gedefinieerd zijn: fontstacks. Dat komt doordat een email client op volgorde de lettertypen checkt op compatibiliteit: werkt lettertype 1 niet in de client? Dan checkt hij 2, vervolgens 3, enzovoorts, totdat een passend font gevonden is.
Lettertypen in je e-mails verwerken
Met een style guide voor e-maillettertypen op zak, is de volgende stap om die lettertypen in al je verschillende e-mails aan te brengen. Je wilt namelijk dat al je uitingen in dezelfde stijl aankomen bij je klant, toch? Daar vallen dus ook de transactionele e-mails die je vanuit je webshop, CRM, boekhoudsoftware, ticketsysteem, etc. verstuurt onder. Om dat allemaal handmatig per systeem te doen is een eindeloze klus, dus is een platform hiervoor (SendPro) uitermate geschikt.
Sommige template editors hebben een standaard gedefinieerde set lettertypen, die je als verzender kunt gebruiken. Met een meer geavanceerde template editor kun je echter ook je gekozen webfonts ophalen. Dat kan op verschillende manieren, maar de twee meest gebruikte:
- De <link> methode:
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
De <link> methode wordt door vrijwel alle clients en platforms ondersteund. Wanneer je een lettertype hebt gekozen bij een eerder genoemde font service, voorziet die je van een href-waarde (http://…). Zo kan een email client je lettertype ophalen van de betreffende locatie.
- De @font-face methode:
<style type="text/css">
@media screen {
@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>
Met font-face haal je het font direct van het bronbestand op en kun je font-family direct gebruiken in de styling van je e-mails.
De outlier: Outlook
Eerder in dit artikel ging het al over Times New Roman, dat Outlook gebruikt wanneer het een lettertype niet ondersteunt. Outlook heeft meer quirks: het ondersteunt de bovenstaande methoden niet. Voor Outlook moet je dus een extra stukje code in je template verwerken:
<!--[if mso]>
<style type=”text/css”>
.fallback-text {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->Best practices bij SendPro templates
Wanneer je met SendPro aan de slag gaat voor e-mailtemplates, ervaar je een veel simpelere manier om de styling van al je e-mails te controleren. Door te werken met macro’s, kun je op één plaats je style guide voor lettertypen definiëren, aanpassen of verwijderen wanneer nodig. Dat doe je door een font.
Samenvattend:
E-mail lettertypen kiezen is soms een vak op zich. En heb je eindelijk fonts gekozen, dan komen de verschillen tussen email clients weer om de hoek kijken. Om daar problemen mee te voorkomen, is het altijd belangrijk om e-mails te blijven testen voor livegang. Het gaat namelijk niet om een nieuwsbrief waar één header anders is dan normaal, maar om alle teksten in je meest vitale e-mails. Testen (met Litmus of Email on Acid) is dus een must.
