The Ultimate Guide to Web Fonts

Historisch gezien is het nooit zo moeilijk geweest om het juiste lettertype te kiezen voor uw e-mail, gezien het beperkte aantal webveilige lettertypes om uit te kiezen. Maar de dingen zijn veranderd. Steeds meer e-mailontwerpers verleggen hun grenzen en omarmen dezelfde ontwikkelingstechnieken die webontwerpers al jaren gebruiken: het implementeren van webfonts in hun e-mails.

Webfonts stellen webontwerpers in staat creatiever te zijn met hun typografie, waardoor ze niet-standaard fonts kunnen kiezen in hun ontwerpen.

Zoals meestal het geval is met baanbrekende nieuwe ontwikkelingen op het gebied van e-mailontwerp en -ontwikkeling, behoorden vooruitdenkende leden van de community tot de eersten die deze technieken in onze inboxen (en onder onze aandacht) brachten. We zijn grote dank verschuldigd aan Campaign Monitor’s fantastische gids voor webfonts, Paul Airy’s “A Type of Email,” en Style Campaign voor hun inspiratie.

In de Ultimate Guide to Web Fonts gaan we in op de details van wat webfonts zijn en hoe e-mailontwerpers ze kunnen implementeren in hun e-mails.

Wat is een weblettertype?

Er zijn twee verschillende soorten lettertypen beschikbaar voor e-mailontwerpers voor hun e-mails – webveilige lettertypen en weblettertypen. Hier volgt het verschil tussen de twee:

Webveilige lettertypen
Denk aan Arial, Times New Roman, Verdana of Georgia als uitstekende voorbeelden van webveilige lettertypen. Dit zijn de standaardlettertypen die op de meeste besturingssystemen en apparaten worden gebruikt.

Weblettertypen
Weblettertypen zijn geen standaardlettertypen die op verschillende apparaten en besturingssystemen worden gebruikt, maar speciaal ontworpen en gelicentieerd voor gebruik op websites. Een paar weblettertypen die u wellicht kent, zijn Open Sans en Roboto.

Waarom weblettertypen?

Als marketeer en ontwerper weet u hoe belangrijk het is om in e-mail merkconform te blijven, met kleuren, ontwerp en -jawel- typografie. Het verbergen van belangrijke tekst in afbeeldingen is een standaardpraktijk in e-mailontwerp als een manier om bij het merk te blijven en creatief te zijn. Maar het “verbergen” van tekst in afbeeldingen beperkt de toegankelijkheid van de e-mail, omdat schermlezers de tekst op de afbeelding niet kunnen lezen.

Webfonts openen nieuwe wegen voor creativiteit in typografie, waardoor e-mailontwerpers creatief en toegankelijk kunnen zijn – en zich kunnen houden aan de look & feel van hun merk.

Email- en weblettertypen

Weliswaar worden weblettertypen niet universeel ondersteund, maar hier zijn de e-mailclients waar ze wel worden ondersteund:

Apple Mail
iOS Mail
Google Android
Samsung Mail (Android 8.0)
Samsung Mail (Android 8.0).0)
Outlook voor Mac
Outlook App

De lijst met ondersteunde e-mailclients lijkt misschien kort, maar neem hart – de meeste van hen behoren tot de top 10 meest populaire e-mailclients. Dat is iets om enthousiast over te zijn!

*Pro Tip: In april 2018 heeft Gmail een bijgewerkte interface voor hun webmailclient uitgebracht. Deze nieuwe interface maakt gebruik van twee populaire weblettertypen: Google Sans en Roboto. Wat betekent dit? Ondanks dat Gmail geen weblettertypen ondersteunt, als je een van deze weblettertypen in je e-mails gebruikt, zullen ze daadwerkelijk renderen in Gmail. Voeg de lettertypes gewoon toe aan uw font-family CSS-attribuut als u ze in uw e-mail wilt gebruiken.

Ontdek uw top 10

