Web-Fonts in HTML5-Anzeigen: Was ist eigentlich ein Web-Font?

Die digitale Werbelandschaft hat sich im letzten Jahr stark verändert. Grund dafür ist vor allem die weitläufige Umstellung von Flash auf HTML5, das bei Google und anderen Anbietern zur bevorzugten Plattform für digitale Anzeigen avanciert ist. Beide, Webseiten und Web-Anzeigen, verwenden jetzt gleichen Code. Diese Anpassung bringt eine ganze Reihe neuer Best Practices mit sich, darunter die Verwendung echter Web-Fonts für HTML-5-Anzeigen statt älterer Font-Lösungen.

Web-Fonts gibt es schon länger; darum sind Sie Ihnen bestimmt schon begegnet. Doch zunächst wollen wir Folgendes klären: Was sind Web-Fonts eigentlich? Schauen wir uns dazu zunächst ein paar FAQs zum Thema Web-Fonts an. Die Verwendung von Web-Fonts stellt sicher, dass der gewünschte Font über alle Bildschirmtypen hinweg konsistent angezeigt wird.

Gut, aber kann ich nicht einfach jeden beliebigen Font in ein Bild einbetten?

Natürlich können Sie das. Designer von Digitalanzeigen nutzen diese Methode seit Jahren als Workaround. Dazu wird einfach Text (als Pixel) mit anderen Darstellungselementen in eine JPEG-, PNG- oder GIF-Datei eingebettet. So können die Designer jeden gewünschten Font verwenden. Aber Vorsicht! Pixel, die wie Text aussehen, sind nicht dasselbe wie ein Web-Font.

Bestenfalls bilden sie einen Übergang von den websicheren Schriftarten zu den Web-Fonts. In der Praxis ist diese Herangehensweise allerdings in vielerlei Hinsicht problematisch, denn ein Text, der ein Bild überlagert, ist weder dynamisch noch HTML. In puncto Workflow ist das Einbetten von Text in Bildern unheimlich ineffizient und schränkt die Anwendungsmöglichkeiten stark ein. Bei dieser Methode muss für jede Placement-Größe eine eigene Anzeige erstellt und individuell angepasst werden. Somit müsste Ihr Kreativteam dieselbe Arbeit immer und immer wieder machen.

Und wenn der Inhalt sich verändert, muss mit großem Aufwand eine ganze Reihe neuer Bilder (bestehend aus Text!) erstellt werden. Die Entwicklung einer responsiven HTML5-Umgebung macht dieser Sisyphusarbeit ein Ende. Durch die Anwendung von Web-Fonts auf HTML-Text kann sich der Text nicht nur automatisch an das veränderte Layout anpassen: Kundenänderungen in letzter Minute – wie etwa ein Ausrufezeichen als Sahnehäubchen – lassen sich ebenfalls in wenigen Augenblicken umsetzen.

Für eine optimale Anzeige müssen Bilder mit Text außerdem für alle verschiedenen Bildschirmauflösungen und Pixeldichten angepasst werden, die die unzähligen Bildschirmgrößen auf dem Markt mit sich bringen. Es müssten also mindestens zwei Bilddateien erstellt werden – eine für die Standardauflösung und eine weitere für hohe Auflösung, zum Beispiel für Retina Displays. Da die Verwaltung von so vielen Bildern unpraktisch ist, verwenden viele Designer nur ein einziges Bild.

Das Ergebnis: Auf Geräten mit hoher Auflösung wird unscharfer Text angezeigt, während Geräte mit niedriger Auflösung, die noch dazu meist langsamer sind, mehr als das Doppelte der Datenmenge herunterladen, die zur Anzeige erforderlich wäre. Durch Web-Fonts gehören diese Probleme der Vergangenheit an, da sie für alle Bildschirmtypen optimal gerendert werden.

Wenn Sie noch nie Web-Fonts gekauft haben: Es ist wirklich einfach. Web-Fonts finden Sie dort, wo Sie auch Desktop-Schriften lizenzieren können. Die meisten Websites weisen darauf hin, welche Schriftarten als Web-Fonts verfügbar sind und lassen Sie auch in Sachen Preisstruktur nicht im Dunkeln.

Die Enterprise-Lizenz umfasst Print-, Web-Fonts, App-Fonts und Ad-Fonts. Über fontshop.com und linotype.com können Sie Web-Font-Lizenzen für einzelne Websites und digitale Anzeigen kaufen. Gerne schicken wir Ihnen ein individuelles Angebot. 

Demnächst Teil II: Mit Web-Fonts überzeugen.