Webtypografie
Webtypografie bezeichnet die Typografie für digitale Texte und den Gebrauch von Schriftarten im Web. In den Anfängen von HTML wurden die Schriftarten und -stile ausschließlich durch die jeweiligen Einstellungen der Webbrowser bestimmt. Es gab keine Möglichkeit, die auf einer Website angezeigten Schriften zu beeinflussen, bis Netscape 1995 das inzwischen veraltete <font>-Tag einführte, das dann in der HTML-2-Spezifikation als Standard festgelegt wurde. Die definierte Schriftart musste allerdings auf dem Benutzerrechner installiert sein. Ansonsten wurde ein „Fallback-Font“, wie z. B. der im Browser eingestellte Standard-Sans-Serif oder Monospace-Font verwendet.
Um die Gestaltung von der Auszeichnungssprache zu trennen, wurde 1996 die erste Version der Cascading-Style-Sheets-Spezifikation (CSS) veröffentlicht und beinhaltete dieselben Möglichkeiten. Moderne Browser unterstützten aber bald das Herunterladen fremder Fonts vom Webserver. Der erste Browser, der diese Technik nutzbar machte, war der Internet Explorer der Version 4.0. Der Font-Download wurde später Bestandteil des Fonts-Moduls von CSS3 und wurde seitdem in nahezu allen modernen Browsern implementiert. Dadurch stieg das Interesse an Webtypografie und dem Gebrauch herunterladbarer Schriftarten in Webseiten.
Formate
Seit der Einführung von @font-face bei CSS2 können rein technisch alle Schriften in Websites eingebettet werden. Zuvor war es nur möglich, „websichere“ Schriften wie Times New Roman, Verdana oder Arial zu nutzen. Diese sind auf den meisten Rechnern vorhanden und können somit immer angezeigt werden.
Zur Regelung der Lizenzrechte der im Internet genutzten Schriften wurde 2009 das Web Open Font Format (WOFF)[1] spezifiziert. Es unterscheidet sich nur gering von den OpenType-Dateien. Eine WOFF-Datei ist ein ZIP-Archiv, das XML-Metainformationen über Lizenz und Hersteller sowie den RawFont enthält. WOFF-Unterstützung gibt es in allen aktuellen Browsern.[2] Bei Vorgängerversionen des Internet Explorers 9 werden nur Webfonts im Embedded-OpenType-Format (EOT-Format) angezeigt. Generell ist nicht das Schriftformat, wie TrueType (TTF), OpenType (OT), Scalable Vector Graphics (SVG) oder PostScript ausschlaggebend, sondern das Hinting, welches die Darstellungsqualität der Schrift im Browser und auf dem Bildschirm verbessert.
Darstellungstechnik
Die Grundlage jeder Bildschirmdarstellung sind Bildpunkte, genannt Pixel (abgeleitet von „Picture Element“). Die ersten Bildschirmschriften waren Pixelfonts. Diese werden so genannt, da sie rein aus Rasterpunkten bestehen und jedes Buchstabenpixel so auf dem Bildschirm angezeigt wird, wie es entworfen wurde, vorausgesetzt, dass das Schriftraster mit dem Bildschirmraster übereinstimmt. Pixelfonts können nachträglich nicht vergrößert werden. Am Anfang der Computertechnik, als die Bildschirmauflösung noch sehr gering war, wurden meist nur Großbuchstaben verwendet, da Kleinbuchstaben in dieser geringen Auflösung nur schwer lesbar waren.
Mit der Entwicklung von hochauflösenden Bildschirmen veränderte sich auch die Webfont-Darstellung. Da die Schriften auf höher aufgelösten Bildschirmen kleiner ausfallen, hat man Webfonts auf 14 bis 16 Pixel vergrößert. Mit der Zeit ging man auch weg von Pixelschriften und hin zu Vektorschriften. Heute werden alle Webfonts zunächst als Vektorgrafiken designt und dann vom jeweiligen Betriebssystem gerastert, d. h. in eine Pixelmatrix umgewandelt, um den Webfont in einem Browser darstellen zu können.
Das Rastern bzw. Rendering hat drei Entwicklungsstufen hinter sich: Zunächst gab es nur die 1-Bit-Methode (auch Schwarz-Weiß-Rendering genannt), danach folgte die Graustufenglättung, heute benutzt man überwiegend die Subpixel-Rendering-Methode, bei der nur eines von drei farbigen Subpixeln (Rot, Grün und Blau) anstatt eines kompletten Pixels angesteuert wird. Dadurch kann eine höhere Schärfe bei der Darstellung von Webfonts erzielt werden. Je nach Browser und Betriebssystem kommen verschiedene Rendering-Methoden zum Einsatz, was zur Folge hat, dass Webfonts von Browser zu Browser unterschiedlich dargestellt werden.
Um die Darstellung von Webfonts zu verfeinern, musste das Rasterverfahren präzisiert werden, dafür wurde das Hinting (vom englischen „Hint“) erfunden und bei den TrueType-Schriften zum Standard erklärt. Beim Hinting werden – wie der Name verrät – Hinweise zum Rastern in der Fontdatei abgespeichert, sodass der Webfont später perfekt ins Pixelraster passt und es nicht zur Unschärfe kommt. Beispielsweise werden Informationen bezüglich der Anpassung des Webfonts an verschiedene Schriftgrößen oder die Wichtigkeit von verschiedenen Linien abgelegt. Für noch prägnantere Ergebnisse übernehmen manche Webfontdesigner das Hinting von Hand. Bei kostenlosen Webfonts wird meist auf das Hinting verzichtet.
Implementierung in CSS
Das folgende Beispiel zeigt eine Implementation für gängige Browser. Es können weitere Formate, etwa für mobile Endgeräte, definiert werden.
@font-face {
font-family: DroidSerif;
src: local("Droid Serif"), /* Prüfung, ob Schriftart-Datei bereits auf dem Computer des Betrachters installiert ist */
url('./pfad/zu/droidserif.ttf') format('truetype'), /* Format für Gecko- und Webkit-Browser */
url('./pfad/zu/droidserif.eot') format('eot'); /*Internet Explorer ab Version 5.5*/
font-weight: normal;
font-style: normal;
}
/* Verwendung der geladenen Schrift */
p {
font-family: DroidSerif;
}
Webfont-Anbieter
Seit der Entwicklung des Web-Open-Font-Formats werden Webfont-Lizenzen verkauft. Die Zahl der Webfont-Anbieter ist stetig gewachsen, ihr Angebot sowie ihre Konditionen sind dabei sehr verschieden. Im Wesentlichen liegen die Unterschiede im Hosting und den Bezahlmethoden. Einige Webfont-Dienste bieten Selbsthosting an, das heißt, per Einmalzahlung erhält man eine Font-Datei und den jeweiligen CSS- oder JavaScript-Code. Somit kann der Webfont auf den eigenen Server hochgeladen und über den Code in die Website eingebettet werden. Bei Anbietern von Open-Source-Schriften ist die Selbsthosting-Lizenz kostenfrei.
Bei den meisten Webfont-Diensten erhält man einen Link zu einem fremden Server, wo der Webfont abgelegt ist. Mittels URL-Angabe unter @font-face wird der Webfont beim Aufruf der Seite geladen.
Probleme mit Webtypografie
Technische Probleme
Extern geladene Schriftarten können unter verschiedenen Betriebssystemen unterschiedlich dargestellt werden.[3] Zudem wird der Text häufig zunächst in einer lokal vorhandenen Schriftart angezeigt, erst wenn der Webfont vollständig geladen ist, ändert sich die Darstellung. Dies kann als Flash of unstyled text, einer Unterart des Flash of Unstyled Content, als störend wahrgenommen werden.
Rechtliche Probleme
Werden Webfonts von externen Servern eingebunden statt auf dem eigenen Webserver abgelegt, entsteht ein Datenschutzproblem: Besucher eines Webservers im EU-Gebiet erwarten mit Recht, dass die Datenschutz-Grundverordnung beachtet wird. Wenn aber Webfonts direkt z. B. von Google Fonts eingebunden werden, können bei jedem Besuch der EU-Website Datenspuren außerhalb der EU entstehen. Weil das z. B. in WordPress bis 2016[4] die Voreinstellung war, wurden WordPress und Google bei den Big Brother Awards 2017 tadelnd erwähnt.[5]
Icon-Fonts
Icon-Fonts sind Webfonts, die Icons statt Buchstaben darstellen und vor allem als funktionale Piktogramme verwendet werden. Sie sind eine Alternative zu reinen Bilddateien oder CSS-Sprites. Da Icon-Fonts meist als Vektorschriften angelegt werden, können diese grafisch skalieren[6] und haben eine geringere Dateigröße als Pixel-Icons. Es gibt zahlreiche freie Icon-Fonts-Sets – das bekannteste ist Font Awesome[7] – oder frei konfigurierbare Zusammenstellungen von Icon-Fonts.[8]
Literatur
- Johannes Bergerhausen, Siri Poarangan: decodeunicode: Die Schriftzeichen der Welt. Hermann Schmidt, Mainz 2011, ISBN 978-3-87439-813-8. Alle 109.242 Schriftzeichen, die man nach Unicode im Web darstellen kann in einem Buch, Deutsch.
- The Unicode Consortium: The Unicode Standard, Version 6.0.0. The Unicode Consortium, Mountain View CA, 2011, ISBN 978-1-936213-01-6. Der offizielle Standard, technisches Manual für IT-Spezialisten, Englisch.
Weblinks
- W3C Working Draft for CSS Fonts
- Real Web Type in Real Web Context Tim Brown, A List Apart, 17. November 2009
- On Web Typography Jason Santa Maria, A List Apart, 17. November 2009
- Artikel im Mozilla Developer Network
Einzelnachweise
- W3C Spezifikation WOFF 5. Mai 2013
- WOFF Unterstützung
- Webdesign mit unüblichen Schriftarten 21. April 2012
- WordPress setzt auf System Schriften. In: make.wordpress.org. 7. Juli 2016, abgerufen am 20. Januar 2022.
- Tadelnde Erwähnungen. In: BigBrotherAwards.de. 5. Mai 2017, abgerufen am 28. Juli 2017.
- Skalierbare, Retina-Display ready Icon Fonts für responsive Webdesigns (Memento vom 27. Mai 2014 im Internet Archive)
- http://fortawesome.github.io/Font-Awesome/
- http://www.weloveiconfonts.com/