Als het op e-mailmarketing aankomt, draait het allemaal om uw publiek. Gebruik Litmus Email Analytics om te ontdekken welke e-mailclients het populairst zijn bij uw abonnees. Meld u gratis aan!

Ontdek uw publiek →

Hoe insluit u webfonts in e-mail

Er zijn drie hoofdbenaderingen die u kunt volgen bij het gebruik van webfonts in uw e-mails.

@import

Het gebruik van @import is een van de eenvoudigere benaderingen voor het importeren van webfonts in e-mail. Plaats de volgende regel code in de <head> van uw e-mail, meestal bovenaan uw <style>.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

In dit voorbeeld is de naam van het geïmporteerde lettertype-familie “Montserrat.”

Uw web font service zal u de URL geven die u nodig hebt. Als je het lettertype zelf host, moet je de URL verwijzen naar de plaats waar je web font file staat.

Deze methode wordt goed ondersteund door de meeste van de bovengenoemde email clients, en mist alleen ondersteuning in Android 2.3 (Android Gingerbread)- een oude Android versie die een verdwijnend klein marktaandeel heeft.

<link>

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

Net als bij de @import methode, zal je web font service de href waarde definiëren. Als u het lettertypebestand zelf host, wijzigt u deze URL zodat hij verwijst naar de plaats waar het webfont op uw server staat. En u zult deze regel code in de <head> van uw e-mail willen plaatsen, in de buurt van de top.

De <link> methode presteert iets beter dan de @import methode, met ondersteuning van alle bovengenoemde e-mail clients (hoera!).

Dus waarom zou u de ene methode boven de andere kiezen? De @import-methode stelt het laden van het geïmporteerde webfont uit totdat de HTML waarin het is ingesloten, volledig is geladen. Dit kan ertoe leiden dat het iets langer duurt voordat je webfont in je e-mail verschijnt, terwijl de rest van de e-mail wordt geladen. Omgekeerd laadt de <link>-methode de bron inline terwijl de code van het HTML-bestand wordt gelezen (van boven naar beneden), wat het laden van uw e-mail kan vertragen als uw webfontbestand bijzonder groot is.

@font-face

Online webfontdiensten bieden gewoonlijk vijf bestandsformaten waaruit u kunt kiezen: .eot, .woff, .woff2, .svg, en .ttf. Het .woff formaat heeft de beste ondersteuning als het gaat om e-mail, dus we raden je aan dit formaat te gebruiken wanneer je kunt. De @font-face methode is de enige methode waarbij je specifiek kunt kiezen welk bestandsformaat je wilt importeren, waardoor het de meest betrouwbare methode is voor het implementeren van web fonts.

Hier volgt een typische @font-face declaratie voor het importeren van een webfont in e-mail met behulp van Google Fonts als onze gekozen web font service:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}

Gelukkig genoeg, als je Google Fonts gebruikt, is het niet eenvoudig om de URL van een webfont te vinden-er zijn een paar hoepels waar je doorheen moet springen.

1. Zoek naar het weblettertype dat u wilt gebruiken.
Als u het eenmaal hebt gevonden en geselecteerd, verschijnt er een kleine zwarte balk onder aan het scherm. Als u erop klikt, ziet u een scherm zoals dit:

2. Kopieer de URL van het weblettertype (hierboven gemarkeerd) en plak deze in de adresbalk van Safari of Internet Explorer.
We gebruiken Safari of Internet Explorer in deze methode omdat Google Fonts gebruikmaakt van browserdetectie om te bepalen welk lettertypebestandstype wordt geserveerd. Voor deze methode willen we het .woff bestandstype gebruiken. Met Google Chrome het .woff2 lettertype bestandstype dat zal worden geserveerd in de browser die beperkte ondersteuning heeft. Met dank aan Elliot Ross voor dit extra inzicht!

Als de pagina is geladen, ziet u een CSS-declaratie op de pagina:

3. Kopieer deze CSS en plak deze in de <style>-sectie van uw e-mail.
Hoewel deze methode als de meest bulletproof wordt beschouwd, kunnen er door de leverancier van de webfontdienst wijzigingen worden aangebracht in de URL voor directe toegang die wordt gebruikt om het webfont te importeren. Als u ervoor kiest deze methode te gebruiken, test uw e-mail dan regelmatig om er zeker van te zijn dat uw weblettertypen in de loop van de tijd blijven renderen.

Bij Litmus is de @font-face-methode onze beste implementatie voor het importeren van weblettertypen in onze e-mails.

Alle eer voor deze methode voor het importeren van weblettertypen gaat naar e-mailtoegankelijkheidsvoorvechter Paul Airy, zoals beschreven in een eerdere Type: E nieuwsbrief (waarop u zich zeker moet abonneren, als u dat nog niet doet).

Weblettertypen gebruiken in e-mail

Zodra uw weblettertype is geïmporteerd, is het gebruik ervan in e-mail net zo eenvoudig als het gebruik van een webveilig lettertype, met behulp van de font-familienaam die is gedefinieerd in de importmethode:

font-family: 'Montserrat', sans-serif;

Een fallback-lettertype kiezen

Bij het gebruik van weblettertypen is het noodzakelijk om een fallback webveilig lettertype te hebben voor e-mailclients die geen weblettertypen ondersteunen.

Standaard webveilige lettertypen

Elke e-mailclient heeft een standaardlettertype als het lettertype in de font-family stack niet beschikbaar is. Bijvoorbeeld, Gmail gebruikt Arial, Apple Mail gebruikt Helvetica, en Outlook gebruikt Calibri.

Als een van deze standaardlettertypen u niet bevalt, hebben we goed nieuws: u kunt in de lettertype-stapel uw noodlettertype kiezen.

font-family: 'Montserrat', Verdana, sans-serif;

Beschouw dit als een geprioriteerde lijst van voorkeurslettertypes. Als een client niet kan voldoen aan uw nummer een keuze, zal het terugvallen op de volgende op uw lijst.

Bij voorbeeld, met behulp van de bovenstaande font-family stack, zal Gmail negeren het eerste lettertype in de lijst als het is een web lettertype dat niet wordt ondersteund in Gmail, en het lettertype weergegeven in de e-mail zal Verdana zijn. Als Verdana niet wordt ondersteund op het gebruikte apparaat (wat zeer zeldzaam zou zijn, aangezien Verdana een web-veilig lettertype is), zou het apparaat het standaard schreefloze lettertype voor zijn systeem gebruiken, aangezien dit het derde lettertype in de lijst is.

Hoe kiest u het juiste fallback-lettertype

Het kiezen van het juiste fallback-lettertype dat het ontwerp van uw e-mail behoudt, is de sleutel tot het bieden van een geweldige ervaring voor al uw abonnees, ongeacht welke e-mailclient ze gebruiken.

Fallback-lettertypen moeten van hetzelfde type zijn als het weblettertype – gebruik een schreefloos fallback-lettertype als uw weblettertype een schreefloos lettertype is, en een schreefloos fallback-lettertype als uw weblettertype ook een schreefloos lettertype is. Als je hetzelfde lettertype gebruikt, blijft het ontwerp van je e-mail in verschillende e-mailclients behouden. U kunt nog een stap verder gaan door de x-hoogte van de lettertypes te analyseren.

De x-hoogte is de verticale hoogte van het lettertype. In het ideale geval kiest u een fallback-lettertype met een vergelijkbare x-hoogte om te voorkomen dat uw e-mailontwerp uit elkaar valt wanneer het fallback-lettertype wordt gebruikt.

Hier ziet u een voorbeeld van de subtiele verschillen in x-hoogte tussen de lettertypen Verdana, Arial en het weblettertype Proxima Nova. Deze subtiele verschillen kunnen het verschil maken bij het maken of breken van uw e-mailontwerp wanneer weblettertypen niet renderen.

CSS Font Stack heeft een complete lijst – inclusief besturingssysteemdekking – van web safe fonts die kunnen worden gebruikt als fallback fonts.

Vermijd Faux Bold / Faux Italic

