Custom Fonts: So nutzt du sie in deinen Emails

Custom Fonts Header

Schriftarten sind, ebenso wie Farben und Bilder, ein wichtiger Design-Bestandteil auch in Emails. Die passende Schriftart spiegelt im Idealfall die Marke wider und ist ein essentieller Teil der Markenidentität. Aber genauso wichtig: Sie sollte für gute Lesbarkeit und für eine positive Wahrnehmung beim Leser sorgen. Mit Custom Fonts, also benutzerdefinierten Schriftarten, kann das Markenimage untermauert, optisch die Ästhetik verbessert oder die Lesbarkeit maximiert werden. Ob Custom- oder Standard Font: Wichtig ist, für einen einheitlichen Look über alle Kanäle hinweg zu sorgen. Diesem kleinen Detail sollte also doch ein wenig Aufmerksamkeit geschenkt und im Email Design direkt mitgedacht werden, um an späterer Stelle mögliche Probleme mit der Lesbarkeit sowie der Anzeige zu umgehen. Wir erklären dir in diesem Artikel deshalb alles, was du rund um die Nutzung von Custom Fonts in Emails wissen musst.

Tim

19.09.2021

Tipps & Tricks

Web Safe Fonts vs. Web Fonts 

Generell lassen sich Schriften in zwei Typen unterscheiden: Web Safe Fonts (websichere Schriftarten) und Web Fonts (Web-Schriftarten). Klingt erstmal recht ähnlich, doch zwischen beiden gibt es deutliche Unterschiede. Bevor wir darauf eingehen, werfen wir kurz einen Blick darauf, wie Schriftarten in Emails funktionieren. Und zwar wird bei der Email-Programmierung die Schriftart mittels einer CSS-Eigenschaft, der “font-family”, angegeben. Hier kann durch die Angabe mehrerer Schriftartennamen auch sichergestellt werden, welche Fallback-Schrift angezeigt werden soll, wenn die erste Schrift nicht angezeigt werden kann. Die Fallback-Schrift ist also eine Ausweich-oder Ersatzschrift. Wird nur eine Schriftart bei der font-family hinterlegt, entscheidet der Email-Client, welche Fallback-Schrift angezeigt wird. Mit einer vorgegebenen Fallback-Schrift hast du also wesentlich mehr Kontrolle darüber, wie deine Email beim Empfänger angezeigt wird, aber dazu später mehr.

Web Safe Fonts 

Web Safe Fonts beinhalten alle Schriftarten, die auch auf deinem Computer installiert sind und vom Browser somit aus dem lokalen Verzeichnis gezogen werden. Jeder Computer hat bereits Schriftarten vorinstalliert − und diese werden als web-sicher deklariert. Ähnlich funktioniert es  bei Emails. Wenn du also einen Web Safe Font benutzt, besteht eine hohe Wahrscheinlichkeit, dass deine Newsletter-Abonnenten die Schriftart ebenfalls installiert haben und deine Email in ihrem Client wie gewünscht angezeigt wird. 

Typische websichere Schriften, die du bedenkenlos nutzen kannst, sind:

  • Arial
  • Verdana
  • Times New Roman
  • Helvetica 
  • Georgia

Neben der Sicherheit bezüglich der korrekten Anzeige dieser Schriftarten gibt es jedoch auch zwei kleine Nachteile. Computer haben nur eine gewisse Anzahl an Schriftarten vorinstalliert, manche mehr und manche weniger. Das bedeutet konkret: Du hast keine besonders große Auswahl, wenn du websichere Fonts verwenden möchtest. Der zweite Nachteil besteht in der fehlenden Einzigartigkeit solcher Schriften. Du kannst dir sicher sein, dass auch deine Konkurrenz Zugriff auf diese Fonts haben wird und dass deine Subscriber nicht unbedingt vom Hocker gehauen werden, wenn sie in Kontakt mit diesen (ihnen bereits bekannten) Schriftarten kommen. 

