Mehr als Worte: So verwenden Sie E-Mail-Typografie, die Bände spricht

Serif und Sans-Serif sind die am häufigsten verwendeten Schriftarten, insbesondere für Fließtext. Dies liegt daran, dass sie am besten lesbar und daher zugänglich sind. Sie rendern gut, wenn sie verkleinert und bei geringeren Gewichten verwendet werden.

Skript- und Display-Schriften sind oft zu komplex für den Fließtext. Das heißt, sie können schwer zu lesen und noch schwerer zu scannen sein. Daher sind sie in der Regel für Schlagzeilen reserviert.

Monospaced-Schriften werden auch weniger häufig als Fließtext verwendet. Stattdessen werden sie in technischen Ressourcen für Programmiersprachen bevorzugt, um Code von natürlicher Sprache zu unterscheiden.

Web-Schriften

Um eine Schriftart in einer E-Mail zu verwenden, muss es sich um eine Webschriftart handeln.

Dies ist eine digitale Schriftart, die in Ihrem Code aufgerufen werden kann. Es gibt viele kostenlose Webfonts sowie solche, die gekauft werden können. Sehen wir uns jedoch zunächst die beiden Arten digitaler Schriftarten an, die Sie in Ihre E-Mail aufnehmen können: Web-sichere Schriftarten und Web-Schriftarten.

Websichere Schriftarten

Dies sind Schriftarten, die auf den meisten Betriebssystemen installiert sind, was bedeutet, dass das Aufrufen dieser Schriftarten in Ihren E-Mail-Code zu einer konsistenten Darstellung über E-Mail-Clients, Geräte und Betriebssysteme führt.

Hier sind die websicheren Schriftarten, die auf Windows- und Mac-Geräten am besten unterstützt werden:

Webfonts

Dies sind Schriftarten, die nicht auf allen Betriebssystemen verfügbar sind.

Daher müssen Sie Ihren E-Mails einen zusätzlichen Code hinzufügen, um sie verwenden zu können. Sie müssen auch sicherstellen, dass Ihr Font-Stack websichere Fallback-Fonts enthält, da nicht alle E-Mail-Clients Webfonts rendern.

Es gibt viele verschiedene Orte, an denen Sie Webfonts finden können, z. B. Google Fonts, eine kostenlose Ressource, und Adobe Fonts, für die ein Abonnement erforderlich ist.

Eine umfassende Anleitung zu Webfonts finden Sie in unserem Ultimativen Leitfaden zu Webfonts.

Idealerweise sollten Sie nicht mehr als zwei Schriftarten gleichzeitig verwenden . Dies liegt zum Teil daran, dass es laut und verwirrend werden kann, wenn Sie zu viele verwenden, aber es kann auch die Ladezeit Ihrer E-Mail erhöhen, wenn Sie mehrere Webfonts aufrufen.

Schriftgestaltung

Es gibt zusätzliche Schriftarten, die wir entwerfen und codieren können, um die Aufmerksamkeit auf Wörter und Sätze in unserer E-Mail zu lenken. Es ist jedoch wichtig, wie und wann wir diese verwenden, da sie die Lesbarkeit und Zugänglichkeit unserer E-Mails beeinträchtigen können.

Der ultimative Leitfaden für barrierefreie E-Mails Entdecken Sie die Erkenntnisse und Schritt-für-Schritt-Anleitungen, die Sie zum Schreiben, Gestalten und Codieren von E-Mails benötigen, die von jedem genutzt werden können – unabhängig von seinen Fähigkeiten. HOL DEINEN GUIDE

Fett gedruckt

Versuchen Sie, fett gedruckten Text auf eine Handvoll Wörter zu beschränken, die Sie vom Rest der Kopie in Ihrer E-Mail abheben möchten. Dadurch wird sichergestellt, dass nicht mehrere Keywords um Aufmerksamkeit kämpfen.

Während fett gedruckter Text sehenden Abonnenten helfen kann, wichtige Informationen zu identifizieren, erkennen Screenreader den Unterschied nur durch semantische Codierung.

Das Tag <b> fett ist nicht semantisch und hebt Ihre ausgewählten Wörter für den Benutzer des Bildschirmleseprogramms nicht hervor. Verwenden Sie daher immer das <strong>-Tag, um die Erfahrung zu wiederholen, die Ihre sehenden Benutzer machen.

<p>Be <strong> bold </strong> ,<br />be <strong>brave</strong></p>

Kursiv

Ähnlich wie Fettdruck wird durch kursive Wörter betont, wenn auch in geringerem Maße.

