Beste Schriftarten für E-Mail: Tipps und Tricks zur Verwendung

Eines der auffälligsten Bedenken beim Erstellen vom E-Mails ist die Auswahl des Fonts. Gewicht, Größe, Breite, Farbe, Form, Abstand … Ist alles wichtig? Ja, ist es, aber das wichtigste ist eines zu wählen, das leicht zu lesen ist, alle anderen Font-Funktionen sind nebensächlich.

Sehen Sie sich unser kurzes Video über Schriften an, ihre Varianten und wie dekorative Schriften auf Stripo anwenden. Aber die Hauptsache – wie Sie die gleiche Schriftart für Ihre E-Mails auswählen:

Es gibt zwei Optionen, die Sie bei der Auswahl des Fonts für Ihre E-Mails haben. Die erste Option ist über die Auswahl eines Web-Safe-Fonts, dies ist ein Standard Font und welches standardmäßig bei den meisten OS mitgeliefert und in den meisten E-Mail-Clients verwendet wird. Hier ist die Liste der Top 10 Web Safe Fonts, die Sie mit der mit 100% Garantie, dass es von jedermann auf die gleiche Weise gesehen wird so wie Sie es sehen, verwenden können:

• Arial
• Helvetica
• Times New Roman
• Verdana
• Courier / Courier New
• Tahoma
• Georgia
• Palatino
• Trebuchet MS
• Geneva

Die nächste Option ist, ein Web-Font mit einzuschließen, aber es gibt viele Risiken, dass es nicht richtig angezeigt werden wird, weil der E-Mail-Client diese Font-Art nicht unterstützt. Im letzteren Fall wird das Web-Font auf ein Standard-Font zurückgezogen.

Hier ist die Liste der Standard-Fonts für die beliebtesten E-Mail-Clienten:

• iCloud Mail benutzt Helvetica als Standard-Font.
• Gmail benutzt Arial.
• Microsoft Outlook älteste Versionen benutzen oft Calibri.
• Outlook 2007/2010/2013 hat Times New Roman als Erzatz-Font.

Wie wählt man das E-Mail-Font richtig?

Wenn Sie sich nur auf Ihre persönliche Meinung verlassen, besteht die Gefahr, dass niemand Ihre Gedanken zum besten Font teilt und Ihre Nachricht wie eine Nachricht aus der Vergangenheit aussieht oder so benutzerfreundlich wie Leute im öffentlichen Verkehr am frühen Morgen sein wird.

Wenn Sie zu viele Fonts verwenden, erscheint es im besten Fall sehr kompliziert und im schlimmsten ärgerlich. Nehmen Sie nur ein oder zwei Fonts für eine E-Mail. Im Ideal-Fall, reicht es nur ein Font zu verwenden, aber verwenden Sie verschiedene Größen: eine, um den Header hervorzuheben und eine andere für den Restinhalt.

Tatsächlich gibt es nur zwei Möglichkeiten, ein Font auszuwählen. Sie können einen Web-Safe-Font wählen und sicher sein, dass es für alle gleich aussieht oder Sie fügen Sie einen Web-Font hinzu und verlassen sich darauf, dass jeder die E-Mail-Clienten, die diese unterstützen nutzen, dies ist fast unmöglich, weil Gmail, Yahoo Mail und Outlook 2007 / 10/13/16 keine Web-Fonts unterstützen und ehrlich gesagt, mehr oder weniger als iPhone und iPad Benutzer können sie sehen. Also empfehlen wir keine Web-Fonts zu verwenden, damit die Benutzererfahrung nicht geschädigt wird.

Das Hauptmerkmal des Fonts Ihres Inhalts ist, wie oben erwähnt, die Lesbarkeit. Was könnte dem hinzugefügt werden? Ein weiteres wichtiges Merkmal, welches ein Teil der Lesbarkeit ist, ist Leserlichkeit. Es ist nicht exakt das gleiche. In einem Font können einige Zeichen lesbar sein und einige nicht. Natürlich ist der lesbare Text besser und schneller zu lesen, also achten Sie darauf, das alle Zeichen sichtbar, klar und unverwechselbar sind.

