How To: Web Fonts für Landing Pages und E-Mails

World Wide Web Fonts: So behalten Sie den Überblick

Was sind Web Fonts?

In der Welt der Web Fonts unterscheidet man zwischen den Web Safe Fonts und den Web Fonts.

Web Safe Fonts sind herkömmliche Schriftarten, die jeder kennt. Damit eine Schriftart angezeigt wird, muss sie auf dem Gerät des Lesers installiert sein. Bei den System-Fonts wie Arial, New Times Roman, Verdana und Georgia ist dies der Fall. Sie werden von allen E-Mail-Clients und Endgeräten unterstützt. Mit der Verwendung dieser Standard-Fonts können Sie sicher sein, dass Ihre Schriften bei jedem User gleich dargestellt werden.

Web Fonts wurden hauptsächlich designt, um auf Webseiten dargestellt zu werden. Trotzdem ist die Verwendung von Web Fonts für E-Mails ebenso möglich. Bekannte Web Fonts sind Open Sans und Roboto. Diese Schriftarten müssen bei Ihren User nicht vorinstalliert sein, um auf den Devices dargestellt zu werden. Die Informationen der Web Fonts werden von einem externen Server bezogen. Mit der Verwendung von Web Fonts können Sie Ihre Kreativität freien Lauf lassen. Im Internet finden Sie unzählige Services, die verschiedenste Web Fonts z.T. kostenlos anbieten. Lassen Sie sich inspirieren.

Welche E-Mail-Clients unterstützen Web Fonts?

Die bekanntesten E-Mail-Clients ermöglichen die Nutzung von Web Fonts. Bei Gmail gibt es eine kleine Ausnahme: nur zwei Web Fonts werden unterstützt. Bei den restlichen E-Mail-Clients gibt es keine Komplikationen. Darunter zählen:

• Apple Mail
• iOS Mail
• Google Android 
• Samsung Mail
• Outlook for Mac 
• Outlook for App
• Gmail (nur Roboto und Open Sans) 

Wo finde ich Web Fonts?

Google Fonts

Der bekannteste und auch beliebteste Web Font Service ist Google Fonts. Hier können Sie von über 900 Font Familien die passende Schriftart für Ihr Unternehmen finden. Der Zugang sowie der Download ist unkompliziert, kostenlos und lizenzfrei.

Adobe Fonts

Auch Adobe bietet eine große Auswahl an exklusiven Web Fonts. Stöbern Sie durch tausende Optionen von Schriftstilen. Mit dem Abonnement der Creative Cloud erhalten Sie automatisch den Zugriff und die Lizenzen zum privaten und kommerziellen Gebrauch.

Wie baue ich Web Fonts in Newsletter oder Landing Pages ein?

Sie brauchen keine Erfahrungen mit dem Programmieren zu haben, um Web Fonts verwenden zu können. Mit JUNE geht’s ganz einfach: Wählen Sie im Landing Pages oder Newsletter Editor unter „Styles“ die Headlines- und Text-Einstellungen aus. In das Textfeld „Font Family“ tragen Sie nun den Namen einer beliebigen Schriftart ein. Diese wird sofort in Ihrem Template dargestellt.

Testen vor der Veröffentlichung

Die Auswahl der passenden Fonts kann zeitintensiv werden. Umso wichtiger ist es, dass Ihre ausgewählten Schriftarten auch bei Ihren Kunden dargestellt werden. Testen Sie Ihre Newsletter im JUNE Editor, indem sie auf „Send Test“ in der oberen Spalte klicken. Hier können Sie Ihre E-Mail an Test-Accounts versenden. Im Landing Pages Editor klicken Sie auf „Test“ -> „Preview“, um Ihre vollständige Landing Page in einem neuen Tab sehen zu können. Das Testen vor der Veröffentlichung ist nicht nur sinnvoll, um sicherzugehen, dass Web Fonts bei Ihren Kunden und allen Endgeräten perfekt dargestellt werden, sondern auch zu prüfen, dass Texte nicht brechen sowie restliche Designs problemlos gezeigt werden.

Fallback Fonts hinzufügen

Fügen Sie Fallback Fonts hinzu, um eine passende Schriftart zu gewährleisten, wenn Ihre ausgewählten Web Fonts von einem E-Mail-Client nicht unterstützt werden. Fallback Fonts sollten immer Web Safe Fonts sein. Verwenden Sie keine Fallback Fonts werden die Default Fonts der E-mail-Clients verwendet. Dies ist z.B. Helvetica bei Apple Mail, Arial bei Gmail und Calibri bei Outlook.

Wie viele Schriften brauche ich überhaupt für E-Mails und Websites?

Die Auswahl Ihrer Fonts ist abhängig von dem Image, das Sie vermitteln wollen. Für ein cleanes Design ist eine einzige Web Font völlig ausreichend. Um ein spannendes und kreatives Bild zu vermitteln, nutzen Sie zwei bis drei verschiedene Web Fonts.

Die Schriftarten sollten hierbei für alle Gegebenheiten bestimmt sein:

• Headlines
• Paragraph 
• Buttons
• Formulare 
• Zitate

Wenn nur eine Schriftart verwendet wird, ist es wichtig, die einzelnen Abschnitte voneinander deutlich zu unterscheiden. Mit der Nutzung von verschiedenen Schriftgrößen, bold und italic sowie verschiedenen Farben machen Sie die Hierarchie zwischen Headline und Body erkennbar. Achten Sie zudem auf die Lesbarkeit, besonders bei kleinen Schriftgrößen.

Fazit