Web-Fonts in HTML5-Anzeigen, Teil 2: Mit Web-Fonts überzeugen!

Hier kommt Teil 2 einer zweiteiligen Reihe über die Besonderheiten von Web-Fonts und HTML5-Fonts. Lesen Sie auch den ersten Teil: Was ist eigentlich ein Web-Font?

Eine kurze Zusammenfassung des ersten Beitrags: Web-Fonts sind Schriften, die nicht auf dem Computer vorinstalliert sind, sondern bei Bedarf auf ein Gerät herunterladen, sobald HTML5-Inhalte geliefert werden. Anders als in Bildern eingebetteter Text handelt es sich bei Web-Fonts um Live-Text. Aber was genau spricht für die Verwendung von Web-Fonts im Vergleich zu anderen Lösungen? Die wichtigsten Vorteile im Überblick:

Branding

Die meisten Betriebssysteme beinhalten standardmäßig eine bestimmte Anzahl vorinstallierte Schriften. Das sind häufig 100 oder mehr Fonts, also nicht gerade wenige. Sicherlich sind bewährte Systemschriften geeignet, um die Identität einer Marke zu vermitteln. Die Auswahl ist jedoch begrenzt und man hat sich häufig bereits daran sattgesehen, sodass die Gefahr besteht, dass das Branding beliebig wirkt. Auch sind Systemschriften nicht exklusiv. Den Wiedererkennungswert der Marke mindert die Verwendung von Font-Familien aus dem öffentlichen Systemschrift-Pool. 

Individuelle Web-Fonts bieten eine Vielzahl an Gestaltungsmöglichkeiten und ermöglichen eine einheitliche Anwendung in allen Umgebungen. Wenn das Corporate Design Helvetica® verwendet, muss etwa für die Anwendung in Windows- oder Android-Systemen ein Helvetica®-Web-Font eingesetzt werden. Es geht schließlich um Ihre Marke – und die erhält ihre einzigartige Persönlichkeit durch das Schriftdesign!

Einheitlich auf allen Geräten

Die Font-Bibliotheken von mobilen Geräten sind noch limitierter als die von Desktop-Computern. Auf einigen Geräten sind nur ein paar Dutzend Schriften verfügbar. Manche Systemschriften werden auf dem Laptop zwar optimal angezeigt, funktionieren aber nicht in gleicher Weise auf dem Smartphone. Mit Web-Fonts hingegen können Sie sicherstellen, dass Ihre HTML5-Anzeige – und somit Ihr Markenauftritt – auf allen Endgeräten einheitlich wiedergegeben wird.  

Dynamischer Text

Lokalisierung, Personalisierung und Übersetzung sind heute feste Bestandteile des digitalen Marketings: dynamischer Content ist gefragt. Doch der lässt sich nicht so einfach mit in Bilddateien eingebettetem Text erstellen. Live-Text* hingegen wird so codiert, dass er sich spontan verändern kann, was bedeutet: Bahn frei für echte datengestützte und personalisierte Werbekampagnen.

Um etwa unterschiedliche Botschaften in verschiedenen Regionen zu vermitteln, wird einfach der entsprechende Anzeigentext mit dem Hinweis kombiniert, wo die Werbung erscheinen soll. Genauso einfach lassen sich auch Textaktualisierungen umsetzen. Das Ergebnis: Ihre Corporate Identity wird mit dynamischem Text auf Basis von Web-Fonts immer bestens präsentiert.

* Rein technisch geht das natürlich schon, doch 1) müssten für alle Textvarianten eigene Bildelemente und 2) diese Bilddateien in allen denkbaren Anzeigengrößen und Bildschirmauflösungen erstellt werden. So kann sich eine einfache Kampagne in ein Mammutprojekt mit unzähligen Bilddateien verwandeln. Hinzu kommen häufig kurzfristige Textänderungen, für die die betroffenen Bilder neu aufgesetzt werden müssen.

Responsives Design

Live-Text ist skalier- und wandelbar, das heißt, durch die Verkleinerung oder Vergrößerung der Schrift sowie durch Textumbrüche passt er sich automatisch allen Anzeigendesigns an. Einschränkungen durch feststehende Anzeigengrößen sind mit der Verwendung von Live-Text und Web-Fonts Schnee von gestern. Und es geht noch besser: Mit Web-Fonts sorgen Sie für einen perfekten Markenauftritt. Durch das Einbetten von Text in Bildern gestaltet sich dies viel schwieriger. Denn wie bei dynamischen Inhalten müssten für jede Anzeigengröße jeweils eigene Bildelemente erstellt werden, anstelle von nur einer Datei, die sich ganz einfach an unterschiedliche Layouts anpassen kann.

