Typografie für Newsletter

Der wichtigste Bestandteil jedes Newsletter ist Text. Selbst wenn Sie noch so schöne Bilder haben – die Handlungsaufforderung kommt nicht ohne Text aus.

Damit dieser Text richtig funktioniert, sollten Sie ein paar typografische Grundregeln beachten – die überraschend oft ignoriert werden.

Entscheidend sind aus rein pragmatischen Gründen vor allem:

  • Der Kontrast zwischen Text und Hintergrund
  • Die Schriftgröße
  • Die Leserlichkeit der Schriftart

Guter Kontrast ist die Voraussetzung

Text steht idealerweise immer vor einem gleichförmigen Hintergrund. Am besten ist dieser einfarbig, zumindest sollte er nur wenig gemustert sein.

Wollen Sie Schrift auf ein Foto setzen, dann müssen Sie die Buchstaben dementsprechend deutlich größer setzen. Und die Farbe wählen Sie so, dass sie sich möglichst gut vom Hintergrund abhebt.

Beispiel Newsletter GStar

Hier bei GStar gibt es kaum Text zu lesen – dennoch ist Text der zentrale Bedeutungsträger. Die großen Buchstaben setzen sich gut vor dem Hintergrund ab. Zu beachten ist, dass der rote Kasten teiltransparent ist, die Schrift nicht.

Je kleiner die Schriftgröße, desto größer muss der Kontrast zum Hintergrund sein. Und verwenden Sie eine sehr schmale Schriftart, wie etwa die Helvetica Narrow, dann brauchen Sie einen höheren Kontrast als wenn Sie z.B. Verdana nutzen.

Den Kontrast können Sie hier prüfen: Color Contrast Checker

Beispiel Newsletter Frankfurter Sparkasse

Im Newsletter der Frankfurter Sparkasse ist der Kontrast zwischen dunkelgrauer Schrift und hellgrauem Kastenhintergrund 2,5 : 1 – die Richtlinien zur Barrierefreiheit fordern mindestens 4,5 : 1. Auch vor Weiß erreicht die Schrift nur 2,7 : 1.

Fließtext in nüchterner Schrift

Die Schriftart (englisch Font) gibt Ihrem Newsletter ein Gesicht. Für wenig Text, Banner und als Blickfang oder auch für Überschriften können Sie auffällige Schriften nutzen.

Der Fließtext sollte aber in einer sehr gut leserlichen Schrift gesetzt sein. Nur so hat er die Chance, gelesen zu werden. Je schlechter die Leserlichkeit der Schrift, desto früher brechen die Benutzer die Lektüre ab.

Aus Gründen der Leserlichkeit nicht in Frage kommen Fraktur und Schreibschriften. Auch solche mit übermäßigen Verzierungen oder extrem fette/extrem schmale Schriftschnitte sind nicht geeignet.

Sie können sich auch danach richten, was Nutzer von anderen Anwendungen gewöhnt sind und z.B. Georgia oder Times New Roman verwenden, wenn Sie sich seriös geben wollen. Oder Helvetica bzw. Verdana, wenn Sie modern wirken wollen. Oder Sie wählen die Schriften gerade anders aus als üblich, um sich abzuheben.

Als überholt gilt übrigens die Annahme, Schriften mit Serifen seien leichter lesbar. Gerade bei kleineren Schriftgrößen am Bildschirm ist sogar oft das Gegenteil der Fall.

Beispiel Newsletter Sport Scheck

Bei Sportscheck ist der Fließtext in Verdana gesetzt – eine der wenigen Schriftarten, die auf praktisch allen Geräten installiert sind. Bei den als Bild eingesetzten Elementen hat man dagegen alle Freiheiten und keine technische Beschränkungen.

Schriftgröße – wie groß darf’s denn sein?

Usability-Experten sind sich einig: Für Websites und Mails sind 16 Pixel ist eine gute Größe für Fließtext. Kleiner als 14 Pixel ist nicht mehr zeitgemäß. Moderne Browser haben 16 Pixel als Standard und auch Google Developers empfehlen 16 Pixel als Grundeinstellung.

Größer schadet nicht – insbesondere, wer unterwegs ist, ist weniger konzentriert oder hat schwierige Lichtbedingungen und freut sich daher über größere Texte.

Die Website Medium.com (mit langen, hochwertigen Texten) z.B. nutzt 21 Pixel.

Hervorhebung – darf’s was Besonderes sein?

Manche Textpassagen möchte man hervorheben. Dabei gilt: Je mehr Sie hervorheben, desto geringer wird die Bedeutung der einzelnen Markierung. In einem Text, in dem jedes zweite Wort fett ist, findet sich kein Nutzer zurecht.

