Lettertypen in e-mail

Wat je leert

Ontdek meer over de mogelijkheden en beperkingen van het online gebruiken van lettertypen en hoe je e-mails kunt versturen die aansluiten bij je merk.

Hoe lettertypen werken

Lettertypen zijn weergaven van tekst en kunnen worden gebruikt in printmedia of online media. Je bent misschien bekend met enkele van de meest voorkomende lettertypen, zoals Arial of Times New Roman, maar er zijn duizenden andere lettertypen die je kunt gebruiken om je merk te communiceren en te vertegenwoordigen.

Met online media (zoals websites of e-mails) zijn je lettertype-opties bijna onbeperkt. Maar wanneer je je creatie met iemand anders deelt, ziet deze er mogelijk niet precies hetzelfde uit, omdat niet alle apparaten toegang hebben tot dezelfde lettertypen.

Er zijn 2 manieren waarop een apparaat een lettertype kan openen en gebruiken: systeemlettertypen (d.w.z. lettertypen die zijn opgeslagen op het apparaat dat je gebruikt) en weblettertypen (d.w.z. lettertypen die worden geladen vanaf een externe server)

Over systeemlettertypen

Computers en telefoons worden geleverd met een reeks vooraf geïnstalleerde lettertypen. Er zijn enkele veelvoorkomende geïnstalleerde lettertypen (op de meeste apparaten staan bijvoorbeeld Georgia en Verdana), maar apparaten kunnen sterk verschillen in wat ze standaard bevatten. Lettertypen die door de meeste apparaten worden gebruikt, worden "web-safe"-lettertypen genoemd.

Over weblettertypen

In tegenstelling tot webveilige lettertypen worden webfonts vanaf een externe server geladen, tegelijk met de content die je bekijkt. Aangepaste lettertypen zijn meestal webfonts. Als je een webfont gebruikt, wil je ook een webveilig fallback-lettertype instellen, voor het geval een bepaald apparaat je webfont niet kan laden.

Over back-up-lettertypen

Wanneer je iets online bekijkt, of het nu een webpagina of een e-mail is, zit er achter de schermen CSS (code die wordt gebruikt om content online op te maken) die je apparaat vertelt welk lettertype moet worden weergegeven. Als je apparaat geen toegang heeft tot het lettertype, controleert het de CSS op een "fallback lettertype" (een lettertype of lettertypen, geselecteerd door de persoon die de website of het e-mailbericht heeft gemaakt, om te gebruiken als het voorkeurslettertype niet beschikbaar was). Fallback lettertypen moeten webveilige lettertypen zijn die de meeste apparaten kunnen gebruiken. Ze geven je meer controle over hoe je bericht wordt weergegeven wanneer iemand het bekijkt op een apparaat dat geen aangepaste/weblettertypen ondersteunt.

Als er geen fallback-lettertype beschikbaar is, of als het fallback-lettertype niet wordt ondersteund door het apparaat dat wordt gebruikt, gebruikt het apparaat een standaardlettertype, zoals Arial of Times New Roman. Standaardlettertypen verschillen sterk per apparaat en app.

Hoe lettertypen werken in e-mail

Sommige e-mailclients ondersteunen webfonts, maar andere niet. Wanneer iemand je e-mail opent in een inbox of op een apparaat dat geen webfonts ondersteunt, zien ze in plaats daarvan een standaardlettertype. Je kunt bepalen welke systeemlettertypen als back-ups worden gebruikt door een fallback-lettertype in te stellen.

Als iemand je e-mail opent op een apparaat dat webfonts ondersteunt, wordt het font geladen vanaf de URL die je in de CSS van je e-mail hebt opgegeven. Als het apparaat toegang heeft tot het font, wordt het weergegeven; anders gaat het door naar de fallback fonts.

Ondersteuning voor webfonts hangt af van de e-mailapp, de versie ervan en het type e-mailaccount. Voorbeelden van clients met ondersteuning voor webfonts zijn:

• Apple Mail
• iOS Mail (de standaard e-mailapp op iOS)
• Sommige Android-e-mailapps (de ondersteuning verschilt per app; Android 2.3 biedt geen ondersteuning voor de @import -methode die door Google- en Adobe-lettertypen wordt gebruikt)
• Samsung Email op Android, behalve wanneer je een Microsoft-e-mailadres gebruikt, zoals Outlook.com of Hotmail
• Outlook voor Mac 2011 en 2016; Outlook voor Mac 16.80 ondersteunt geen webfonts

Gmail, inclusief de Gmail-app op Android, ondersteunt webfonts over het algemeen niet. Gmail-webmail op desktop kan Roboto en Google Sans weergeven, omdat Gmail ze in de eigen stijlen opneemt. Dit betekent niet dat Gmail andere aangepaste lettertypen uit je e-mail kan laden. Stel een fallback-lettertype in en test je e-mail in de Gmail-apps die je ontvangers gebruiken.

Bekijk voor details per e-mailapp en -versie de tabel voor webfontondersteuning van Can I email.

Lettertypen in je e-mails optimaliseren

De beste manier om ervoor te zorgen dat je e-mail er op alle apparaten consistent uitziet, is door een webveilig lettertype te gebruiken. De standaardlettertypen van Klaviyo zijn over het algemeen webveilig. Je vindt de lettertypen die Klaviyo aanbiedt in:

• Content > Media & brand > Brand: selecteer Lettertypen. Als je in plaats daarvan Stijl ziet, selecteer je dat om de sectie Lettertypen te vinden.
• Het paneel Stijlen bewerken in de e-mailtemplate-editor
• De werkbalk voor tekstopmaak bij het bewerken van tekst in een tekstblok, of de lettertype-instellingen in andere blokken met tekst
• Het paneel Stijlen bewerken in de editor voor aanmeldingsformulieren

Tips voor het gebruik van aangepaste lettertypen

Als je liever een aangepast lettertype gebruikt, gebruik dan de tips hieronder om ervoor te zorgen dat je e-mails er op verschillende apparaten goed ontworpen uitzien.

Gebruik reservelettertypen

Selecteer een websafe fallback-lettertype dat zo goed mogelijk bij je aangepaste lettertype past. Je kunt een fallback-lettertype selecteren uit de standaardlettertypen van Klaviyo bij het configureren van het aangepaste lettertype.

Gebruik tekst in afbeeldingen

Hoewel een e-mail die volledig uit afbeeldingen bestaat je bezorgbaarheid kan schaden, kun je strategisch een combinatie van tekst in afbeeldingen en tekst in tekstblokken gebruiken om een e-mail te maken die bij je merk past. Kies een aangepast, merkgebonden lettertype voor je koppen en call-to-actions (CTA's), en combineer dit met een webveilig lettertype voor je bodytekst. Zet ook essentiële informatie en de belangrijkste CTA in tekst- of knopblokken, zodat ontvangers ze kunnen gebruiken, zelfs als afbeeldingen niet laden.

Gebruik afbeeldingen met je lettertype in je huisstijl voor bepaalde tekst, en zorg ervoor dat je alternatieve tekst toevoegt wanneer je de afbeeldingen aan je e-mail toevoegt. Pas daarna het webveilige lettertype toe op de rest van de tekst in je e-mail. Zo kun je je lettertype in je huisstijl gebruiken, terwijl de rest van je e-mail leesbaar blijft als afbeeldingen niet worden geladen.

Grondig testen

Ongeacht welke methoden je kiest, test je e-mails grondig, vooral wanneer je een nieuw ontwerp gebruikt. Stuur de e-mail naar jezelf op meerdere apparaten om ervoor te zorgen dat je tevreden bent met hoe deze op elk apparaat wordt weergegeven. Je kunt ook gebruikmaken van e-mailtestprogramma's zoals Litmus of Email on Acid om te testen op een breder scala aan apparaten.

Extra hulpbronnen