Als je bijbehorende bold en italic versies van je web font files hebt, laten we die dan gebruiken! Ontwerpers van lettertypen hebben er veel aandacht en moeite in gestoken om alle verschillende stijlen van een lettertype precies goed te krijgen, dus het is het beste om het oorspronkelijke lettertypeontwerp toe te passen in plaats van toe te staan dat de e-mailclient of browser lukraak een vals vet of vals cursief toepast op het gewone lettertype.

Beginsel, doe dit NIET:

@font-face {font-family: 'Montserrat';src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Net als bij webdesign, kun je de echte lettertypen binnenhalen door deze stijlen op te nemen in je @font-face stack, als volgt:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: normal;src: local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: normal;font-weight: bold;src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: bold;src: local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}

Zoals je kunt zien, halen de verschillende stijlen verschillende lettertypen binnen, ongeacht het lettertype-familie. Op deze manier, als je je lettertype in de HTML als volgt stijlt:

style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

…dan zal het echte ‘Montserrat-BoldItalic’ lettertype worden gebruikt! Evenzo, gewoon toevoegen font-weight: bold; zal trekken in ‘Montserrat-Bold’ en gewoon toevoegen font-style: italic; zal trekken in ‘Montserrat-Italic’.

Dus, je zou kunnen afvragen-waarom doe je het op deze manier in plaats van het verklaren van een ander lettertype-familie voor elke stijl, die ook trekt in de echte lettertypen? Dit is hoe dat eruit ziet:

Doe dit ook NIET!

@font-face {font-family: 'Montserrat Bold Italic';src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}style="font-family: 'Montserrat Bold Italic', Verdana, sans-serif;"

Dit levert een probleem op. Het gebruik van lettertype-familie namen om stijlen op te slaan creëert niet alleen over-compliceerde en redundante CSS, maar het ontdoet je tekst ook van styling als je fallbacks in werking treden. Dus als je bijvoorbeeld de bovenstaande code bekijkt in Gmail (die geen aangepaste web fonts ondersteunt), dan zie je alleen de ongebalde, ongecursiveerde Verdana in plaats van de Montserrat Bold Italic. Door je font-family en je font-weights/font-styles gescheiden te houden, behouden je fallback-lettertypen nog steeds de juiste styling.

Outlook, wat doe je me aan!

Met Times New Roman als het standaard fallback-lettertype is Outlook van oudsher een uitdaging voor e-mailmarketeers met een hart voor typografie. Terwijl Outlook 2019-dat is Microsoft’s meest recente versie van zijn desktop e-mailclient-honoreert fallback-lettertypen die in de code zijn gespecificeerd, zijn oudere Outlook-versies nog steeds een uitdaging.

Als u de @font-face importmethode gebruikt, zal Outlook 2007/10/13/16 standaard Times New Roman gebruiken, ongeacht welk fallback-lettertype u op zijn plaats hebt. Het goede nieuws is dat er een goed geteste hack is die dit probleem oplost.

De volgende CSS is gericht op Outlook, zoals aangeduid door <!-> en <!->, en vertelt Outlook om een andere font-stack te gebruiken.

<!--><style type="text/css">.fallback-font {font-family: Arial, sans-serif;}</style><!-->

Gebruik de klasse “fallback-font” in uw e-mail overal waar u uw font-family definieert:

<td class="fallback-font" style="font-family: 'Montserrat', Arial, sans-serif;">Your text here</td>

En uw fonts in Outlook 2007/10/13 zullen sierlijk terugvallen op Arial, in plaats van Times New Roman.

Een andere oplossing voor deze bug is om de @font-face importcode in een media query te wikkelen, waardoor deze voor Outlook verborgen blijft:

@media screen { @font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}}

Outlook zal nu eenvoudig “Montserrat” in uw font-family stack negeren en het volgende font lezen.

Er is ook de methode om de Microsoft Office-specifieke eigenschap, mso-font-alt, met uw gekozen systeem-font naar uw @font-face declaratieblok te richten.

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');mso-font-alt: 'Arial';}

