So finden und verwenden Sie E-Mail-unterstützte Schriftarten für Design und Lesbarkeit

Veröffentlicht: 2021-08-18

Haben Sie schon einmal zufällig eine E-Mail erstellt und die erste Schriftart ausgewählt, die Sie gesehen haben? Klicken Sie auf Senden. Nennen Sie es gut zu gehen?

Wenn es um E-Mail-Design geht, kann die Wahl Ihrer Schriftart einen großen Unterschied machen, ob ein Abonnent sich durchklickt oder weitergeht. Sie tragen nicht nur dazu bei, Ihre E-Mail optisch ansprechender zu gestalten, sondern können auch die allgemeine Lesbarkeit verbessern. Aussehen, Anordnung und Stil wirken zusammen, um eine einzigartige Typografie zu schaffen – hier kann Ihre E-Mail glänzen.

Es ist zwar nichts falsch daran, traditionelle Schriftarten wie Arial oder Times New Roman zu verwenden, um Ihre Nachricht zu kommunizieren, es gibt jedoch viele einzigartige E-Mail-unterstützte Schriftarten, die Ihre Kampagnen auf die nächste Stufe heben.

Wenn Sie sich fragen, wie Sie E-Mail-unterstützte Webfonts finden und verwenden können, um Ihre E-Mail-Kampagne auf Hochtouren zu bringen – wir sind für Sie da! Sehen wir uns an, wie Sie Ihr Engagement und Ihre Lesbarkeit verbessern können, indem Sie Webfonts richtig verwenden.

Was sind Webfonts?

Bevor Sie kreativ werden, müssen Sie den Unterschied zwischen Webfonts und websicheren Fonts kennen.

  • Websichere Schriftarten: Diese Schriftarten sind höchstwahrscheinlich auf allen wichtigen Betriebssystemen und E-Mail-Anbietern zu finden, darunter Arial, Verdana, Georgia, Times New Roman und Courier. Marken verwenden diese weiterhin, weil sie klassisch sind und auf der ganzen Linie richtig gerendert werden.

  • Webfonts: Webfonts, die speziell für Websites entwickelt und lizenziert wurden, werden standardmäßig nicht auf allen Geräten und Betriebssystemen gefunden. Zu den Webfonts gehören Roboto und Open Sans.

Obwohl Sie manchmal traditionelle Schriftarten verwenden müssen, ermöglichen Webfonts dem Designer mehr Kreativität, um die Botschaft und Ästhetik der Marke zu vermitteln, ohne auf vorinstallierten Text beschränkt zu sein.

Warum sind E-Mail-unterstützte Schriftarten wichtig?

Als E-Mail-Marketer wissen Sie, dass es wichtig ist, mit Stil, Farben und Typografie auf der Marke zu bleiben. Sie müssen jedoch auch eine ansprechende Nachricht erstellen, die bei Ihren Abonnenten Anklang findet. E-Mail-unterstützte Schriftarten fungieren als Erweiterung Ihrer Marke und ermöglichen es Ihnen, Text in der Überschrift, im Hauptteil und im Bild-Overlay zu verwenden, um Ihre Botschaft kreativ und zugänglich zu gestalten.

Wenn Ihre Marke ein bisschen albern ist, können Sie groß rauskommen und einen lustigen, stilvollen Typ verwenden. Wenn Sie jedoch berichtenswerter sind, sollten Sie sich an etwas Standardmäßigeres halten. Webfonts bieten Ihnen diese Flexibilität und Kreativität.

Wo finden Sie Webfonts?

Obwohl es viele Anbieter von Webfonts gibt, möchten Sie sicherstellen, dass das Unternehmen Webfonts in E-Mails lizenziert (nicht nur auf Websites oder auf Mobilgeräten) und Sie befolgen deren Verteilungsrichtlinien. Zu den empfohlenen E-Mail-unterstützten Schriftartenanbietern gehören:

  • Google-Schriften

  • Typekit von Adobe

  • MyFonts

  • Handelstyp

  • Schriftart Frühling

  • Schriften-Shop

Welche E-Mail-Clients unterstützen Webfonts?

Wenn Sie über websichere Schriftarten hinausgehen, verwenden Sie Schriftarten, die beim Öffnen der Nachrichten heruntergeladen werden. Es ist wichtig zu beachten, dass nicht alle Geräte bestimmte Schriftarten unterstützen – daher richten Sie Cascading Style Sheets ein, um „Schriftartenstapel“ zu erstellen. Diese Schriftartenstapel werden als Backups verwendet, falls Ihre ausgewählte Schriftart nicht integriert wird.