Wie bei Fettdruck gibt es mehrere Möglichkeiten, kursiven Text zu codieren. Es ist jedoch das <em>-Tag, das WCAG-kompatibel ist (nicht das <i>-Tag) und Screenreadern einen Hinweis darauf geben kann, wie etwas zu verstehen ist.

<p>I love funny English words like <em> gubbins </em> and <em>gnarly</em>.</p>

Durchgestrichen

Die Anwendung dieses Stylings kann auf eine Preisreduzierung oder Informationsaktualisierung aufmerksam machen.

Es wird jedoch nicht konsistent über E-Mail-Clients hinweg gerendert.

Das HTML-Tag <strike> wird von Hey nicht unterstützt und von Gmail-Apps nur teilweise unterstützt. Und die Bewältigung dieses Stils mit CSS-Line-Through bietet auch begrenzte Unterstützung, da einige E-Mail-Clients die Linie so dünn machen, dass es ziemlich schwer zu erkennen ist.

Es ist auch erwähnenswert, dass es bei diesem Stil ein Problem mit der Barrierefreiheit gibt, da Screenreader kein durchgestrichenes Wort hervorheben, was sich negativ auf die Erfahrung derjenigen auswirken könnte, die auf Hilfstechnologien angewiesen sind. Das Hinzufügen von Kontext vor jedem Betrag, wie z. B. „war“ und „jetzt“, macht dies zu einer wertvollen Erfahrung für alle.

Der beste Weg, um ein Durchstreichen zu codieren, ist die Verwendung des HTML-Tags <strike> wie folgt:

<p>Was<br /><span> <strike> $200 </strike> </span></p>

Großbuchstaben

Die Verwendung von Großbuchstaben kann die Aufmerksamkeit auf Schlüsselwörter lenken und Hierarchien anzeigen. Es kann jedoch auch als Schreien angesehen werden, daher ist es am besten, sparsam zu sein.

Ein weiterer Grund, die Großbuchstaben zu schonen, ist, dass sie die Lesbarkeit beeinträchtigen. Wir sind damit vertraut, Wörter anhand ihrer Form zu identifizieren. Die einheitliche rechteckige Form von Großbuchstaben verlangsamt uns und verringert die Scanbarkeit.

Ich würde auch empfehlen, Text in Großbuchstaben mit CSS zu formatieren, da das Schreiben in Großbuchstaben sich negativ auf Screenreader auswirken könnte. In einigen Fällen kann ein Screenreader die Lautstärke erhöhen, wenn er auf Großbuchstaben trifft, oder er könnte Wörter Buchstabe für Buchstabe vorlesen, da er sie als Akronyme identifiziert.

CSS-Styling wird von Screenreadern nicht erkannt, daher behandelt es mit CSS formatierten Großbuchstaben genauso wie normalen Text.

<p>We need to shout about this <br /><span>big win</span></p>

Buchstaben-Abstand

Das Hinzufügen von Buchstabenabständen kann Ihren Schriftarten ein wenig mehr Charakter und Identität verleihen und einige Schriftarten lesbarer machen.

Wenn Sie beispielsweise Ihren Text in Großbuchstaben formatieren müssen, kann auch ein kleiner Buchstabenabstand die Lesbarkeit verbessern. Es ist jedoch ein feines Gleichgewicht, da ein zu großer Buchstabenabstand die Lesbarkeit beeinträchtigt.

Weitere Informationen zu den Geboten und Verboten des Buchstabenabstands finden Sie in diesem hilfreichen Beitrag.

Der Support ist für alle E-Mail-Clients gut, wobei nur Outlook teilweise Unterstützung bietet. Um einen Buchstabenabstand hinzuzufügen, möchten Sie mit CSS formatieren:

<p style=”font-family:'Helvetica Neue',Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-transform:uppercase; letter-spacing: 2px ;”>A little letter spacing helps readability</p>

Textausrichtung

Es gibt ein paar absolute No-Gos bei der Textausrichtung.

Zunächst einmal gerechtfertigt Styling: Das wird Text Anker nach links und rechts des Containers machen. Um dies zu erreichen, fügt es ungleiche Abstände zwischen den Wörtern hinzu, was die Lesbarkeit stark beeinträchtigt.

Rechtsbündig ausgerichteter Fließtext sollte nur für Sprachen verwendet werden, die von rechts nach links gelesen werden. Es ist sehr unnatürlich, dass Sprachen von links nach rechts gelesen werden, wenn sie rechtsbündig ausgerichtet sind, und wirkt sich auch negativ auf die Lesbarkeit aus.