Fettschrift ist die einfachste und beste Art der Hervorhebung.

Kursivschrift ist möglich, fällt aber einerseits weniger auf und ist bei manchen Schriftarten nicht so gut lesbar.

Unterstreichungen sind tabu – die sind für Links reserviert.

Farbliche Hervorhebungen sind denkbar. Allerdings müssen Sie aufpassen, wenn Sie Links nicht unterstrichen darstellen, sondern nur farblich anders als den Fließtext. Nutzer können sich nicht zwei verschiedenen Farben „merken“, wenn sie Ihre Texte lesen.

GROßBUCHSTABEN sind für Fließtext nicht geeignet. Viele Nutzer empfinden das als Schreien. Überschriften können Sie in Großbuchstaben setzen, allerdings ist die Lesbarkeit dann ein Bisschen schlechter. Das gilt allerdings nicht für kurze Texte – also z.B. wenige Buchstaben lange Beschriftungen von Buttons.

Linksbündig, Blocksatz oder zentriert?

Blocksatz macht auf Webseiten und vor allem in E-Mails noch immer Probleme. Denn das Programm muss die Abstände zwischen den Buchstaben und Wörtern dabei so vergrößern, dass die Breite jeder Zeile exakt gleich lang ist, egal wie viele Buchstaben sie beinhaltet.

Auch mit Vorsicht sollten Sie zentrierten Text einsetzen. Denn bei zentriertem Text muss das Auge beim Lesen nach jedem Zeilenwechsel wieder die richtige horizontale Position suchen, an welcher die nächste Zeile beginnt. Das klingt nach einer Kleinigkeit – unbewusst strengt uns das aber an und wir brechen daher die Lektüre solcher Texte schneller ab als bei linksbündig gesetztem Text.

Für zwei, drei Zeilen ist zentrierter Text in Ordnung, bei längeren Abschnitten dagegen verzichten Sie besser darauf.

Die richtige Zeilenbreite

Als Faustformel gilt: 45 bis 85 Zeichen (inclusive Leerzeichen) sind ein guter Wert für die Zeilenbreite am Bildschirm. Sind die Zeilen noch kürzer, wird das Lesen mühsam, weil man ständig zur nächsten Zeile springen muss und die Texte dadurch auch recht lang werden.

Zu lange Zeilen sind mühsam, weil das Auge beim Zeilensprung dann länger braucht, bis es den Anfang der nächsten Zeile gefunden hat.

Der richtige Zeilenabstand

Ebenso sehr entscheidend für die Leserlichkeit ist derZeilenabstand.

Ist dieser zu gering, kleben die Zeilen zu nah beieinander und die Lesegeschwindigkeit sinkt. Bei den meisten Programmen ist der Zeilenabstand auf 1,2 em eingestellt (1 em ist ungefähr die Breite des Großbuchstabens M). Das ist bei fast allen Schriftarten zu wenig. Typografen empfehlen 1,3 bis 2,0 em. Je kleiner Ihre Schriftgröße, desto größer sollte auch der relative Zeilenabstand sein.

Bitte bewerten Sie diesen Beitrag. Damit helfen Sie uns, die Qualität des Blogs zu verbessern.
1 Star / hat nicht geholfen2 Stars / hat kaum geholfen3 Stars / hat etwas geholfen4 Stars / hat gut geholfen5 Stars / hat sehr geholfen (Noch keine Bewertungen)
 
Loading...

Über den Autor:
Jens Jacobsen

Jens Jacobsen ist Gastautor für das Evalanche-Blog und arbeitet seit 1998 als Konzepter und Berater fürs Web. Er unterstützt etablierte Unternehmen wie auch Startups beim Erstellen von Websites, Apps und interaktiven Anwendungen. Sein Schwerpunkt liegt darauf, die Sicht der Kunden und Nutzer von Anfang an einzubringen.

Er befasst sich mit User und Customer Experience, untersucht Bedürfnisse, Erwartungen und Verhalten der Nutzer und optimiert mit diesem Wissen Bestellprozesse wie auch die gesamte digitale Kommunikation. Auch hilft er Unternehmen bei der Neukundengewinnung und Marketing Automation.

In seinen Büchern „Website-Konzeption“ (1. Auflage 2001, 8. Auflage 2016) und „Praxisbuch Usability & UX“ (2017) gibt er sein Wissen weiter, ebenso bei Coachings und Seminaren.

Alle Artikel des Autors
nach oben