„Wir konzentrieren uns ganz auf die Umstellung hin zum Responsive Webdesign“, erklärt Matthew Snyder, Mitgründer und CEO von ResponsiveAds. „Sobald Verlage, Marken und Agenturen auf den Geschmack von Web-Fonts gekommen sind, gehört eine gute Typografie – neben Animation, Content Marketing und Video – für sie zu den Top-Qualitätsfaktoren bei der Markenbindung.“

Lesbarkeit auf Low-Res-Geräten

Einige Systemschriften gehen auf Designs zurück, die aus der Zeit vor dem Computer stammen. Dank Optimierung funktionieren sie zwar auf Monitoren und einigen Bildschirmen, doch sie entsprechen nicht den aktuellen Anforderungen an die Lesbarkeit von Fonts, die speziell für digitale Bildschirme entworfen wurden.

Aufgrund ihres großzügigeren Designs bringen Web-Fonts auch Vorteile für Geräte mit niedriger Auflösung. Größere Abstände zwischen Zeichen und Wörtern – die keinen Einfluss auf das Gesamtlayout des Textes haben – sorgen für eine bessere Lesbarkeit und eine präzisere Darstellung der einzelnen Buchstaben. Gleichzeitig werden Buchstaben, die aus dicken und dünnen Linien bestehen, an den feinen Stellen etwas ausgeprägter dargestellt. Sprich: keine verpixelten oder gar verschwindenden Linien mehr, sondern optimal lesbare und klare Markenbotschaften auf nahezu allen Bildschirmen – vom Smartphone bis zur digitalen Außenwerbung am Times Square!

Vereinfachter Workflow

Das Einbetten von Text in Bildern kostet Unmengen Zeit. Bei der Verwendung von Web-Fonts reichen dagegen ein paar Klicks, um zwischen verschiedenen Schriften zu wechseln und das finale (responsive) HTML5-Design auf den Markt zu bringen. Es ist somit viel einfacher, verschiedene Möglichkeiten zu testen und dem finalen Layout den letzten Schliff zu verpassen. Ein Bild mit eingebautem Text muss dagegen immer wieder neu erstellt werden, um unterschiedliche Schriften zu integrieren und Anzeigen in verschiedenen Größen aufzusetzen. „Designer sind jetzt zehnmal schneller, da sie Änderungen direkt umsetzen können.“, so George Penston, Vizevorsitzender Produkt und Design bei Flite. „Das ist ein großer Sprung nach vorne und zeigt, wie Designer zukünftig mit Schrift arbeiten werden.

Designer sind jetzt zehnmal schneller, da sie Änderungen direkt umsetzen können. Das ist ein großer Sprung nach vorne und zeigt, wie Designer zukünftig mit Schrift arbeiten werden. – George Penston, Vizevorsitzender Flite.

Mehr Freiraum beim Design 

Ein kompletter Schriftsatz liegt in der Regel zwischen 50 und 100 KB, manchmal auch bei 125 KB und mehr. Schriftdateien für asiatische Sprachen können sogar größer sein als 6 MB. Das ist riesig, wenn man bedenkt, dass die maximale Dateigröße für HTML5-Ads normalerweise bei rund 200 KB liegt. Der Vorteil von Web-Fonts liegt auch hier auf der Hand: Sie werden unabhängig von der Anzeige gehostet und auf Befehl heruntergeladen.

Es entsteht also freies Datenvolumen für Animationen und höher auflösende Bilder sowie insgesamt mehr Gestaltungsfreiraum beim Anzeigendesign. Ein weiterer Pluspunkt: Man kann sogar beliebige Subsets von Web-Fonts definieren. Das heißt, die Anzeige lädt nur die Zeichen herunter, die Sie ausgewählt haben. Durch die so gewonnene schnellere Ladezeit müssen Sie bei der Schriftwahl keine Kompromisse mehr eingehen und profitieren gleichzeitig von allen Live-Text-Vorteilen!

Lesen Sie auch den ersten Teil unserer Beitragsreihe: Was ist eigentlich ein Web-Font?