21. Januar 2015 | | gespeichert unter User Experience, Webdesign.

Wer hat nicht schon einmal geflucht, wenn er eine Website auf dem Smartphone geöffnet hat, die einfach unlesbar war?  Mehr als die Hälfte der Mobiltelefonbesitzer haben ein Smartphone und auch  Tablets werden immer beliebter, und doch gibt es immer noch viel zu viele Webseiten, die sich auf mobilen Endgeräten einfach nicht richtig darstellen lassen. Responsive Design heißt das Zauberwort, mit dem sich der Web-Auftritt optimieren lässt. Weiterlesen »

1. August 2014 | | gespeichert unter Typografie, Webdesign.

Dieser Artikel beruht fast ausschließlich auf der hervorragenden Masterarbeit meines geschätzten Kollegen Michael Walther. Wir beide teilen die Leidenschaft für Buchstabensuppe Typografie und das Wissen um ihre Bedeutung, gerade im Netz. Denn 90% des Webs ist geschriebene Sprache (8% sind Katzenbilder, 1% sind frei-erfundene Statistiken und 1% der ganze Rest).

Damit ist eigentlich selbstverständlich, dass Typografie ein wichtiges Werkzeug ist um 1. Content leicht erfassbar zu gestalten und 2. sich von der Masse abzusetzen (z.B. um seine Marke besonders zu inszenieren). Was im Printbereich seit Jahrzehnten gang und gäbe ist, hat inzwischen auch Einzug in die Netzwelt gehalten. Endlich können Hausschriften mit Ligaturen und anderen Finessen in nahezu allen Browsern vernünftig dargestellt werden. Im Folgenden geht es nun um die Geschichte der Webtypografie, die unterschiedlichen Formate und deren Unterschiede. Ich kürze dazu ganz unwissenschaftlich einige Abschnitte aus Michaels Masterarbeit, ohne auf genaues Zitieren zu achten.

Webfonts und Schriftformate im Web

In der Entwicklung der digitalen Typografie haben sich je nach Anwendung und Technologie verschiedene Dateiformate etabliert. Die in digitaler Form gespeicherte Schriftsätze werden in Raster- und Vektorfonts unterschieden. Rasterfonts, die als Pixelfonts bzw. Bitmap-Font vorliegen, sind auf Grund ihrer eingeschränkten Skalierbarkeit und des hohen Speicherbedarfs für den Einsatz im Internet ungeeignet und werden hier daher nicht genauer betrachtet. Vielmehr gehen wir hier näher auf Outline-Schriften (Vektor-Schriften) im Besonderen auf OpenType-Formate (TrueType, PostScript und SVG) und Webfont-Formate (EOT und WOFF) ein.
Da es heutzutage möglich ist Schriften mit Google Web Fonts oder anderen Webfont-Sammlungen einzubinden, treten klassische Schriftformate wie PostScript und TrueType immer mehr in den Hintergrund. Doch besonders im Zeitraum zwischen 1993 und 2009, als dieser Service noch nicht zur Verfügung stand, war die typografische Darstellung nur über damals festgelegte web-safe Fonts, also websichere Schriften, möglich. Dabei wurde auf lokale Schriftsätze zugegriffen, die auf möglichst vielen Betriebssystemen standardmäßig installiert waren. Eben diese Schriftsätze lagen meist als TrueType- oder PostScript-Format vor.

PostScript

Mit dem eigentlich Fokus auf Druckerzeugnisse entwickelte Adobe 1984 die Programmiersprache PostScript, die eine optimale Printdarstellung ermöglichen sollte. Ein großer Vorteil von PostScript ist der plattformunabhängige Einsatz und die enthaltenen druckrelevanten (hardwarespezifischen) Informationen.

Das auf PostScript basierende Schriftformat ist Kontur-beschreibend und definiert die Umrisse der einzelnen Schriftzeichen.

PostScript-Schriften konnten zwar beliebig groß skaliert, jedoch bei niedriger Auflösung nur schlecht dargestellt werden. Deshalb und auf Grund der hoher Preise für Lizenzen bzw. Patente für Schriften, kam es dazu, dass Apple das TrueType-Format entwickelte.

Post Script Fonts Detail

TrueType

Der TrueType-Standard wurde 1991 eingeführt und beinhaltet, ähnlich dem PostScript-Format, eine vektorbasierte Darstellung der Schriftzeichen. Jedoch werden die Vektorkonturen nicht durch kubische, sondern durch quadratische Bézierkurven dargestellt. Ein direkter Vergleich zwischen Abbildung 29 und Abbildung 30 zeigt den genaue Unterschied zwischen beiden Bézierkurven.

Die Einführung des TrueType-Schriftformats verlief jedoch nur schleppend, da Windows-Versionen vor Windows 95 TrueType-Schriften nur mit Qualitätsverlusten darstellen konnten.

truetype

SVG

Eine weitere Form zur Darstellung von Zeichensätzen ist das Scalable Vector Graphic-Format. Während ein SVG-Grafik-Format eine Grafik durch vektorbasierte Grundformen beschreibt, definiert das Schriften-Format die genauen Formen der separierten Buchstaben mit Hilfe von strukturierten Vektordaten.

Um eine Kompatibilität zu anderen Schriftformaten zu gewährleisten, zeigt im SVG-Format die positive y-Achse nach oben und nicht, wie bei Grafikformaten, nach unten.