Das Experiment über die Lesbarkeit von Fonts wurde von Norbert Schwarz und Hyunjin Song im Jahr 2010 zur Verfügung gestellt. Die Ergebnisse waren beeindruckend. Sie verbringen fast zweimal soviel Zeit damit dekorative Fonts zu lesen als Standard und leicht zu lesende Fonts:

Welches wählen ein Serif oder ein Sans Serif Font?

Ein weiterer Punkt ist, zwischen Serif und Sans Serif Fonts zu wählen. Was ist der Unterschied?

Serif-Fonts könnt man als Fonts definieren, die eine kleine Linie am Ende jedes Zeichens haben. Die beliebtesten Serif-Fonts sind Times New Roman und Georgia.

Sans-Serif-Fonts sind die ohne dekorative Linie am Ende jedes Symbols. Die beliebtesten Sans-Serif-Fonts sind Arial, Trebuchet MS und Helvetica.

Während meiner Recherchen habe ich mehrere Quellen gefunden, welche behaupten dass Serif-Fonts am besten für E-Mails geeignet sind, aber ich glaube, das ist komplett gelogen. Basierend auf der Annahme, dass E-Mails nur Online mit dem Desktop oder dem mobilen Bildschirm betrachtet werden, sind Sans Serif Fonts die am besten geeigneten. Es ist einfacher, Sans-Serif-Zeichen vom Bildschirm abzulesen.

Eine weitere interessante Tatsache ist, dass  der Artikel beim Beefree E-Mail-Design-Blog die Verwendung von Serif-Fonts für contentlastige E-Mails empfiehlt und selbst Sans-Serif als Blog-Font verwendet:

Also, warum benutzen sie nicht Serif für Blog-Artikel, wenn es denn so perfekt ist? Ich glaube, das ist ein Beweis dafür, dass Sans Serif besser ist, weil die gleiche Regel gilt ebenso für Webseiten wie für E-Mails. Benutzt ein Serif nur für Header und Subheader wenn unbedingt nötig.

Font Größe

Wenn Sie das Font ändern, stellen Sie sicher, dass das, welches Sie nehmen nicht kleiner aussieht als das vorherige. Oft haben verschiedene Fonts unterschiedliche Symbolhöhen, also wird das gleiche 14px Font aufgrund der gewählten Font-Familie anders sein.

Die beste Praxis ist es, 14px und höhere Fonts für Desktop-Benutzer und 16px für Benutzer mobiler Geräte zu verwenden. Wenn Sie eine reaktives Template verwenden, gehen Sie sicher, dass die Zeichengröße für die mobile E-Mail-Version automatisch erhöht wird.

Ich habe bei Stripo ein E-Mail-Template erstellt, welches es möglich macht, verschiedene Abmessungen der gleichen Fonts zu vergleichen. Hier sind die Ergebnisse:

Als Ergebnis sehen die 16px Fonts fantastisch aus. Ich würde es lieber für Desktops und mobile Geräte verwenden.

Leerzeichen

Leerzeichen, sowohl zwischen den Absätzen wie auch zwischen den Textzeilen, sind entscheidend. Achten Sie darauf, dass Ihr Font ausreichende Leerzeichen zwischen den Zeilen hat. Die am weitesten verbreitete Linienhöhe variiert von 22px bis 24px. Mit anderen Worten, der perfekte Zeilenabstand für E-Mails ist um die 1,5em, was in Pixeln 24 ist.

Noch etwas worauf man achten sollte sind Leerzeichen zwischen den Zeichen. Es gibt keine endgültige Meinung, welches besser ist: das schmale Leerzeichen-Font oder das breite.

Georgia und Times New Roman bieten zu schmale Leerzeichen zwischen den Zeichen, was die Lesbarkeit stark beeinflusst. Courier Font und Courier Neu haben, wie ich finde, eine gute Distanz zwischen den Zeichen. Vielleicht sind diese Fonts deshalb in 2017 so beliebt.

Verwenden Sie Leerzeichen zwischen den E-Mail-Elementen. Wenn die E-Mail ein Bild hat, gehen Sie sicher, dass Sie Leerzeichen vor und nach dem Bild haben, das verbessert die Lesbarkeit erheblich. Natürlich ist es besser, grafische Elemente wie Bilder zu zentrieren.

Hier ein Beispiel, wo die Leerzeichen nicht beachtet wurden:

Können Sie sich vorstellen, dass dies nur ein Absatz aus der E-Mail ist, die über 1500 Wörter enthält? Es ist offensichtlich, dass man besser weniger als mehr haben sollte.

Hier noch ein weiteres Beispiel:

Dieses ist noch schlimmer, weil das Font grau ist, was zu schlechter Sichtbarkeit führt, das Font ist zu klein und natürlich sag ich besser nichts zu den Leerzeichen. Ja, sie existieren aber das hilft nichts. Die Sätze sind zu lang.

Links & Buttons

Verwenden Sie keine separaten Fonts um die Links zu unterstreichen. Setzen Sie niemals Links ohne Ankertext. Der Text auf den Ankern sollte erklären, wo dieser Link hinführt und ein organischer Teil des Textes sein. Verwenden Sie keine Wörter wie „hier“ oder „Link“ als Ankertext. Diese sind zu kurz und zu allgemein, um Interesse zu wecken.

Buttons sind das gleiche wie Links, aber sie haben eine interaktivere Form für Benutzer. Es ist besser, um beides in Ihren E-Mails zu verwenden. Wenn Sie einen Link geben, um einen Artikel zu lesen, erstellen Sie einen Textlink und wenn Sie einen Link geben, um ein Produkt auszuprobieren, benutzen Sie einfach gewöhnliche Buttons.

Eine der besten Praktiken ist es, Links mit der gleichen Farbe wie ein Logo zu erstellen. Es sieht gut aus, sehen Sie selbst:

Es gibt keine genaue Regel für welche Farbe für Buttons verwendet werden sollte, aber es ist besser, sich auf  Farbpsychologie  zu verlassen und zu versuchen, das Designkonzept nicht mit zu lauter Farbwiedergabe zu ruinieren.

Es gibt zwei Fonts die für Buttons besser geeignet sind: Georgia und Verdana. Georgia auch für Header und Subheader zu benutzen ist cool. Es sieht großartig aus! Eigentlich ist das einzige was Sie überprüfen sollten, bevor Sie eine E-Mail verschicken, wie die Text Farben mit dem Hintergrund zusammen passen und sicherstellen, dass es ausreichend sichtbar ist um gelesen werden zu können. Überprüfen Sie auch, ob der Text ordnungsgemäß auf dem Button liegt, er sollte die Ränder des Buttons nicht überschreiten.

Hier ein Beispiel, wo der Button cool aussieht:

Hier ein Beispiel, wo Buttons und Links zu oft benutzt werden:

Text auf Bannern

Hier ist die Änderung, um proprietäre, Web-, Skript-, handgeschriebene oder dekorative Fonts zu benutzen, die Sie eigentlich nicht als Haupttext-Font verwenden sollten. Falls der Text auf einem Banner ein Teil eines Bildes ist, können Sie alles machen.

Die Hauptsache, die Sie bei der Erstellung eines E-Mail-Banners interessieren sollten, ist die Markenidentität zu markieren. Sie können jedes Font verwenden, aber es ist besser, die lesbaren auszuwählen. Schreiben Sie nicht zu viel Text auf ein Banner. Es sollten nur Willkommensworte, die Interesse wecken sollen und die Benutzer dazu motivieren sollen weiter zu lesen, verwendet werden.

Hier sind zwei coole Beispiele. Das eine ist mit klaren und einfachen Fonts:

Ein weiteres Banner mit dekorativen Fonts:

Welches für Inspiration und welches für das eigene E-Mail-Design benutzen ist allein Ihre Wahl.

Farben

Die einzige Regel, die Sie befolgen sollten ist, nur Farben verwenden, um die Markenidentität zu präsentieren. Wenn Sie daran denken einen bunten Text zu erstellen, vergessen Sie es einfach, denn es wird den Text unleserlich machen.

Normalerweise gibt es nur 3 Farben die in E-Mails verwendet werden können. Die eine ist um die Header zu markieren, die nächste für den restlichen Text und blau um Links sichtbar zu machen. Das ist alles! Sie können die Menge sogar auf zwei Farben reduzieren, während die Header die gleiche Farbe bekommen, diese aber mit unterschiedlichen Größen oder Fonts betonen.