Möchtest du wissen, auf welchen Betriebssystemen welche Schriftarten vorinstalliert sind, bietet dir CSS-Fonts eine gute Übersicht, über den exakten Anteil an Computern und dementsprechend auch Nutzern der Fonts. Du wirst außerdem merken: Es gibt noch weitere websichere Schriften. Falls du also auf Nummer sicher gehen möchtest und trotzdem nach etwas Abwechslung suchst, wirst du dort vielleicht fündig.

Web Fonts 

Web Fonts werden entweder von einem externen Server (wie z.B. dem Adobe Toolkit oder Google Fonts) oder von einem selbst gehosteten Server (auf dem z.B. dein Custom Font liegt) gezogen. Dies gewährt dir eine quasi unendliche Auswahl an Schriftarten. Der Nachteil: Diese Schriften werden Empfängern in einigen Email-Clients eventuell nicht wie gewünscht angezeigt.

Inzwischen unterstützen etwa 50 % der wichtigsten Email-Clients Web Fonts. Die folgenden Clients bieten im Allgemeinen eine gute Unterstützung dieser:

  • iOS Mail
  • Apple Mail
  • Android (Standard Email-Client, nicht Gmail-App)
  • Outlook 2000
  • Outlook.com-Anwendung
  • Thunderbird

Jedoch hängt die Unterstützung auch davon ab, wie die Schrift in die Email eingebettet ist. Aber auch wenn Web Fonts nicht unterstützt werden, ist das kein Grund zur Panik. In diesem Fall greift ja die Fallback-Schrift, die stattdessen angezeigt wird. 

Falls du dich für Web Fonts entscheidest oder schon vorab ein wenig Inspiration brauchst, haben wir dir hier die größten und unserer Meinung auch besten Web Font Services aufgelistet:

Web Font Support

Warum Custom Fonts?

Wir halten fest: Nur sog. Safe Web bzw. Safe Email Fonts, wie z.B. Arial, Helvetica und Times, werden sicher in allen Email-Clients angezeigt. Warum sich also überhaupt den Aufwand mit benutzerdefinierten Schriften machen? Im Email Marketing ist es zum Teil immer noch üblich, die eigene Schrift in Bildern zu präsentieren, da Bilder von jedem Email-Client angezeigt werden. Der Nachteil hierbei ist jedoch, dass viele Email-Nutzer das Anzeigen von Bildern deaktiviert haben. Stattdessen wird lediglich ein kleiner ALT-Text erscheinen, der das Bild mit wenigen Worten umschreiben soll. Wenn du deinen Inhalt zusammen mit deiner einzigartigen Schrift nun aber extra in einem Bild verpackt hast, hast du ein Problem und dein Newsletter ist quasi wertlos für den Abonnenten. Individualisierte Web Fonts können dich unabhängiger von Bildern machen und dir eine Alternative bieten, mit denen du deinen Empfängern ein möglichst eindrucksvolles Erlebnis deiner Marke garantierst. 

Das Image einer Marke wird zudem geprägt durch offensichtliche gestalterische Merkmale, wie dem Logo, der Farbgebung und nicht zuletzt der Schrift. Alle Komponenten bilden das “Gesicht” der Marke und sollten sich möglichst auch im Email Marketing wiederfinden, um eine konsistente Marken-Kommunikation zu gewährleisten und Kunden eine einfache Orientierung zu ermöglichen. Ein Custom Font bietet dir definitiv mehr Vielfalt, Gestaltungsmöglichkeiten und kann das i-Tüpfelchen sein, dass deiner Markenwelt das gewisse Etwas sowie ein unverwechselbares Alleinstellungsmerkmal verleiht. Für ein einheitliches Gesamtbild und einen hohen Wiedererkennungswert, sollte die Schriftart, die in deinen Emails verwendet wird, idealerweise auch mit den Schriften auf deinen anderen Kommunikationskanälen zusammenpassen. Allerdings gibt es einige Email-spezifische Besonderheiten zu beachten. Denn: Die gewählte Schriftart trägt wesentlich dazu bei, ob deine Email gut lesbar ist. Außergewöhnliche Schriften kommen zwar seltener vor und heben sich leichter von der Masse ab, doch büßen sie dies häufig mit ihrer Lesbarkeit ein. Müssen sich deine Empfänger konzentrieren und anstrengen, um den Inhalt lesen zu können oder lenkt die Schriftart vielleicht sogar ab, kann dies negative Konsequenzen für die Beziehung zwischen dir und deinen Subscribern nach sich ziehen. Vielleicht hast du eben schon ganz automatisch an Kursivschrift gedacht und dich gefragt, ob sie generell für Emails ungeeignet ist. Die Antwort: Nein! Es gibt auch schwungvolle Schriftarten, die ein lesefreundliches Erlebnis bieten und sie sollten auf jeden Fall in deinen Newslettern Verwendung finden, wenn sie zu deiner Brand passen.