Mittig ausgerichteter Text sollte für Überschriften oder kurze Absätze von nicht mehr als 3 Zeilen reserviert werden.

Die optimale Ausrichtung ist linksbündig für Links-nach-rechts-Sprachen. Dies schafft einen Ankerpunkt, zu dem Sie jedes Mal zurückkehren können, wenn eine Zeile gelesen wird, und ist ein wichtiger Aspekt für barrierefreie Leseerlebnisse.

Um die Textausrichtung zu codieren, können Sie das HTML-Attribut align verwenden. Dadurch werden jedoch auch alle anderen Elemente in der Zelle ausgerichtet. Die Verwendung von CSS für semantische Tags wie Überschriften oder Absätze ist der effektivste Weg, um Ihre Kopie auszurichten:

<p style=”font-family:Helvetica Neue,Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-align:left ;”>I am left aligned</p>

Farbe

Die Sache, an die man sich bei Farbe erinnern sollte, ist der Kontrast.

Wenn Sie Textfarben auswählen, müssen Sie sicherstellen, dass sie sich von Ihren Hintergrundfarben oder Hintergrundbildern abheben. Dies wird dazu beitragen, dass Ihre Inhalte für Abonnenten mit einer Reihe von Sehbehinderungen lesbar sind. Ob Sie ein gutes Kontrastverhältnis haben, können Sie am besten herausfinden, indem Sie Ihre Farben im WebAim-Kontrast-Checker testen.

Für einen tieferen Einblick in das Erstellen, Entwerfen und Codieren barrierefreier Inhalte für E-Mail, sehen Sie sich die Salesforce Trailhead-Sitzungen an, die ich mit Mark Robbins, Software Engineer bei Salesforce, aufgezeichnet habe.

Größe

Es gibt keine wirkliche Obergrenze für die Größe Ihres Textes. Sie möchten jedoch, dass Wörter in einer Zeile bleiben, damit sie lesbar sind und Ihre E-Mail nicht unterbrochen wird.

Es gibt jedoch eine Grenze, wie klein Text sein sollte. Alles unter 14px wird für viele Menschen schwer zu lesen, und die automatische Textanpassungsfunktion von iOS Apple Mail wird aktiviert und vergrößert Ihren Text.

Bei Litmus gehen wir selten unter 18px. In diesem Fall beschränken wir uns auf tertiäre Informationen wie Vorbehalte, Fußnoten und Fußzeileninhalte. Dadurch können primäre Inhalte dominieren.

Zeilenhöhe

Eine gute Lesbarkeit hängt auch von einem ausreichenden Abstand zwischen den einzelnen Textzeilen ab. Zu wenig, und es kann schwierig sein, einer einzelnen Textzeile zu folgen, ohne dass Ihre Augen zu einer anderen Zeile wandern. Zu viel, und jede Zeile kann sich anfühlen, als wäre sie von der nächsten unabhängig, was das Lesen und Scannen zu einer Herausforderung macht.

Um dies zu erreichen, sollten die Zeilenhöhen zwischen dem 1,5- und 2-fachen der Textgröße liegen. Eine Schriftgröße von 20px sollte beispielsweise eine Zeilenhöhe von 30-40px haben.

Tipps zur Verwendung von Typografie im E-Mail-Design

Durch das Styling von geschriebenen Inhalten kann viel erreicht werden. Ich erkläre vier Möglichkeiten, wie Sie Typografie in Ihren E-Mails effektiv einsetzen können, um eine Wirkung zu erzielen und die Leser zu leiten.

Helfen Sie Abonnenten, Ihre Marke zu identifizieren

Zunächst können Sie Markenschriftarten anwenden, um Abonnenten zu helfen, Ihre Marke zu identifizieren, wenn sie Ihre E-Mail öffnen. Einige Schriftarten sind sehr charakteristisch, auch außerhalb des Kontexts. Denken Sie an Walt Disney und Coca-Cola.

Kommunikationsarten unterscheiden

Sie können verschiedene Arten der Kommunikation wie Transaktions-E-Mails und Newsletter mit unterschiedlichen Schriftstilen gestalten. Dies hilft Ihrem Publikum, die Art der Kommunikation, die es erhalten hat, schnell zu erkennen.

Heben Sie die Markenpersönlichkeit hervor

Die Markenpersönlichkeit kann auch durch kreative Typografie gesteigert werden, beispielsweise durch die Verwendung von Display-Schriftarten im Hero-Bereich, die wichtige Botschaften hervorheben.