Nachdem Sie Ihre Webfonts ausgewählt haben, ist es wichtig zu berücksichtigen, wie der tatsächliche E-Mail-Dienstanbieter angezeigt wird. Normalerweise bieten diese E-Mail-Clients Unterstützung für Webfonts:

  • iOS-Mail

  • Apple-Mail

  • Android (Standard-Mail-Client)

  • Outlook 2000

  • Outlook.com

  • Donnervogel

Wenn ein E-Mail-Anbieter keine Webfonts anzeigt – es ist noch nicht alles verloren – richten Sie diese praktischen Font-Stacks als Backup ein. Schriftartenstapel stellen sicher, dass Ihre E-Mail immer noch eine ähnliche Ästhetik hat, die Sie ursprünglich beabsichtigt haben. Darüber hinaus verfügt jeder E-Mail-Client über eine Standardschriftart, die Abonnenten anstelle Ihrer Webschriftart sehen. Die Standardeinstellungen umfassen:

  • Google Mail: Arial

  • Apple Mail: Helvetica

  • Microsoft Outlook: Calibri

So wählen Sie die richtigen Webfonts für Ihre E-Mail-Kampagne

Nachdem Sie nun die Grundlagen von Webfonts verstanden haben, ist es an der Zeit, die besten Möglichkeiten zur Auswahl der richtigen Typografie für Ihre E-Mail-Kampagnen zu entdecken. E-Mail-unterstützte Schriftarten sind entscheidend für die Übermittlung Ihrer Nachricht und die Möglichkeit, Klickraten und Konversionsraten zu erhöhen.

Stellen Sie sich das so vor: Menschen sind visuell. Wie oft haben Sie ein Produkt schon allein wegen der bunten, lustigen Verpackung im Supermarkt abgeholt? Das gleiche gilt für E-Mails. Ihre Abonnenten öffnen, klicken und kaufen eher über Ihre E-Mails, wenn sie nicht nur der Inhalt anspricht, sondern auch in einem optisch ansprechenden Design geliefert wird.

Mit Hunderten von verschiedenen Webfonts zur Auswahl, hier sind drei Möglichkeiten, Ihre Auswahl einzuschränken, um die beste E-Mail-unterstützte Schriftart für Ihre Kampagnen auszuwählen.

1. Wählen Sie die richtige Körperschriftart aus.

Ihre Körperschrift sollte unterscheidbar und für Menschen mit Sehbehinderungen lesbar sein. Wenn Sie mehr Inhalt im Hauptteil haben, wird empfohlen, eine Serifenschrift wie Georgia und Verdana zu verwenden, die Text mit längeren Blöcken enthält.

Während Arial und Helvetica einst die beliebteste Wahl waren, sehen Buchstaben wie p, b, q und d alle zu einheitlich aus und sind schwieriger zu unterscheiden. Bei einer Serifenschrift werden zusätzliche Striche hinzugefügt, um den Buchstaben mehr Charakter zu verleihen. Da E-Mails gescannt werden müssen, helfen Briefe, die breit sind und einen einheitlichen Abstand aufweisen, den Abonnenten beim schnellen Lesen.

Serifen- und serifenlose E-Mail-Schriften

Quelle: W3Schools

Nehmen Sie dieses Beispiel CAVA Dips, das eine leicht lesbare Serifenschrift verwendet, gepaart mit einer stilisierten Überschrift und einem Call-to-Action.

Nehmen Sie dieses Beispiel CAVA Dips, das eine leicht lesbare Serifenschrift verwendet, gepaart mit einer stilisierten Überschrift und einem Call-to-Action.

Quelle: Wirklich gute E-Mails

Während Serifen ideal für längere E-Mails sind, ist die Verwendung einer serifenlosen Schriftart immer noch lesbar und akzeptabel. Mit nur einer Zeile Fließtext hat Cater 2 Me ihr Webfont-Design auf den Punkt gebracht. Es packt einen Schlag und kommt direkt auf den Punkt, ohne abzulenken.

Während Serifen ideal für längere E-Mails sind, ist die Verwendung einer serifenlosen Schriftart immer noch lesbar und akzeptabel. Mit nur einer Zeile Fließtext hat Cater 2 Me ihr Webfont-Design auf den Punkt gebracht.

Quelle: Wirklich gute E-Mails

2. Verwenden Sie eine stilisierte Kopfzeile mit einer gepaarten Körperschrift.

Obwohl dies „einfacher“ erscheinen mag, hilft die Verwendung derselben Schriftart für Ihre Kopfzeile und Ihren Textkörper dabei, eine bessere Markenidentität aufzubauen und sicherzustellen, dass die gesamte Nachricht im E-Mail-Client angezeigt wird. Stellen Sie bei der Entwicklung Ihrer E-Mail sicher, dass Kopfzeile und Textkörper unterschiedliche Größen haben und unterschiedliche Polsterungen und Formatierungen aufweisen, um die beiden besser unterscheiden zu können. Es ist auch wichtig zu beachten, dass je mehr Webfonts Sie haben, desto länger dauert das Laden Ihrer E-Mail – ein weiterer Vorteil der Verwendung nur einer Schriftart.