Custom Fonts Beispiele

Manchmal stellt sich die Frage, welche Schrift benutzt werden soll, auch gar nicht, da dies ganz klar in einem Brand Guide festgelegt ist und lediglich die Verwendung einer oder zwei spezifischer Schriften vorschreibt. Wenn es sich dabei um Custom Fonts handelt, müssen diese also verwendet werden.

Es gibt aber auch Fälle, wo dies absolut nicht sinnvoll ist, etwa weil sich die Schrift nur ganz schlecht lesen lässt oder tatsächlich nur ein ganz geringer Teil der Empfänger diese überhaupt angezeigt bekommen würde. Hier könnte man überlegen, einen anderen, ähnlichen Web Font zu nutzen oder auf einen Web Safe Font zurück zu greifen. Mit bestimmten Programmen kannst du herausfinden, über welchen Client deine Zielgruppe die Newsletter öffnet und somit sehen, ob deine Abonnenten die Email mit der eigenen Schriftart korrekt erhalten oder ob sie nur für einen kleinen Anteil sichtbar ist. Als gute Faustregel hat sich bewährt: Wenn die Mehrheit deiner Abonnenten einen Client benutzt, der deine Schrift unterstützt, bietet sich ein Web Font definitiv an. Sollten nur wenige deiner Abonnenten die Schriftart korrekt angezeigt bekommen, lohnt sich der Aufwand nicht, speziell wenn du den Web Font extra bezahlen musst.

Dunkin Donuts Custom Font

Auf was muss bei Fonts in Emails noch geachtet werden?

Serif vs. Sans Serif Schriften 

Falls du keine Vorgaben durch einen Brand Guide hast, stehst du vor der nächsten Entscheidung: Eine Schrift mit Serifen wählen oder doch lieber eine ohne nutzen? Und was sind Serifen überhaupt? Wir klären dich auf! 

Serifen-Schriften fassen alle Schriftarten zusammen, die am Ende jedes Zeichens Verzierungen oder Erweiterungen in Form von Strichen oder ähnlichem besitzen. Serifenlose Schriften haben dies nicht, die Zeichen enden demnach schlicht. Bei der Frage, welche Schriftart sich generell besser für Emails eignet, gehen die Meinungen der Marketer stark auseinander. Viele empfinden es durch die schwierigere Lesbarkeit als Risiko, Serif Fonts zu benutzen, während andere den Sans Serif Fonts eine gewisse Monotonie und Schlichtheit vorwerfen, die dem Effekt des Newsletters schaden könnte. Wir finden: Man sollte nicht verallgemeinern! Die Palette an Serifenschriften ist groß − neben einigen Schriften, die tatsächlich sehr verschnörkelt sind und dem Leser beim Entziffern definitiv keinen Gefallen tun, gibt es durchaus auch Serif Fonts, die sich für Emails eignen. Die bekannteste Schrift dieser Gattung ist Times New Roman und wird oft in Newslettern verwendet. Trotzdem ist nicht abzustreiten, dass serifenlose Schrift tendenziell besser gelesen werden kann.

Nicht zu viele Schriften verwenden!