Kommt Ihre Botschaft richtig an? Halten Sie Fehler in Schach – und sorgen Sie dafür, dass Ihre E-Mails Wirkung zeigen. Vorschau in über 100 Apps und Geräten, Links und Bilder validieren, Barrierefreiheit testen und vieles mehr. Mach keinen Fehler

Hierarchie erstellen

Eines der nützlichsten Dinge, die Sie mit Typografie tun können, besteht darin, eine Hierarchie zu erstellen, die den Leser durch Ihre E-Mail führt. Also werde ich hier ein bisschen mehr Zeit verbringen.

Heutzutage ist das Volumen der von den meisten Abonnenten erhaltenen E-Mails beträchtlich. Es ist einfach nicht möglich, alle empfangenen Nachrichten zu verarbeiten und zu verdauen. Daher werden geöffnete E-Mails häufig gescannt, während der Leser nach Ankerpunkten in Ihrer E-Mail sucht, um den Wert zu verstehen.

Indem Sie sich an Schriftarten, -größen, -stärken und -farben orientieren, können Sie zeigen, welche Teile Ihrer E-Mail am wichtigsten sind. Obwohl ich nicht an "the fold" glaube, denke ich, dass es wichtig ist, den Abonnenten die Möglichkeit zu geben, das Ziel der E-Mail zu verstehen und Maßnahmen zu ergreifen, ohne sich dazu verpflichten zu müssen, viel zu lesen.

Lassen Sie mich es mit diesem Beispiel für Sie aufschlüsseln:

Es verwendet große und fette Typografie im Heldenbereich, um auf eine Überschrift aufmerksam zu machen, die den Wert oder Zweck der E-Mail zusammenfasst.

Wenn Klicks und Conversions das Ziel Ihrer Kampagne sind, kann die Weiterverfolgung mit einem Call-to-Action dem Leser helfen, die Aktion auszuführen, ohne die gesamte E-Mail konsumieren zu müssen.

Fügen Sie dann weniger dominante Überschriften hinzu, die den Fließtext unterbrechen, damit dieser Inhalt leicht gescannt werden kann, wenn der Leser nicht jedes Wort lesen kann.

Marken werden kreativ mit E-Mail-Typografie

Nun zu einigen Beispielen von Marken mit großem Einsatz von Typografie in ihren E-Mail-Designs. Was zeichnet sie aus und zieht die Leser an?

DÄMPFEN

DAMP, ein Newsletter, der Winzer und Einzelhändler hervorhebt, die sich auf die Herstellung und den Verkauf von Naturweinen konzentrieren, stützt sich stark auf die Typografie und arbeitet mit Serifen- und Sans-Serif-Schriften, um die Inhaltshierarchie zu gestalten.

Verwendete Schriften: Helvetica neue mit Arial Rückfall, und Serife Systemschriftart Times New Roman.

Der Heldenbereich zeigt das einzige Bild in diesem Langform-Newsletter, wobei fette Typografie den Ton für die E-Mail beim Öffnen angibt. Dieser E-Mail-Designtrend der kühnen Typografie gibt ein Statement ab. Kein Wunder, dass so viele Marken diesen Stil übernommen haben.

Das wirklich Interessante an dieser E-Mail ist, dass sie diesen modernen und sauberen Stil mit Systemschriftarten anstelle von Webfonts erreichen – was bedeutet, dass die Schriftarten in allen E-Mail-Clients ähnlich gerendert werden.

Bereit Mag

Ready Mag, ein browserinterner Grafikeditor, lehnt sich auch an Systemfonts an, führt mit Mac-Systemfonts, gefolgt von einer Reihe von Helveticas. Dies geht wahrscheinlich über das hinaus, was von einem Schriftartenstapel in E-Mails verlangt wird.

Verwendete Schriftarten : Apple-Systemschriftarten, die auf Helvetica und Arial zurückgreifen.

Was ich an dieser E-Mail liebe, ist die mutige Typografie, die den Inhalt trennt. Es macht die E-Mail einfach zu scannen. Und mit minimalem Fließtext können Leser, die es eilig haben, den Wert jedes Abschnitts erkennen und schnell Maßnahmen ergreifen.

Klappentext

Die Self-Publishing-Plattform Blurb verwendet Webfonts, um ihre Markenidentität in E-Mails zu bringen, indem sie leichte und fette Schriften sowie Großbuchstaben verwendet, um Hierarchien und Aktionsbereiche zu skizzieren.

Verwendete Schriftarten : Futura und Proxima Nova (Webfonts), die auf Helvetica und Arial zurückgehen.

