Typografie im Newsletter
©
Ein erfolgreiches Unternehmen definiert sich bekanntlich über sein Corporate Design. Der Wiedererkennungswert spielt eine entscheidende Rolle in unserer schnelllebigen Zeit. Umso vielversprechender ist es, wenn dieser im Newsletter zum Ausdruck kommt. Eines der wichtigsten Gestaltungselemente ist die Typografie. Sie ist entscheidend ob wir einen Inhalt optisch ansprechend finden oder ihn lieber beiseite schieben. Doch hier gibt es einige Stolperfallen, die Sie vermeiden sollten.
Heutzutage gibt es unendliche Möglichkeiten das Schriftbild individuell zu gestalten. Dabei verursacht nicht nur die Entscheidung zwischen bold, italic oder regular bei dem einen oder anderen Kopfzerbrechen. Das Web bietet uns unzählige Fonts und gleichzeitig jede Menge Inspiration, diese einzusetzen. Trotz enormer Auswahl müssen wir uns im E-Mail-Marketing leider häufigen Einschränkungen geschlagen geben.
Welcher Versender kennt das nicht – typografische Elemente im Newsletter erkennt man oft nicht wieder. Ausgewählte Schriften weichen im Postfach von Ihrer Ursprungsform ab. Im schlimmsten Fall zerstören Sie sogar das Gesamtkonzept. Grund dafür ist, dass einige E-Mail-Clients Webfonts nur bedingt oder überhaupt nicht unterstützen. Die geeignete Schriftart zu finden, stellt nicht selten eine Herausforderung dar. Systemschriften wie Arial, Times New Roman oder Helvetica sind mittlerweile standardmäßig auf fast jedem Rechner vorinstalliert. In der Regel werden sie im Postfach korrekt angezeigt und können daher mit geringem Risiko eingesetzt werden.
Wer sein Template mit HTML aufbaut, kann auf sogenannte Web-Fonts zurückgreifen. Diese befinden sich nicht im Betriebssystem sondern werden über einen Link im Code mitgegeben. Webschriften können käuflich erworben oder von Anbietern wie z. B. Google Fonts kostenlos bezogen werden. Ähnlich wie die Bilder im Newsletter wird auch die Schrift einmalig geladen. In der Praxis ist diese Lösung häufig mit mehr Aufwand verbunden. Vor möglichen Darstellungsproblemen empfiehlt es sich Fallback-Schriften, die bereits im Betriebssystem vorhanden sind, zu definieren. Diese treten ein, wenn die vorgesehene Schrift vom E-Mail Client nicht geladen werden kann. Grundsätzlich gilt, um den Weg der Typografie im Newsletter nachvollziehen zu können, führt kein Weg an einen Testversand vorbei.
In diesem Anwendungsbeispiel zeigen wir Ihnen, wie Sie Webschriften in Ihr E-Mail-Template einbinden und Systemschriften als Fallback festlegen. Anbieter wie Google Fonts stellen Ihnen dafür Ihre Wunsch-Typografie teilweise kostenlos zur Verfügung. Für unseren Beispiel-Newsletter wählen wir die Schriftart »Roboto«. Diese hat gleich mehrere Styles in petto, die ebenfalls hinterlegt werden können. Sobald Sie Ihre Schrift ausgewählt haben, präsentiert Ihnen Google Fonts auch schon mögliche Vorgehensweisen für die Einbindung. Damit die Schrift geladen werden kann muss diese im Headbereich verlinkt werden.
[...]
[...]
Ihre Webschrift kann nun erfolgreich im HTML-Code geladen werden. Im nächsten Schritt definieren Sie die Elemente, die mit dieser Schriftart dargestellt werden sollen.
[...]
body {font-family: 'Roboto', Helvetica, sans-serif; font-weight: 300;}
h1 { font-family: Roboto, Helvetica, sans-serif; font-weight: 500;}
Im Style Bereich des Head können Sie Ihre Webschrift in der Fontfamily an erster Stelle hinterlegen. Für den Fall, dass diese auf dem Endgerät nicht angezeigt werden kann, springt die darauffolgende Systemschrift, z. B. Helvetica ein. Zusätzlich können Sie die Anweisung mitgeben, dass eine serifenlose Schrift zum Einsatz kommt, wenn auch die ausgewählte Systemschrift nicht verfügbar sein sollte.
Dadurch, dass einige Provider den Headbereich abschneiden empfiehlt es sich die Schrift bei den einzelnen Elementen zusätzlich als Inline CSS zu definieren.
Serifenlose Schriften gewinnen immer mehr an Beliebtheit in unseren E-Mails. Sie strahlen Modernität aus und sorgen dafür, dass der Leser jedes Wort genauer wahrnimmt. Die klassische Serifenschrift eignet sich dagegen für lange Texte. Die Serifen bilden optisch eine Zeile, die es dem Auge leichter macht dem Informationsfluss zu folgen. Machen Sie sich Gedanken, welcher Stil Ihren Inhalt unterstützt und welche Zielgruppe Sie ansprechen möchten.
Ob Sie die Typografie in Ihrem Newsletter hervorheben oder in den Hintergrund stellen, bleibt Ihnen überlassen. In jedem Fall sollte sie gut lesbar sein. Die Grundform des Schriftbilds besteht aus Schriftfamilie, Schriftgröße und dem Zeilenabstand. Stehen diese im richtigen Verhältnis, lässt sich der Inhalt leicht erfassen. Achten Sie dabei auf genügend Zeilenabstand und ausreichend Spielraum für ein Responsive Design. Textumbrüche auf Smartphones und Tablet sollten wie beim Computerbildschirm stimmig aussehen.
Bringen Sie Struktur in Ihren Newsletter. Diverse typografische Elemente auf beschränkten Inbox-Flächen wirken schnell unübersichtlich. Beugen Sie einer Irritation des Auges vor, weniger ist mehr. Wählen Sie für Ihr Template eine einheitliche Typografie und behalten Sie diese, wenn möglich, bei. Die große Ausnahme bilden Überschriften sowie wichtige Aktionsdetails, diese dürfen gerne besonders hervorgehoben werden. Gestalten Sie unterschiedliche Variationen. Verwenden Sie für Ihre Texte abwechselnd ein- und mehrspaltige Layouts. Die Neugier wird geweckt und der Kunde wird zum Weiterlesen animiert. Eine konzipierte Farbgestaltung ist ebenfalls aussagekräftig, ob wir Schriften als angenehm empfinden.
Typografie in E-Mails ist wichtiger als sie auf den ersten Blick erscheint. Ein gelungenes Schriftbild unterstützt den Inhalt Ihres Newsletters und ist gleichzeitig ein wichtiger Bestandteil des Corporate Designs Ihrer Firma. Obwohl Mailbox-Provider unsere Schrift auf die Probe stellen, lohnt es sich dennoch Sie zu verfeinern. Mit der richtigen typografischen Gestaltung können Sie nicht nur Ihr Newsletter Design optimieren sondern auch die Erwartungen Ihrer Zielgruppe erfüllen.
Sie haben Ihre Wunsch-Typografie entdeckt aber Ihnen fehlt der geeignete Editor? sendeffect bietet Ihnen umfangreiches Funktionsdesign für eine optimale Templateerstellung auch ohne Programmierkenntnisse.
---
Mehr Wissenswertes zum Thema E-Mail Marketing finden Sie auf unserem Blog: www.sendeffect.de/blog
---
Ansprechpartner
Vanessa Marchner
sendeffect
Schulgasse 5
D-84359 Simbach am Inn
Telefon: +49 (0) 8571 - 97 39 697
E-Mail: service@sendeffect.de
https://www.sendeffect.de
Welchen Einfluss hat Typografie im E-Mail-Versand?
Heutzutage gibt es unendliche Möglichkeiten das Schriftbild individuell zu gestalten. Dabei verursacht nicht nur die Entscheidung zwischen bold, italic oder regular bei dem einen oder anderen Kopfzerbrechen. Das Web bietet uns unzählige Fonts und gleichzeitig jede Menge Inspiration, diese einzusetzen. Trotz enormer Auswahl müssen wir uns im E-Mail-Marketing leider häufigen Einschränkungen geschlagen geben.
Welcher Versender kennt das nicht – typografische Elemente im Newsletter erkennt man oft nicht wieder. Ausgewählte Schriften weichen im Postfach von Ihrer Ursprungsform ab. Im schlimmsten Fall zerstören Sie sogar das Gesamtkonzept. Grund dafür ist, dass einige E-Mail-Clients Webfonts nur bedingt oder überhaupt nicht unterstützen. Die geeignete Schriftart zu finden, stellt nicht selten eine Herausforderung dar. Systemschriften wie Arial, Times New Roman oder Helvetica sind mittlerweile standardmäßig auf fast jedem Rechner vorinstalliert. In der Regel werden sie im Postfach korrekt angezeigt und können daher mit geringem Risiko eingesetzt werden.
Wer sein Template mit HTML aufbaut, kann auf sogenannte Web-Fonts zurückgreifen. Diese befinden sich nicht im Betriebssystem sondern werden über einen Link im Code mitgegeben. Webschriften können käuflich erworben oder von Anbietern wie z. B. Google Fonts kostenlos bezogen werden. Ähnlich wie die Bilder im Newsletter wird auch die Schrift einmalig geladen. In der Praxis ist diese Lösung häufig mit mehr Aufwand verbunden. Vor möglichen Darstellungsproblemen empfiehlt es sich Fallback-Schriften, die bereits im Betriebssystem vorhanden sind, zu definieren. Diese treten ein, wenn die vorgesehene Schrift vom E-Mail Client nicht geladen werden kann. Grundsätzlich gilt, um den Weg der Typografie im Newsletter nachvollziehen zu können, führt kein Weg an einen Testversand vorbei.
So nutzen Sie Webschriften in Ihren Newslettern
In diesem Anwendungsbeispiel zeigen wir Ihnen, wie Sie Webschriften in Ihr E-Mail-Template einbinden und Systemschriften als Fallback festlegen. Anbieter wie Google Fonts stellen Ihnen dafür Ihre Wunsch-Typografie teilweise kostenlos zur Verfügung. Für unseren Beispiel-Newsletter wählen wir die Schriftart »Roboto«. Diese hat gleich mehrere Styles in petto, die ebenfalls hinterlegt werden können. Sobald Sie Ihre Schrift ausgewählt haben, präsentiert Ihnen Google Fonts auch schon mögliche Vorgehensweisen für die Einbindung. Damit die Schrift geladen werden kann muss diese im Headbereich verlinkt werden.
[...]
[...]
Ihre Webschrift kann nun erfolgreich im HTML-Code geladen werden. Im nächsten Schritt definieren Sie die Elemente, die mit dieser Schriftart dargestellt werden sollen.
[...]
body {font-family: 'Roboto', Helvetica, sans-serif; font-weight: 300;}
h1 { font-family: Roboto, Helvetica, sans-serif; font-weight: 500;}
Im Style Bereich des Head können Sie Ihre Webschrift in der Fontfamily an erster Stelle hinterlegen. Für den Fall, dass diese auf dem Endgerät nicht angezeigt werden kann, springt die darauffolgende Systemschrift, z. B. Helvetica ein. Zusätzlich können Sie die Anweisung mitgeben, dass eine serifenlose Schrift zum Einsatz kommt, wenn auch die ausgewählte Systemschrift nicht verfügbar sein sollte.
Dadurch, dass einige Provider den Headbereich abschneiden empfiehlt es sich die Schrift bei den einzelnen Elementen zusätzlich als Inline CSS zu definieren.
Typografie im Newsletter
Typografie - richtig gestalten
Serifenlose Schriften gewinnen immer mehr an Beliebtheit in unseren E-Mails. Sie strahlen Modernität aus und sorgen dafür, dass der Leser jedes Wort genauer wahrnimmt. Die klassische Serifenschrift eignet sich dagegen für lange Texte. Die Serifen bilden optisch eine Zeile, die es dem Auge leichter macht dem Informationsfluss zu folgen. Machen Sie sich Gedanken, welcher Stil Ihren Inhalt unterstützt und welche Zielgruppe Sie ansprechen möchten.
Ob Sie die Typografie in Ihrem Newsletter hervorheben oder in den Hintergrund stellen, bleibt Ihnen überlassen. In jedem Fall sollte sie gut lesbar sein. Die Grundform des Schriftbilds besteht aus Schriftfamilie, Schriftgröße und dem Zeilenabstand. Stehen diese im richtigen Verhältnis, lässt sich der Inhalt leicht erfassen. Achten Sie dabei auf genügend Zeilenabstand und ausreichend Spielraum für ein Responsive Design. Textumbrüche auf Smartphones und Tablet sollten wie beim Computerbildschirm stimmig aussehen.
Bringen Sie Struktur in Ihren Newsletter. Diverse typografische Elemente auf beschränkten Inbox-Flächen wirken schnell unübersichtlich. Beugen Sie einer Irritation des Auges vor, weniger ist mehr. Wählen Sie für Ihr Template eine einheitliche Typografie und behalten Sie diese, wenn möglich, bei. Die große Ausnahme bilden Überschriften sowie wichtige Aktionsdetails, diese dürfen gerne besonders hervorgehoben werden. Gestalten Sie unterschiedliche Variationen. Verwenden Sie für Ihre Texte abwechselnd ein- und mehrspaltige Layouts. Die Neugier wird geweckt und der Kunde wird zum Weiterlesen animiert. Eine konzipierte Farbgestaltung ist ebenfalls aussagekräftig, ob wir Schriften als angenehm empfinden.
Typografischer Schlussgedanke
Typografie in E-Mails ist wichtiger als sie auf den ersten Blick erscheint. Ein gelungenes Schriftbild unterstützt den Inhalt Ihres Newsletters und ist gleichzeitig ein wichtiger Bestandteil des Corporate Designs Ihrer Firma. Obwohl Mailbox-Provider unsere Schrift auf die Probe stellen, lohnt es sich dennoch Sie zu verfeinern. Mit der richtigen typografischen Gestaltung können Sie nicht nur Ihr Newsletter Design optimieren sondern auch die Erwartungen Ihrer Zielgruppe erfüllen.
Sie haben Ihre Wunsch-Typografie entdeckt aber Ihnen fehlt der geeignete Editor? sendeffect bietet Ihnen umfangreiches Funktionsdesign für eine optimale Templateerstellung auch ohne Programmierkenntnisse.
---
Mehr Wissenswertes zum Thema E-Mail Marketing finden Sie auf unserem Blog: www.sendeffect.de/blog
---
Ansprechpartner
Vanessa Marchner
sendeffect
Schulgasse 5
D-84359 Simbach am Inn
Telefon: +49 (0) 8571 - 97 39 697
E-Mail: service@sendeffect.de
https://www.sendeffect.de