Du solltest darauf achten, in deinen Emails maximal zwei verschiedene Schriften zu verwenden. Falls du mehr als eine Schriftart benutzte, musst du sicherstellen, dass diese sich gegenseitig ergänzen und nicht beißen. Mehrere Fonts gleichzeitig zu verwenden kann für den Leser schnell überfordernd und willkürlich wirken. Um den Fokus auf bestimmte Wörter oder Passagen innerhalb der Email zu legen, empfehlen wir, die Größe der Schrift zu variieren und nur eine Schriftart zu benutzen. 

Auf die Größe kommt es an!

Ja, richtig gehört! Schriftgrößen müssen gerade bei einem Wechsel der Schriftart zwingend berücksichtigt werden. Verschiedene Schriften haben nämlich unterschiedliche Zeichenhöhen und fallen daher anders groß aus, obwohl man an der eigentlichen Schriftgröße nichts verändert hat. Ganz allgemein liegt die beste Schriftgröße für Emails auf dem Desktop bei 14px und für Emails auf mobilen Geräten bei 16px.

Links und CTAs in der gleichen Schrift betiteln!

In praktisch jeder Email findet man Links zu externen Seiten oder Links, die als Call-To-Actions (CTAs) in Form von Buttons markiert sind. Dein Ziel ist es natürlich, möglichst viel Aufmerksamkeit deiner Abonnenten auf eben diese Elemente zu ziehen. Doch eine andere Schrift für diese Elemente zu benutzen als für den Rest der Email, ist eine schlechte Idee. Für einen stimmigen Gesamteindruck empfehlen wir wärmstens, die gleiche Schrift zu benutzen und fett zu hinterlegen. Kursive Schrift kann in diesem Fall auch ein probates Mittel sein, ist jedoch nur zu empfehlen, wenn die Lesbarkeit der Buttons dadurch nicht eingeschränkt wird.

Mach deine Email barrierefrei!

Accessibility ist das Stichwort, wenn es um Newsletter oder andere marketing-bezogene Emails geht. All deine Entscheidungen bezüglich der optimalen Schriftart sollten neben Image und Branding im Endeffekt auf die Barrierefreiheit abzielen und dafür sorgen, dass so viele Empfänger wie möglich deine Email ohne Einschränkungen oder Störungen jeglicher Art lesen können. Die wichtigsten Richtlinien zur Barrierefreiheit findest du außerdem hier.

Wie pflege ich einen Custom Font ein?

Kommen wir nun zum Wesentlichen: Der Implementierung deiner Schrift. Wenn die Schriftart, die du für deine Email verwenden möchtest, nicht schon auf dem Laptop oder mobilen Gerät enthalten ist, musst du sie erst in deine Email importieren oder einpflegen, bevor du sie nutzen kannst. Letztlich macht es kaum einen Unterschied, ob du statt einer Web-bzw. Email-sicheren Schrift, einen Google Font, Adobe Font oder eine benutzerdefinierte Schrift verwendest − die Schritte sind recht ähnlich. Im Folgenden zeigen wir dir, wie du einen Custom Font in deinem HTML-Template und in einem Klaviyo Drag & Drop Template einsetzen und nutzen kannst. Beachte: Die Einbettung in einem Drag & Drop Template unterscheidet sich je nach ESP.

1. Gelange an die URL deines Fonts

Zuerst benötigst du dafür die URL der Schriftart, die du in deine Email implementieren möchtest. Falls du einen Web Font Service benutzt, sollte dieser auch die URL deiner Schriftart haben. Falls du deine Schriftart selbst hostest, findest du die URL dort, wo der Font auf deinem Server liegt. Achte darauf, dass es sich um eine öffentliche URL handelt und diese nicht von einem ausschließlich lokalen Server kommt, ansonsten können deine Abonnenten die Schriftart nicht sehen und bekommen stattdessen einen Fallback-Font angezeigt.

2. Importiere deinen Font

Auch hier hast du wieder die Qual der Wahl, denn es stehen mehrere Methoden zur Verfügung, um deine Schriftart in der Email zu implementieren. Sie unterscheiden sich vor allem in der Ladegeschwindigkeit, in welcher der Custom Font angezeigt wird. Des Weiteren solltest du schlussendlich die Methode wählen, die dein ESP unterstützt. Viele ESPs ändern den Code und somit auch den deiner Schriftart beim Versand, sodass du Gefahr läufst, dass diese in deinen Emails nicht mehr richtig angezeigt wird. Im Folgenden haben wir die verschiedenen zur Auswahl stehenden Möglichkeiten anhand eines Beispiels mit der Schrift “Roboto” aufgelistet.

 