Nehmen Sie dieses Beispiel von Lululemon. Das Unternehmen verwendet Überschriften, die doppelt so groß sind wie der Fließtext, mit ausreichendem Abstand zwischen den beiden. Abonnenten können leicht zwischen den beiden Elementen unterscheiden und gleichzeitig ein klares, klassisches Design schaffen.

Das Unternehmen verwendet Überschriften, die doppelt so groß sind wie der Fließtext, mit ausreichendem Abstand zwischen den beiden.

Quelle: Wirklich gute E-Mails

Wenn Sie jedoch kreativer sein möchten, kann das Kombinieren verschiedener Schriftarten, die sich gegenseitig ergänzen, dazu beitragen, sich im Posteingang abzuheben und die Abonnenten zu beschäftigen. Es wird empfohlen, nur zwei Webfonts pro E-Mail zu verwenden. Dies kann jedoch schwierig sein, da Sie nicht möchten, dass die Schriftarten unlesbar und unzugänglich sind. Wenn Sie nach einer Möglichkeit suchen, vergleichbare Schriftarten zu entdecken, können Sie Font Pair verwenden, um die wirkungsvollsten Schriftartpaare für Ihr E-Mail-Design zu finden.

Tattly macht einen großartigen Job darin, zwei verschiedene Schriftarten miteinander zu kombinieren und gleichzeitig ihren Markenstandards gerecht zu werden. Die Überschrift erregt sofort Ihre Aufmerksamkeit und lenkt Ihren Blick auf den Körper, um zu sehen, was der Verkauf mit sich bringt. Aufgrund der Bildsprache können Sie feststellen, dass diese Marke unbeschwerter ist – also funktionieren die verschiedenen Schriftarten.

Tattly macht einen großartigen Job darin, zwei verschiedene Schriftarten miteinander zu kombinieren und gleichzeitig ihren Markenstandards gerecht zu werden.

Quelle: Wirklich gute E-Mails

3. Erstellen Sie eine konsistente Schriftstruktur.

Nachdem Sie Ihre Webfonts ausgewählt haben, müssen Sie viele andere Elemente berücksichtigen, z. B. Schriftgröße, Abstände, Links und Schaltflächen, Farben und mehr. Diese Funktionen tragen dazu bei, dass Ihre E-Mails konsistent bleiben, egal in welcher Phase der Kundenreise sich Ihre Abonnenten befinden.

  • Schriftart: Für den Fließtext sollte Ihre Schriftart auf Desktops 14px und auf Mobilgeräten 16px groß sein. Wenn Sie ein responsives Design verwenden, stellen Sie sicher, dass Ihre E-Mail-unterstützten Schriftarten automatisch zwischen den Bildschirmgrößen schwanken.

  • Abstand: Achten Sie insbesondere zwischen Überschrift und Fließtext auf eine breite Zeilenhöhe zwischen 22px und 24px. Zu enge Leerzeichen können die Lesbarkeit und das Engagement beeinträchtigen.

  • Links und Schaltflächen: Verwenden Sie beim Erstellen von Links und Schaltflächen keine separate Schriftart, um Ihren Fokussatz zu unterstreichen und zu überprüfen, ob er den Ankerlink enthält. Schaltflächen sind eine großartige stilisierte Möglichkeit, die Aufmerksamkeit auf Ihren Call-to-Action zu lenken.

  • Farben: Verwenden Sie nur drei Farben, die sich mit Ihren Markenstandards identifizieren – eine Farbe für Ihren Header, eine für Ihren Text und die letzte für Ihre Links.

Einpacken

Wenn Sie in Erwägung ziehen, Webfonts in Ihren E-Mail-Kampagnen zu verwenden, sagen wir: Los! Webfonts sind eine großartige Möglichkeit, Ihr Publikum zu fesseln und Ihre Interessenten mit wirkungsvollem E-Mail-Design zu Kunden zu machen. Achten Sie bei der Auswahl Ihrer E-Mail-unterstützten Schriftarten auf Folgendes:

  • Backup-Font-Stacks erstellen

  • Verwenden Sie einen Serifenschriftstil

  • Kopfzeilentext mit Fließtext koppeln

  • Entwickeln Sie eine konsistente Schriftstruktur für alle zukünftigen Kampagnen

Sind Sie bereit, Ihre eigenen E-Mail-Kampagnen mit Webfonts zu entwerfen? Emma bietet sowohl einen Drag-and-Drop-Editor als auch die Möglichkeit, E-Mails komplett neu zu programmieren. Probieren Sie noch heute eine Demo aus, um mehr zu erfahren!