Wem Webdesign im Sinne von guter Gestaltung am Herzen liegt, der verzweifelte lange Zeit am eingeschränkten Schriftangebot. Eine ausgefallene Schriftart musste bisher meist in eine Grafik eingebettet werden. Das hat den Nachteil, dass Suchmaschinen den Text nicht lesen können. Mit der Entwicklung von Webfonts besteht die Möglichkeit, Schriften mittels CSS einzubinden, die nicht auf dem Computer des Anwenders installiert sein müssen. Die Auswahl an Schriften in der Webtypografie ist dadurch ähnlich umfangreich wie im Printdesign.
Schriften per CSS-Code zuweisen
Wenn auf einer Website eine bestimmte Schrift verwendet werden soll, werden mit Hilfe der CSS-Eigenschaft font-family mehrere Schriftarten und die Schriftfamilie nacheinander aufgelistet. Der Browser geht diese Liste durch und wählt die erste Schrift aus, die auf dem Betriebssystem des Anwenders installiert ist.
So eine Auflistung – der sog. Font Stack – sieht im CSS-Stylesheet beispielsweise so aus:
p {font-family: Georgia, "Times New Roman", serif;}
Die Angabe der Schriftfamilie (z. B. serif) wird als letztes geschrieben und gibt dem Browser die Möglichkeit, einen ähnlichen Schrifttyp zu finden, sofern keine der zuvor notierten Fonts gefunden wurde.
Websichere Schriften – immer nur Arial und Verdana?
Lange Zeit blieb die Schriftauswahl bei der Gestaltung von Websites auf die Systemschriften beschränkt. Da jedoch nicht alle Systemschriften bei Windows und Mac absolut identisch sind, wurde auf eine noch kleinere Schnittmenge zurückgegriffen. Hierbei handelt es sich um die sog. websicherer Schriften, also Schriften die auf allen gängigen Betriebssystemen vorinstalliert sind. Zu diesen websicheren Schriften zählen Arial, Georgia, Times New Roman, Courier New, Lucida Sans und Verdana.
Die Folge der geringen Auswahl an Schriften ist eine gewisse Vorhersehbarkeit und Eintönigkeit des Schriftbildes am Bildschirm. Aber Dank der Webfonts gibt es einen Lichtblick im Bereich Webtypografie.
Websichere Schriften, die bei Windows und Mac auf dem System vorinstalliert sind
Webfonts verändern das Webdesign
Die Entwicklung von Webfonts macht es möglich, Schriften unabhängig vom verwendeten Betriebssystem auf einer Webseite einzusetzen. Wird eine Website aufgerufen, greift der Browser nicht mehr nur auf die lokal installierte Schriftensammlung zurück, sondern er lädt die Schriftdateien von einem Webserver. Voraussetzung hierfür ist die Einbettung des Webfonts mithilfe von der CSS-Regel @font-face, sowie die Angabe der Schriftart im Font Stack.
p {font-family: "MEIN WEBFONT", Georgia, "Times New Roman", serif;}
Seither ist eine individuelle Typografie im Web möglich, wie sie Jahre lang nur im Printdesign umgesetzt werden konnte.
Ursprünglich wurden für die noch gering auflösenden Bildschirme Bitmap-Schriften verwendet, die aus einzelnen Pixeln aufgebaut sind und schlecht skalierbar waren. Im Gegensatz dazu basieren Systemschriften, auch Outline-Schriften genannt, auf Vektoren (TrueType-Format), die ein verlustfreies Skalieren ermöglichen. Alle Webfonts sind Vektorschriften, die zusätzliche Hinweise (Hints) zur Art des Rasterns für die optimale Darstellung am Bildschirm mitliefern (Hinting). Das Ergebnis ist ein gestochen scharfes Schriftbild bei jeder Bildschirmauflösung sowie bei allen Betriebssystemen und Browsern.
Links die Darstellung eines Pixelfonts, rechts die vektorbasierte (Outline) Variante
EOT, TTF, WOFF und SVG
Für das Einbinden von Webfonts sind unterschiedliche Dateiformate für die verschiedenen Browser nötig. Diese müssen im CSS-Code mit @font-face angegeben werden. Das EOT-Format wurde bereits von Microsoft für den Internet Explorer 4 entwickelt und wird auch ausschließlich vom IE unterstützt. Schriften im TTF-Format (True Type Format) werden von Firefox, Safari, Chrome und Opera angezeigt. Das WOFF-Format (Web Open Font Format) ist 2012 vom W3C zum Standard erklärt worden und wird von modernen Browsern unterstützt. Es bietet mit seiner Containerstruktur den Vorteil, dass True Type Schriftarten verlustfrei komprimiert werden und zusätzliche Informationen zur Lizenz mitgeliefert werden können. Das SVG-Format (Scalable Vector Graphics) wird u.a. für die Darstellung auf dem iPhone und iPad benötigt.
Internet Explorer war Vorreiter
Bereits in den neunziger Jahren war es mit dem Internet Explorer 4 möglich, extern gehostete Schriftdateien einzubinden. Aus Mangel an geeigneten Schriften im passenden Format konnte sich diese Technologie allerdings noch nicht durchsetzen.
Jetzt bist Du gefragt
Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.