Dit zal Outlook voor MS Office vertellen om standaard naar uw toegewezen fallback font.

Waar te vinden web fonts

Google Fonts

Er zijn tal van web font services beschikbaar, maar Google Fonts is onze favoriet. De service is volledig gratis, en u kunt de weblettertypen naar uw computer downloaden als u ontwerpen in Adobe Photoshop, Sketch of een andere ontwerpsoftware aan het mocken bent.

Typekit door Adobe

Adobe’s populaire abonnementsdienst voor lettertypen was in het verleden van weinig nut voor e-mailontwerpers, omdat Typekit afhankelijk was van JavaScript om lettertypen in te sluiten. Vanaf augustus 2017 heeft Typekit het gebruik van weblettertypen mogelijk gemaakt met alleen CSS – geen JavaScript vereist – en dat opent weblettertypen die in Typekit zijn gevonden voor gebruik in e-mail. U kunt gedetailleerde instructies vinden voor het toevoegen van Typekit-weblettertypen aan uw e-mails met behulp van @import in de Typekit-helpdocumentatie.

Meer webfontservices

Als u op zoek bent naar nog meer websites die webfonts aanbieden met een licentie voor gebruik in e-mail (meestal op betaalde basis), bekijk dan enkele van de onderstaande services:

MyFonts
Commercial Type
Font Spring
Font Shop
You Work for Them
Village
Process Type Foundry

Licensering webfonts in e-mail

Webfonts zijn oorspronkelijk ontworpen om uitsluitend op websites te worden gebruikt, dus hun licenties zijn meestal alleen voor gebruik op websites en mobiele toepassingen. De reden dat veel webfontservices het gebruik in e-mail niet toestaan, is omdat het wordt gezien als het distribueren van het lettertype, wat in strijd is met de End User License Agreement (EULA) van veel van de services.

De webfontleveranciers in de bovenstaande lijst omvatten licenties voor het gebruik van webfonts in e-mail. Veel licenties worden echter berekend op het aantal maandelijkse opens, wat moet worden overwogen bij het gebruik van een betaalde web font service.

Kan ik web fonts gebruiken?

Er is absoluut geen kwaad in het gebruik van web fonts als een progressieve verbetering in uw e-mails op dit moment. Implementeer uw fall-back lettertypen op de juiste manier en duw uw e-mail de toekomst in!

Het is de moeite waard om uw abonneebestand te bekijken om te zien hoeveel van hen uw e-mails bekijken in een e-mailclient die weblettertypen ondersteunt. Als de meerderheid dat niet doet, is het gewoon niet de moeite waard, vooral als u overweegt een betaald webfont te gebruiken.

Web fonts done right

Om u een beetje inspiratie te geven over wat er mogelijk is, zijn hier een paar van onze favoriete e-mails met webfonts.

Vergeet niet te testen

Aangezien het gebruik van weblettertypen in e-mail nog steeds als enigszins experimenteel wordt beschouwd, raden wij u aan vaak te testen, vooral als u weblettertypen hebt gebruikt in sjablonen die mogelijk niet regelmatig worden bijgewerkt. Wijzigingen en updates van de rendermogelijkheden van e-mailclients worden meestal niet van tevoren aangekondigd en kunnen sporadisch plaatsvinden, dus het is het beste om regelmatig te testen.

Het is de moeite waard om op te merken dat als u het weblettertype op uw eigen computer hebt geïnstalleerd, u het weblettertype kunt zien wanneer u live test in een e-mailclient op uw computer – iets om in gedachten te houden voor het geval het er plotseling op lijkt dat Gmail nu weblettertypen ondersteunt.

TEST TYPOGRAFIE IN UW CAMPAGNE

Geïnspireerd om uw typekunst naar een hoger niveau te tillen? Zorg ervoor dat u uw campagnes test voor u ze verstuurt. Probeer Litmus gratis en zorg ervoor dat uw typografie er fantastisch uitziet in 90+ e-mailclients, waaronder desktop, webmail en mobiele apparaten.

Lees meer →