Grundlegendes zu Schriftarten in E-Mails

Übersicht

Erfahre mehr über die Möglichkeiten und Einschränkungen der Verwendung von Schriftarten online und darüber, wie du E-Mails sendest, die zu deiner Marke passen.

So funktionieren Schriftarten

Schriftarten sind Darstellungen von Text und können in Print- oder Online-Medien verwendet werden. Vielleicht kennst du einige der gängigeren Schriftarten wie Arial oder Times New Roman, aber es gibt Tausende anderer Schriftarten, die du nutzen kannst, um deine Marke zu kommunizieren und zu repräsentieren.

Bei Online-Medien (z. B. Websites oder E-Mails) sind deine Schriftartoptionen nahezu unbegrenzt. Wenn du deine Kreation jedoch mit jemand anderem teilst, sieht sie möglicherweise nicht genau gleich aus, da nicht alle Geräte Zugriff auf dieselben Schriftarten haben.

Es gibt 2 Hauptmöglichkeiten, wie ein Gerät auf eine Schriftart zugreifen und sie verwenden kann: Systemschriftarten (d. h. Schriftarten, die auf dem Gerät gespeichert sind, das du verwendest) und Webschriftarten (d. h. Schriftarten, die von einem externen Server geladen werden)

Über Systemschriftarten

Computer und Smartphones sind mit einer Vielzahl von Schriftarten vorinstalliert. Es gibt einige häufig installierte Schriftarten (die meisten Geräte haben zum Beispiel Georgia und Verdana), aber Geräte können sich stark darin unterscheiden, was sie standardmäßig enthalten. Schriftarten, die von den meisten Geräten verwendet werden, werden „websichere“ Schriftarten genannt.

Über Webfonts

Im Gegensatz zu web-sicheren Schriftarten werden Webfonts gleichzeitig mit den Inhalten, die du dir ansiehst, von einem externen Server geladen. Benutzerdefinierte Schriftarten sind in der Regel Webfonts. Wenn du eine Webschriftart verwendest, solltest du auch eine web-sichere Fallback-Schriftart festlegen, falls ein bestimmtes Gerät deine Webschriftart nicht laden kann.

Über Fallback-Schriftarten

Wenn du online etwas ansiehst, egal ob eine Webseite oder eine E-Mail, gibt es im Hintergrund CSS (Code, der zum Gestalten von Online-Inhalten verwendet wird), das deinem Gerät mitteilt, welche Schriftart angezeigt werden soll. Wenn dein Gerät nicht auf die Schriftart zugreifen kann, prüft es das CSS auf eine „Ersatzschriftart“ (eine Schriftart oder mehrere Schriftarten, die von der Person ausgewählt wurden, die die Webseite oder E-Mail-Nachricht erstellt hat, damit sie verwendet werden, falls die bevorzugte Schriftart nicht verfügbar war). Ersatzschriftarten sollten websichere Schriftarten sein, die die meisten Geräte verwenden können. Sie geben dir mehr Kontrolle darüber, wie deine Nachricht angezeigt wird, wenn jemand sie auf einem Gerät ansieht, das keine benutzerdefinierten/Web-Schriftarten unterstützt.

Wenn keine Ausweichschriftart verfügbar ist oder wenn die Ausweichschriftart vom verwendeten Gerät nicht unterstützt wird, verwendet das Gerät eine Standardschriftart wie Arial oder Times New Roman. Standardschriftarten variieren je nach Gerät und App stark.

So funktionieren Schriftarten in E-Mails

Manche E-Mail-Clients unterstützen Webfonts, andere jedoch nicht. Wenn jemand deine E-Mail in einem Posteingang oder auf einem Gerät öffnet, das keine Webfonts unterstützt, wird stattdessen eine Standardschriftart angezeigt. Du kannst steuern, welche Systemschriftarten als Backups verwendet werden, indem du eine Fallback-Schriftart festlegst.

Wenn jemand deine E-Mail auf einem Gerät öffnet, das Webfonts unterstützt, wird die Schriftart über die in der CSS deiner E-Mail angegebene URL geladen. Wenn das Gerät auf die Schriftart zugreifen kann, wird es sie anzeigen; andernfalls wechselt es zu den Fallback-Schriftarten.

Die Unterstützung von Webfonts hängt von der E-Mail-App, ihrer Version und der Art des E-Mail-Kontos ab. Beispiele für Clients mit Webfont-Unterstützung sind:

• Apple Mail
• iOS Mail (die Standard-E-Mail-App auf iOS)
• Einige Android-E-Mail-Apps (die Unterstützung variiert je nach App; Android 2.3 unterstützt die von Google und Adobe Fonts verwendete @import -Methode nicht)
• Samsung Email auf Android, außer bei Verwendung einer Microsoft-E-Mail-Adresse wie Outlook.com oder Hotmail
• Outlook für Mac 2011 und 2016; Outlook für Mac 16.80 unterstützt keine Webfonts

Gmail, einschließlich der Gmail-App auf Android, unterstützt in der Regel keine Webfonts. Gmails Desktop-Webmail kann Roboto und Google Sans anzeigen, weil Gmail sie in seinen eigenen Stilen enthält. Das bedeutet nicht, dass Gmail andere benutzerdefinierte Schriftarten aus deiner E-Mail laden kann. Lege eine Fallback-Schriftart fest und teste deine E-Mail in den Gmail-Apps, die deine Empfänger*innen verwenden.

Einzelheiten nach E-Mail-App und Version findest du unter Tabelle zur Unterstützung von Webfonts bei Can I email.

Schriftarten in deinen E-Mails optimieren

Die beste Möglichkeit, um sicherzustellen, dass deine E-Mail auf allen Geräten einheitlich aussieht, ist die Verwendung einer Websafe-Schriftart. Klaviyos Standardschriftarten sind in der Regel web-sicher. Du findest die Schriftarten, die Klaviyo bereitstellt, unter:

• Inhalt > Medien und Marke > Marke: Wähle Schriftarten aus. Wenn du stattdessen Stil siehst, wähle diese Option aus, um den Bereich Schriftarten zu finden.
• Das Panel Stile bearbeiten im E-Mail-Vorlagen-Editor
• Die Symbolleiste zur Textformatierung beim Bearbeiten von Text in einem Textblock oder die Schriftart-Steuerelemente in anderen Blöcken, die Text enthalten
• Das Bedienfeld Stile bearbeiten im Anmeldeformular-Editor

Tipps zur Verwendung benutzerdefinierter Schriftarten

Wenn du lieber eine benutzerdefinierte Schriftart verwenden möchtest, nutze die folgenden Tipps, um sicherzustellen, dass deine E-Mails auf allen Geräten gut gestaltet aussehen.

Fallback-Schriftarten verwenden

Wähle eine web-sichere Fallback-Schriftart aus, die so gut wie möglich zu deiner benutzerdefinierten Schriftart passt. Du kannst beim Konfigurieren der benutzerdefinierten Schriftart eine Fallback-Schriftart aus Klaviyos Standardschriftarten auswählen.

Text in Bildern verwenden

Auch wenn eine reine Bild-E-Mail deiner Zustellbarkeit schaden kann, kannst du strategisch eine Kombination aus Text in Bildern und Text in Textblöcken verwenden, um eine E-Mail zu erstellen, die zu deiner Marke passt. Wähle für deine Überschriften und Call-to-Actions (CTAs) eine benutzerdefinierte, markenkonforme Schriftart und kombiniere sie mit einer websicheren Schriftart für deinen Fließtext. Halte auch wichtige Informationen und den wichtigsten CTA in Text- oder Button-Blöcken bereit, damit Empfänger*innen sie auch dann nutzen können, wenn Bilder nicht geladen werden.

Verwende Bilder, die deine Schriftart enthalten, für ausgewählten Text, und stelle sicher, dass du Alt-Text hinzufügst, wenn du die Bilder zu deiner E-Mail hinzufügst. Wende dann die websichere Schriftart auf den Rest des Textes in deiner E-Mail an. So kannst du deine Markenschriftart verwenden und gleichzeitig den Rest deiner E-Mail lesbar halten, wenn Bilder nicht geladen werden.

Teste gründlich

Unabhängig davon, welche Methoden du auswählst, teste deine E-Mails gründlich, besonders wenn du ein neues Design verwendest. Sende die E-Mail an dich selbst auf mehreren Geräten, um sicherzustellen, dass du mit der Darstellung auf jedem Gerät zufrieden bist. Du kannst auch E-Mail-Testprogramme wie Litmus oder Email on Acid verwenden, um mit einer größeren Bandbreite an Geräten zu testen.

Weitere Ressourcen