<Link>-Methode

Die Link-Methode ist eine relativ einfache Methode, um Schriftarten in deine Email einzupflegen. Wenn dein Web Font File lang ist, wird diese Methode allerdings zu einer kleinen Verzögerung bei dem Erscheinen der Schriftart führen. Füge einfach folgenden Code möglichst weit oben in den <head> deiner Email im HTML-Template: 

 

@Link Methode

 

@Import Methode

Die @import-Methode ist ebenfalls einfach umzusetzen. Platziere folgenden Code im <head> deiner Email zwischen den <style> Tags: 

 

@Import Methode

 

@font-face

Falls du deinen Web Font von einem externen Drittanbieter benutzt, werden dir normalerweise fünf File Formate angeboten: .eot, .woff, .woff2, .svg, und .ttf. Im Hinblick auf Emails werden .woff und .woff2 am besten unterstützt. Deshalb empfehlen wir dir, eine oder beide der Formate zu nutzen, falls dies möglich ist. Die @font-face Methode ist die einzige, bei der du entscheiden kannst, welches Dateiformat du importieren möchtest. Hier ist ein Beispiel, falls du einen Google Web Font (wie z.B. “Roboto”) benutzt und diesen importieren möchtest.

 

@Font-Face Methode

 

3. Wähle den richtigen Fallback Font

Wie wir eingangs schon kurz erklärt haben, benötigst du einen sogenannten Fallback-Font, wenn du eine Web-Schriftart benutzen möchtest. Es handelt sich um eine Ersatzschriftart, die angezeigt wird, wenn deine benutzerdefinierte Schriftart nicht unterstützt wird. Hier hat jeder Email-Client seine eigene bevorzugte Standardschriftart. Die drei gängigsten Desktop-Email-Clients haben z.B. die folgenden Standardeinstellungen:

  • Apple Mail = Helvetica
  • Gmail = Arial
  • Microsoft Outlook = Calibri

Diese werden aber nur angezeigt, wenn du selbst keine konkrete Fallback-Schrift hinterlegst. Bei der Auswahl einer geeigneten Fallback-Schrift gibt es einiges zu beachten. So sollte diese in jedem Fall große Ähnlichkeiten zu deinem benutzerdefinierten Font aufweisen, sodass auch durch sie die Eigenschaften und Designs deiner Brand nahezu perfekt getragen werden. Benutzt du also eine Serifenschrift, sollte dein Fallback-Font auch in der Familie der Serifenschriften beheimatet sein. Außerdem hilft es, sich die Höhe deiner Schriften einmal genauer anzuschauen. Die sogenannte x-Höhe hilft dir, vertikale Höhen deiner Schriftart zu vergleichen, da jede Schrift ihre eigene Größe besitzt. Dein Fallback-Font sollte also etwa die gleiche x-Höhe haben wie deine benutzerdefinierte Schriftart. Darüber hinaus sollte es sich um einen Web- bzw. Email Safe Font handeln, die auf jeden Fall angezeigt werden kann. Das begrenzt wiederum die Auswahl der Fallback-Schrift.

4. Binde deinen Custom Font in Emails ein

 

HTML-Template

Sobald du deine Schriftart importiert und einen Fallback-Font gewählt hast, ist es endlich an der Zeit, deinen Font in der HTML-Email einzubetten. Falls du über wenig oder gar keine HTML-Kenntnisse verfügst, empfiehlt es sich, dies einem Programmierer zu überlassen, damit der Tag an der richtigen Stelle im HTML-Code platziert wird. Im Prinzip wird ein <style>-Block im <head> eingefügt und die Schriftart (font-family) festgelegt (hier ein Beispiel anhand der @font-face Methode, die von einigen bevorzugt eingesetzt wird):

 

HTML-Template Code

 