OpenType

OpenType ist ein erweitertes Format, dass TrueType und Postscript um bestimmte Elemente ergänzt. Beispielsweise werden für ein Zeichen mehrere Formen wie Kapitälchen, Mediävalziffern oder sogar Ligaturen gespeichert.

OpenType kann auf allen Betriebssystemen genutzt werden, da es ein plattformübergreifendes Format ist und so beispielsweise auf PC und Mac gleich dargestellt werden.

Die Dateiendung des erweiterten TrueType-OpenType-Formates ist äquivalent zum normalen TrueType „.ttf“. Die PostScript-Variante des OpenType-Formates hingegen hat die Dateiendung „.otf“.

Webfont-Formate

Die Geschichte der Webfont-Formate reicht zurück bis 1997. Mit der Veröffentlichung des Internet Explorers 4 und Netscape Navigators 4 war es möglich, gehostete Schriftdateien einzubinden. Beide Browser nutzten dazu die „TrueDoc“-Technologie. Allerdings gab es zu diesem Zeitpunkt kaum Schriften, die in den notwendigen Formaten vorlagen.

Wer sich trotzdem entschied, die neue Font-Embedding-Methode auf einer Webseite zu verwenden, musste die Seite in beiden Versionen erstellen, was neben den fehlenden Schriften dazu führte, dass es damals nicht zum Durchbruch dieser Schrifttechnologie kam.

Erst mit der Weiterentwicklung der Webkit Technologie in Jahr 2007 wurde es möglich, OpenType-Formate mittels @font-face zu verwenden.

Zu diesem Zeitpunkt gab es jedoch keine rechtliche Grundlage zur Verwendung von Schriften im Internet. Da die Schriftdateien nun auf einem Server gehosted wurden, waren sie öffentlich nutzbar und konnten von jedem Anwender heruntergeladen werden, was in den Schriftlizenzen jedoch nicht vorgesehen war. So wurden 2012 das Web Open Font Format (sinngemäß „offene Web-Schrift“, kurz WOFF) und eine neue Form des EOT eingeführt, um technische und lizenzrechtliche Probleme zu umgehen.

Web Open Font Format (WOFF)

Das Web Open Font Format, das 2012 durch den W3C standardisiert wurde, wird von nahezu allen aktuellen Browsern unterstützt. Dieses Format hat eine Containerstruktur, die TrueType und OpenType verwendet und zusätzlich eine XML-Datei mit Meta-Informationen enthält. Die Inhalte der Containerdatei liegen zwar meist in komprimierter Form vor, was die illegale Nutzung durch Dritte jedoch nicht ausschließt. Der genaue Nutzungsbereich wird in den Lizenzen der jeweiligen Schriften beschrieben.

Embedded Open Type (EOT)

Das Embedded OpenType Format ist eine komprimierte Form des OpenType Formats und wird dem Namen entsprechend zum Einbetten in Internetseiten genutzt. Embedded OpenType wurde von Microsoft als Teil des Internet Explorers entwickelt und stetig erweitert. Was ursprünglich ein Konkurrenzprodukt zum PFR-Format von Netscape darstellte, entwickelte sich immer mehr dahin die Inkompatibilität des WOFF-Formats bis zur Version 8 des Internet Explorers zu kompensieren.

Webfonts as a Service

Das Einbetten von Schriften über @font-face ist theoretisch seit 1998 möglich. Jedoch gab es bis 2010 diverse Browser, die „echte“ Webfonts wie EOT und WOFF nicht unterstützen bzw. selbst zum jetzigen Zeitpunkt nicht kompatibel sind.

Daher entschieden sich verschiedene Schriftenanbieter Webfont Services bereitzustellen. Schriften konnten nun nicht mehr nur direkt heruntergeladen, sondern direkt vom Server des Schriftenanbieters über CSS bzw. JavaScript eingebunden werden. So müssen die Schriften weder beim Betrachter der Seite lokal, noch direkt auf dem Server der eigentlichen Webseite vorliegen. Das Einbinden eines speziell generierten Codes im Stylesheet des HTML-Dokuments ist ausreichend.

Daraus ergeben sich technische, wie auch lizenzrechtliche Vorteile. Denn der Seitenbetreiber ist nun nicht mehr für das Hosten bzw. Bereitstellen der Schriftdateien selbst zuständig.

Zu den bekanntesten Anbietern gehören Google Fonts, Adobe Typekit, und Monotype.

Das Einbetten der Schriften kann über 3 Wege geschehen (am Beispiel Google Fonts):
1. in der CSS

 

2. im head-Tag der Seite

 

3 JavaScript Webfont Loader

Dabei bekommt das über den Selector gewählte Element die Eigenschaft „font-family“ mit dem Wert „SCHRIFTNAME“ zugewiesen.

 

Wer speziell angepasste Hausschriften einbinden möchte, kann aber nicht auf Webfont-as-a-Service-Anbieter zurückgreifen, sondern ist weiterhin auf Formate wie das WOFF-Format angewiesen.

Fazit

Webfonts sind endlich handhabbar. Der Dschungel verschiedener Formate und Einbindungsmöglichkeiten ist eigentlich gar nicht so schlimm, wenn man ihn einmal überblickt hat. Wer 2014 immer noch auf Arial, Times New Roman und die andere kleine Riege an Standardfonts setzt, verspielt gestalterisches Potenzial.