Design Vorlagen
~ 18 min gelesen
16 Kommentare
265208 Aufrufe
bewerten Sie es
28 April

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

Stripo / Blog / 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:

Entwerfen Sie anspruchsvolle, vollständig reagierende E-Mails.

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:

email font experiment, clear fonts are better to read

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?

difference between serif and sans serif fonts

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:

sans serif is better for screens

 

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.

Verwenden Sie benutzerdefinierte Schriftarten in E-Mails bleiben voll on-Marke

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:

how to choose a font for emai? web safe examples

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:

bad email font and spacing, paragraphs

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:

grey is worse than black for reading, email design , text color

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:

color identity, the best fonts for logo, text and links

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:

the best font for email banner and button design

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

too many links and buttons in email design

Machen Sie Ihre CTA-Schaltflächen überall sichtbar und anklickbar

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:

clear font for email banner, the best fonts for emails

Ein weiteres Banner mit dekorativen Fonts:

decorative font on email banner, the best email 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:

the best font for email, web safe fonts comparison

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.

Paulo Marreiros vor 1 Monat

Excelente o artigo dessa página. De muito gosto! Todos as minhas dúvidas e ac e acredito que também de outras pessoas, foram esclarecidas. PauloMar/São Paulo, Brazil.

Hanna Kuznietsova kommentiert Paulo Marreiros vor 1 Monat

Paulo, Obrigado por uma revisão tão agradável. Estamos muito felizes que o artigo tenha sido útil. Desejamos sinceramente o melhor em suas campanhas

pirates vor 2 Monaten

nice blog theme you use in your blog can you share which theme you are using

Hanna Kuznietsova kommentiert pirates vor 2 Monaten

Hello, Pirates. Thank you for your question. If you are talking about the font we are using, it is Montserrat, 16px. If it's not what you asked us about, then could you clarify please what theme exactly you mean? Thank you

Igor Greshner vor 4 Monaten

Parabéns pela excelente pesquisa! Esclareceu bastante minhas dúvidas, sou a favor da Verdana e Tahoma a anos, por ser um formato mais agradável para ler.

Hanna Kuznietsova kommentiert Igor Greshner vor 4 Monaten

Igor, Muito obrigado )) Estamos muito satisfeitos que nosso artigo seja útil. Desejo-lhe sucesso em email marketing

Khairom Munawwar Baharom vor 9 Monaten

Hi Hannah. Do Montserrat font can go multi-platform on email? (Gmail, Outlook, etc..)

Hanna Kuznietsova kommentiert Khairom Munawwar Baharom vor 9 Monaten

Khairom, Thank you for your question. Unfortunately, it is not a websafe font. I just uploaded Montserrat to my account, sent an email to some email addresses. Only Apple Mail and Apple iPhone Mail (Native Mail on iOS) did not replace Montserrat with a default font. Others did replace it with the default fonts. Tests with Email on Acid just confirmed that Montserrat gets to be replaced by Gmail and Outlook.

Martin Schenk vor 10 Monaten

Für deutsche Texte ist Verdana und Tahoma nicht empfehlenswert, da die abschließenden Anführungszeichen "verkehrt" dargestellt werden.

Hanna Kuznietsova kommentiert Martin Schenk vor 10 Monaten

Vielen Dank für Ihren wertvollen Kommentar. Wir haben die notwendigen Änderungen an unserem Artikel vorgenommen. Viel glück

rohit dubey vor 1 Jahr

Thanks for sharing this amazing content. This is really helpful for us.

Hanna Kuznietsova kommentiert rohit dubey vor 1 Jahr

Rohit Dubey, We're glad to hear you find this helpful. You might be interested to know that you can upload custom fonts to your projects with Stripo. https://stripo.email/blog/add-use-custom-fonts-stripo/ Have a great day!

Marcia Bosscher vor 1 Jahr

What font are you using for this post? I like it!

Hanna Kuznietsova kommentiert Marcia Bosscher vor 1 Jahr

Marcia, Thank you. We are flattered to know. It's Montserrat, 16px. For your convenience, to detect fonts on other websites, you can use this tool http://whatfontapp.com/ Have a good day

Myron Gould vor 1 Jahr

I found this article to be a very helpful refresher. Thank you!

Hanna Kuznietsova kommentiert Myron Gould vor 1 Jahr

Myron, We're glad you liked it. You may be also interested in reading Paul Airy's post to find out which of the web-safe fonts is best for email accessibility. http://createsend.com/t/d-ABFFF5F25EC93A19 Also, we're glad to say that you can upload custom fonts with Stripo. If you have any questions about custom, web-safe and accessible fonts, or if you have any questions regarding our tool, please feel free to contact us at any time. Thank you for your interest in our blog!

Sie könnten interessiert sein an

← vorherige nächste →
gestern · 8 min gelesen
Wie man eine E-Mail-Newsletter-Vorlage für Outlook mit Stripo erstellt

Mit Stripo können E-Mails an die Outlook-App (sowohl unter MacOS als auch unter Windows) und an Outlook Web gesendet werden. Daher ist das Senden eleganter HTML-E-Mails über Ihren bevorzugten E-Mail-Client jetzt ganz einfach! Es sind keine Add-Ons erforderlich. In diesem Beitrag zeigen wir Ihnen, wie Sie HTML-E-Mail-Vorlagen mit nur zwei Klicks nach Outlook exportieren können. Stripo beitreten Einführung Bis vor kurzem war es schwierig, ja fast unmöglich, HTML-E-Mail-Newsletter über Outlook zu versenden, die korrekt angezeigt werden. Und Stripo fand den...

Marketing Vorlagen How-to
6 Tage · 11 min gelesen
So schreiben Sie eine effektive Erinnerungsmail für eine Veranstaltung

Heutzutage, da die Kunden so daran gewöhnt sind, tonnenweise Werbeaktionen zu erhalten, kann nur noch aufrichtige Sorge und Wertschätzung ihre Aufmerksamkeit auf eine E-Mail-Marketingkampagne lenken. Und Erinnerungsmails für Veranstaltungen sind eine gute Möglichkeit, dies zu tun. Wenn die Kunden Ihre Produkte bereits gekauft haben, sei es eine Eintrittskarte für eine Konferenz oder ein Video-Tutorial, denken Sie vielleicht, Ihre Mission wäre hiermit erledigt. Aber Menschen, die extrem beschäftigt sind, neigen dazu, jede Art von Veranstaltung zu vergessen. Und wir müssen Sie...

Design Marketing Vorlagen
Seien Sie immer auf dem Laufenden in Bezug auf aktuelle E-Mail-Marketing-Nachrichten, Leitfäden, Artikel und How-To's