Zur Erklärung: Font-Family ist die Schrift, die du verwenden möchtest (hier “Roboto”). Über Font-Style kannst du festlegen, ob die Schrift normal bzw. “regular” sein soll, oder vielleicht kursiv oder fett. Font-Weight ist die Stärke der Schrift; wenn du dir hier nicht sicher bist, wähle 400 aus. Die URL ist der Ort, an dem die Schrift gehostet wird. Im Body-Tag werden unter Font-Family die Fallback-Schriften hinzugefügt. Du kannst dies als eine Aneinanderreihung von Schriftarten sehen: Falls dein Client die erste Schriftart nicht unterstützt, zeigt er automatisch die nächste Schriftart in der Reihe an. In unserem Beispiel würde z.B. Gmail die erste Schriftart “Roboto” ignorieren, da es sich um einen Web Font handelt und stattdessen Verdana anzeigen. Falls Verdana nun auch nicht unterstützt werden würde (was sehr unwahrscheinlich ist, da es sich um einen Web Safe Font handelt), zeigt der Email-Client seinen “sans-serif” Standard-Font an.

 

Klaviyo Drag & Drop

Wenn du einen Custom Font nutzen möchtest, oder einen Font der bei einem Drittanbieter wie Google oder Adobe gehostet wird, kannst du dies in deinem Drag & Drop Template in Klaviyo tun. Wie schon zuvor beschrieben, musst du auch hier deinen Font an einem für Klaviyo zugänglichen Ort hosten (bei einem Custom Font). Ähnlich wie auch in einem HTML-Template, fügst du nun ein benutzerdefiniertes Code-Snippet ein − hier in dem Source-Code des ersten Textblocks. Im Beispiel wird die Schriftart “Neutra Text” verwendet. Wie du siehst, sieht das Snippet fast genauso aus wie in der HTML-Methode:

 

Klaviyo Code

 

 

Klaviyo Drag & Drop

 

Du musst das Code-Snippet immer nur im ersten Textblock deiner Email einfügen. Alle nachfolgenden Textblöcke enthalten dann automatisch deine benutzerdefinierte Schrift. Denn sobald das Snippet im Quellcode hinterlegt ist, wird dein Custom Font auf jeden Text angewandt, der auf den Standardstil (Normal, Überschrift 1, Überschrift 2 usw.) eingestellt ist.

 

Paragraph Menu

 

Eine ausführliche Anleitung und wie du einen Google- oder Adobe Font in dein Drag & Drop Template bei Klaviyo einbinden kannst, findest du hier.

Fazit

Auch wenn es bei benutzerdefinierten Schriftarten einiges zu beachten gibt, sorgen sie richtig eingesetzt für eine hohe Brand Recognition und unterstützen das Design und somit das Markenimage deines Unternehmens. Mit ihnen verleihst du deinen Emails ein einzigartiges Aussehen und kannst sogar dafür sorgen, Lesbarkeit und Struktur zu optimieren. Nutzt du Web Safe Fonts, so gehst du auf Nummer sicher, denn die Wahrscheinlichkeit ist hoch, dass deine Abonnenten diese Schriftarten vorinstalliert haben, mühelos lesen können und deine Email angezeigt wird wie gewünscht. Möchtest du aber mehr Auswahlmöglichkeiten oder bist du durch einen Brand Guide an einen Custom, Google oder Adobe Font gebunden, stehen dir verschiedene Möglichkeiten zur Verfügung und die Einbettung von Custom Fonts in Emails ist längst kein Hexenwerk mehr. Stelle aber in jedem Fall sicher, eine geeignete Fallback-Schriftart zu hinterlegen, die Web Safe ist und deiner benutzerdefinierten Schrift ähnelt. Dann sollte deinem einheitlichen Branding und einem optimalen Email-Erlebnis für alle Empfänger nichts mehr im Wege stehen. Zu guter letzt gilt: Testen, Testen, Testen. Schau dir deine Email auf verschiedenen Email-Clients an und achte darauf, wie deine Schrift angezeigt wird und ob die Darstellung dem gewünschten Ergebnis entspricht.