Es ist großartig zu sehen, wie die Zahlen – die die Schritte bilden – mit Live-Text und nicht mit Bildern gestaltet sind. Dies führt zu einer viel reibungsloseren Erfahrung für Abonnenten, die auf Screenreader angewiesen sind, und bedeutet auch, dass diese gerendert werden, wenn Bilder nicht geladen werden.

Tripadvisor

Wie viele andere Marken verschickte auch die Reiseplattform Tripadvisor ihre COVID-19-Nachrichten mithilfe einer Briefvorlage. Dies ist eine persönlichere und direktere Art der Kommunikation mit Kunden und bietet wichtige Informationen ohne Ablenkung durch Bilder oder die Wahrscheinlichkeit, dass sie als Marketing-E-Mail verwechselt werden.

Verwendete Schriftarten : Arial.

Große, fette Typografie hebt die übergreifende Botschaft der E-Mail hervor, während Überschriften, die so gestaltet sind, dass sie sich von Blöcken aus Fließtext abheben, Inhalte aufbrechen und Ankerpunkte für den Leser bieten, um den Wert eines Abschnitts zu verstehen.

Diese hochgradig durchsuchbare E-Mail verfügt außerdem über reichlich Polsterung links und rechts des Hauptcontainers, was eine großartige Technik ist, um zu verhindern, dass große Textblöcke den Leser überfordern.

Tattly

Der temporäre Tattoo-Händler Tattly hat einen sehr kreativen Ansatz beim E-Mail-Design, wobei Werbe-E-Mails oft aufregende Designtechniken und -trends nutzen. Sie verwenden fett gedruckte Typografie im Helden dieser E-Mail, um auf die neuen Produkte in der E-Mail aufmerksam zu machen.

Verwendete Schriftarten : Open Sans (Webfont), zurückgreifend auf Helvetica und Arial.

Bei hochentwickelten E-Mails wie dieser ist es üblich, dass die Typografie auf Bildern basiert und nicht auf Live-Text.

Es gibt eine Reihe von Überlegungen zur Barrierefreiheit, die bei der Verwendung von Bildern für Text zu berücksichtigen sind, z Beeinträchtigung. Wird der Text verpixelt und unlesbar? Wie lesbar ist außerdem bildbasierter Text, wenn die E-Mail auf mobilen Geräten verkleinert wird?

Obwohl Live-Text der beste Weg ist, um Ihre E-Mails zugänglich und lesbar zu halten, gibt es eine Möglichkeit, bildbasierte Heldenbereiche für ein breiteres Publikum wertvoll zu machen, indem Sie Ihr Heldenbild in ein H1-Tag packen und den Bildtext zu Ihrem ALT-Tag hinzufügen. so was:

<h1 style=”Helvetica Neue,Helvetica,sans-serif; font-size:50px; line-height:75px; color:#262524;”><img src=”hero.png” alt=”Image based hero messaging - there is a way!”></h1>

Dieser Ansatz macht die E-Mail für Abonnenten scanbar, die auf Screenreader angewiesen sind, da sie die Shortcut-Funktion verwenden können, um durch die Schlagzeilen zu navigieren.

„Das Einhüllen eines Bildes in ein H1-Tag ist ein gültiger semantischer Code und wird in die Kontextmenüs von Bildschirmlese-Überschriften eingefügt. Es ist jedoch wichtig zu beachten, dass ALT-Text möglicherweise nicht von allen Textlesewerkzeugen vorgelesen werden kann.“ – Mark Robbins, Softwareingenieur, Salesforce

E-Mail-Typografie hat es in sich

Mit der schnell wachsenden Zahl von Nachrichten, die um die Aufmerksamkeit Ihrer Abonnenten konkurrieren, wird der Aufwand, sich abzuheben und dennoch ein zuverlässiges Erlebnis zu bieten – schnell – immer schwerer. Typografie ist eine großartige Möglichkeit, Ihre E-Mails schön, effektiv und zugänglich zu machen, ohne Sie zu verlangsamen.

Behalten Sie diesen Leitfaden im Hinterkopf und teilen Sie mit, wie Sie Typografie in Ihren E-Mails verwenden. Ich würde sie gerne sehen!

Erstellen Sie markenkonforme, fehlerfreie E-Mails – mit Litmus Keine kaputten E-Mails mehr. Erstellen und testen Sie Ihre E-Mails mit Litmus, um ein großartiges Abonnentenerlebnis in jedem Posteingang zu gewährleisten. Starten Sie Ihre kostenlose Testversion