Wenn Sie einen Satz oder Phrase unterstreichen wollen, verwenden Sie einfach Fettschrift, eine andere Farbe zu benutzen ist zweideutig. Designer verwenden oft schwarze oder dunkelgraue Farben für E-Mail-Inhalte. Es ist besser für die Lesbarkeit. Die einzige Ausnahme ist, wenn Sie einen schwarzen Hintergrund haben. Verwenden Sie in diesem Fall ein weißes Font. Verwenden Sie kein hellgraues Font, da es schwer ist, die verschiedenen Kontrastbereichs-Einstellungen zu lesen.

HTML-Tags für Textformatierung

In der Regel werden Web-Safe Fonts in einem CSS-Layout angegeben, also wird es nicht nur einfaches HTML sein, aber es gibt mehrere HTML-Tags für Textformatierung, ich hoffe, dass jeder dies bereits weiss, aber dennoch hier sind sie:

• Um Fettschrift zu verwenden:

  <strong> </strong> oder <b> </b>

• Verwenden Sie diese Struktur um die punktierte Liste in einer E-Mail zu erstellen:

  <ul>
      <li>Erste Stellungnahme</li>
      <li>Zweite Stellungnahme</li>
      <li>Dritte Stellungnahme</li>
  </ul>

• Um kursiv zu verwenden, um den Text zu betonen:

  <i> </i> oder <em> <em>

• Um einen kleinen Text mit den gleichen Font den Sie verwenden Hinzuzufügen:

  <small> </small>

• Um den Text mit gelb (standardmäßig) füllend zu markieren:

  <mark> </mark>

• Um anzugeben, dass ein Text, gelöscht, aber nicht ersetzt wurde:

  <del> </del>

• Erlaubt Ihnen, einen Absatz zu definieren:

  <p> </p>

Beste Praktiken für die Implementierung von Web Safe Fonts

Die Auswahl der Schrift variiert auch je nach Region und Sprache.

Aufgrund zahlreicher Experimente des Marketingteams von eSputnik sind Arial und Tahoma die besten Schriftarten für E-Mails im russischsprachigen Raum. Arial ist die überzeugendste Schriftart unter denjenigen, die E-Mail-Marketingkampagnen einrichten. Tahoma macht sowohl in inhaltsintensiven E-Mails als auch in kleinen Texten eine gute Figur.

Die Helvetica-Schrift gilt als die beliebteste Schrift im englisch- und deutschsprachigen Raum. Arial belegt den 2. Platz.

Um die am besten lesbare Schriftart für Ihre Region auszuwählen, können Sie alle E-Mails überprüfen, die für E-Mails wie unsere sicher sind. Es ist auch ratsam, nicht nur Text, sondern auch Interpunktion in den Test einzubeziehen. Dies liegt an der Tatsache, dass einige Satzzeichen mit Buchstaben in einigen Sprachen verschmelzen und leicht unsichtbar werden können.

Sie können auch Ihre Kollegen bitten, Ihnen bei diesem Test zu helfen. Senden Sie ihnen einen Brief in verschiedenen Schriftarten.

Ich habe im Stripo Editor ein E-Mail-Template mit dem gleichen Text und der gleichen 18px Größe für jedes Font erstellt. Es gibt kein Palatino und Geneva im Stripo E-Mail-Editor, aber es gibt benutzerdefinierte Fonts wie Roboto und Open Sans, welche nicht Standard sind, aber in den meisten OS ist es besser, ein Ersatz-Font zu definieren, falls Sie es benutzen.

Also, hier sind die Ergebnisse, vergleichen Sie einfach diese Fonts und wählen Sie die, die am besten zu Ihren Bedürfnissen passen:

Wie Sie sehen können, sind Georgia und Times New Roman zu schmal. Courier Neu ist breit, vielleicht sogar zu breit für E-Mails. Arial ist leichter als Helvetica. Es ist unmöglich, die Verdana- und Tahoma-Fonts voneinander zu unterscheiden. Georgia und Verdana sehen schlecht aus, wenn man sie ausdruckt. Was mich betrifft, würde ich lieber die beiden letzten Fonts für meine E-Mail-Kampagne verwenden. Welches bevorzugen Sie? Zögern Sie nicht, Kommentare zu hinterlassen und, wenn er Ihnen gefallen hat, diesen Artikel zu teilen.