Corporate Design im Web

Schriftrevolution im Internet

Obwohl es bereits seit Jahren Möglichkeiten gibt, mehr als eine Handvoll Schriften auf Websites darzustellen, ist erst mit den neuen Systemen und Technologien der Einsatz von speziellen Schriften im Internet technisch sinnvoll und (relativ) einfach möglich.

Entwicklung der Webfonts

Das Grundproblem bestand von Anfang an darin, dass der Browser nur jene Schriften anzeigen konnte, die lokal am Rechner installiert waren. So musste beim Webdesign auf die gängigsten Schriften, wie Verdana, Arial, Times New Roman oder Courier zurückgegriffen werden. Der erste (relativ) weit verbreitete Browser mit graphischer Benutzeroberfläche »Mosaic«, brachte 1993 die Möglichkeit, Schrift als eingebettete Bild-Elemente zu nutzen. Diese Notlösung wird auch heute noch häufig verwendet, obwohl die Probleme damit seit damals nicht kleiner geworden sind. So ist keine Markierung möglich, der Text ist nicht kopierbar, für Maschinen nicht lesbar und nicht ohne Qualitätsverlust zu vergrößern.

1998 brachte dann @font-face auf dem Internet Explorer und Netscape Navigator erstmals die Möglichkeit, Schriften tatsächlich einzubetten, das heißt, die genauere Beschreibung der Schriftart wurde wie die HTML-Seite vom Server geladen. Leider gab es kaum Schriften für diese Technik und eine Konvertierung war so gut wie unmöglich.

In den folgenden Jahren wurden weitere Lösungen entwickelt, die die Darstellung von Nicht-Standard-Schriften in HTML-Seiten ermöglichten. So wurde ab 2003 Schrift durch Background Images ersetzt und der tatsächliche Text hinterlegt, vergrößern oder markieren war damit aber weiterhin nicht möglich. 2004 beziehungsweise 2008 kamen sIFR (hier wurde Text durch kleine Flash-Filme ersetzt) und Cufón (ein Umweg über JavaScript) hinzu, aber auch hier handelte es sich weiter nur um Notlösungen, die die Ladezeiten der Webseiten teilweise empfindlich verlängerten. Lange Zeit waren Flash-Seiten auch deshalb beliebt, weil sie Schriften korrekt dargestellt haben, obwohl dieses proprietäre System nicht für alle Projekte geeignet ist.

Apple integrierte 2008 das @font-face-Tag für Safari, ein Jahr später kam die Unterstützung auf Firefox hinzu und 2010 zogen auch Opera und Google Chrome nach. Damit ist nun echtes Font-Linking möglich. Die Schrift-Datei liegt auf einem Server, zum Beispiel neben der HTML-Datei der Website, und muss nur noch verlinkt werden.

Die zum Einsatz kommenden Schriftformate sind Truetype, EOT oder das neue Web Open Font Format (WOFF). Bei WOFF liegen die Daten in komprimierter Form vor, Ladezeiten werden dadurch verkürzt. Der Container kann darüber hinaus auch noch Metadaten wie zum Beispiel Informationen über Ursprung und Lizenzbedingungen enthalten. WOFF wurde mittlerweile als W3C-Standard definiert. Für heuer darf gehofft werden, dass Microsoft nachzieht und diese Technik auch in den noch immer weltweit am häufigsten genutzten Internet Explorer integriert. Bis dato ist hier nämlich nur die Verwendung des proprietären EOT-Formates möglich (Embedded OpenType), also müssen beispielsweise TrueType-Schriften erst konvertiert werden, um auch im IE korrekt dargestellt zu werden.

Es gibt noch immer Probleme …

Der erste Schritt wäre also gemacht, die nötige Technik des Browsers stellt nicht mehr das Problem für die Verwendung von Schriften im Internet dar. Was bleibt, sind die Herausforderungen bezüglich Lesbarkeit.

Viele Schriften wurden oft nur für den Druck optimiert. Nun haben elektronische Ausgabegeräte wie Bildschirme aber eine wesentlich geringere Auflösung als beispielsweise Bücher (zum Vergleich: 90 dpi auf Monitoren, ca. 2400 dpi bei Offset-Druck). Das bedeutet, dass für die Darstellung der Zeichen wenige Pixel zur Verfügung stehen: Die Schrift wirkt am Bildschirm schnell ausgefranst oder beschädigt. Nur wenige Schriften haben die notwendigen Optimierung, um auch als Brotschrift auf HTML-Seiten verwendet werden zu können.
Heute bietet Fontshop, aber auch andere Schrifthäuser, Schriften an, die bereits gut für die Bildschirmdarstellung angepasst sind.

Nun gibt es also Schriftarten, die auch in Internet auf fast allen Browser dargestellt werden können. Was bleibt, sind – je nach Betriebssystem des Computers – unterschiedliche Systeme zur Schriftglättung. Damit werden unerwünschte Effekte durch die Ausgabe der Zeichen am Bildschirm durch den Alias-Effekt(Treppenbildung) vermindert. Nun reichen die Techniken bei Windows-Systemen von oftmals gar keiner Glättung über ClearType (XP, Vista und Win7) bis hin zu DirectWrite (Win7), auf MacOS X kommt Quartz zu Einsatz, Linux verwendet FreeType. Und so sieht ein und dieselbe Schrift auf unterschiedlichen Systemen oft anders aus. Einiges Testen auf verschiedenen Plattformen bleibt daher unerlässlich.

… aber auch gute Lösungen

Einen derzeit sehr praktikablen Ansatz bietet Typekit. Die Schriftpakete werden auf den schnellen (und angeblich ausfallssicheren) Servern des Anbieters selbst gehostet, der Programmierer muss im HTML-Code der Seite nur noch eine Zeile JavaScript einfügen und kann im CSS die gewünschte Schrift definieren. Die gesamte Technikkomponente wird an Typekit ausgelagert, den zukünftigen Entwicklungen von Browsern und Betriebssystemen werden somit schnellstmöglich Rechnung getragen. Bezahlt werden die Schriften über eine jährliche Gebühr, je nach Anzahl der Schriften, Websites und Page Impressions. Viele Schrifthäuser haben bereits Vereinbarungen mit Typekit geschlossen und bieten dort ihre Schriften an. Auch FontShop-Schriften können dort gekauft oder auch nur gehostet werden, wenn sie bei FontShop gekauft wurden.

Neben den lizenzpflichtigen Schriften der etablierten Schriftschmieden, wird die Zahl der Fonts, die unter Open Font License oder Creative Commons-Lizenz veröffentlicht werden, immer größer. Diese Schriften sind meist nicht mit dem gleichen Aufwand optimiert, aber aus technischer Sicht für Überschriften und Auszeichnungen verwendbar. Kernest bietet eine Vielzahl dieser Fonts und auch gleich das Hosting an. Bei FontSquirrel können einige Schriften auch für den Webeinsatz gefunden werden und Google bietet mittlerweile ebenfalls eine ganze Reihe von Open Source Fonts zum Einbetten auf der eigenen Webseite kostenlos an.

Die Entwicklung von hochauflösenden Displays wird die Verwendung der »richtigen« Schrift weiter vorantreiben. Beim Retina-Display des aktuellen iPhone 4 beispielsweise sind einzelne Pixel durch die hohe Auflösung von 326 dpi praktisch nicht mehr erkennbar. Diese Technologie wird in der einen oder anderen Form in den nächsten Jahren ganz sicher auch auf großformatigen Displays zu Einsatz kommen. Hier wird der Charakter einer Schrift auch auf Monitoren stärker sichtbar.

Eine weitere Lizenz für die Website

Dass für die Verwendung von professionellen Schriften im Internet – auch wenn man diese für den Druck bereits besitzt – zusätzliche Gebühren entstehen, leuchtet insofern ein, dass diese eben auch für diesen Einsatz optimiert wurden. Leider sind bisher oft keine Bundle-Angebote oder Ermäßigungen für Lizenzinhaber vorgesehen.

Bei den Lizenzen scheint es derzeit so, als ob die Schriftenindustrie aus den Fehlern der Musikindustrie gelernt hätte und seine ehrlichen Benutzer nicht mit unsäglichen DRM-Lösungen bestrafen würde. Mit der Wahl von WOFF als Standard macht man dem Benutzer nun starke Zugeständnisse. Die Nutzungsbedingungen liegen der Schrift zwar bei, stellen aber nur eine psychologische und keine technische Hürde für den Klau der Schrift dar. Den Anbietern ist anscheinend klar, dass jeder technische Kopierschutz von Profis ohnehin umgangen werden kann und in den meisten Fällen nur ehrliche Kunden durch Restriktionen verärgert werden.

Schriften als Teil der Marke

Doch was ist nun der konkrete Nutzen? Durch die neuen Möglichkeiten von weboptimierten Schriften kann heute eine Marke auch im Internet konsistent realisiert werden. Nicht alle Schriften sind für Websites geeignet und wirken zum Teil anders. Aber bei der Schriftwahl im Zuge eines Corporate Design-Prozesses sollten heute die neuen Technologien mit berücksichtigt werden.

(Artikel erschienen im Magazin von designaustria, Ausgabe März 2011)