Texte im Web … mal anders

Kürzlich wurde ich mit der Frage konfrontiert, inwiefern sich auf Websites auch Schriftarten nutzen lassen, die nicht zu den üblichen Verdächtigen wie etwa Arial, Verdana oder Times New Roman zählen. In der Folge nun der Versuch einer allgemeinverständlichen Antwort.

De facto war es bis vor kurzem so, dass auf den Websites nur Schriften für die Darstellung von reinem Text genutzt wurden, die auch auf den Rechnern der Nutzer lagen. Da es ein paar Schriftarten gibt, die bei jedem Betriebssystem standardmäßig mit ausgeliefert werden, wie z.B. Arial, Times New Roman, etc., gelten diese als “websicher”.

In jedem Browser sind Schriftarten als Standard-Schriftarten voreingestellt. D.h., wenn man in eine HTML-Datei einfach nur einen Text reinschreibt und für diesen nicht via CSS speziell eine andere Schriftart angibt, dann wird dieser Text im Browser in der voreingestellten Standard-Schriftart dargestellt.

CSS gibt einem zudem noch die Möglichkeit eine Art Schriftarten-Favoriten-Liste anzugeben. Das sieht dann z.B. folgendermaßen aus:

font-family: Helvetica, Arial, sans-serif;

Diese Angabe interpretiert der Browser, in dem er von vorne nach hinten schaut, ob eine der Schriftarten auf dem Computer installiert ist und sobald er eine findet, stellt er den dazugehörigen Text in dieser dar. In dem Beispiel oben, schaut er zunächst, ob die Schriftart Helvetica installiert ist. Hat der User einen Mac, so ist dies in aller Regel der Fall. Bei einem Windows-Rechner eher nicht. Hat der User also einen Windows-Rechner, so wird der Text höchstwahrscheinlich in Arial dargestellt werden. Sollte auf dem benutzten Rechner weder Helvetica noch Arial installiert sein, so greift der Browser in der Darstellung des Textes auf die in seinen Einstellung als Standardschriftart für eine Sans-Serif-Schriftart zurück.

So ist sichergestellt, dass der Text im Normalfall in einer Schriftart dargestellt wird, die auch zum Design passt. D.h. wahrscheinlich sieht die Website mit der Schriftart Helvetica genau so aus, wie es sich der Designer gewünscht hat. Da aber Arial zwar nicht so gut aussieht, aber zumindest die Gesamtoptik nicht empfindlich stören wird, wurde diese als erste Fallback-Schriftart gewählt. Da viele Browser für Fließtext meist eine Serifen-Schriftart als Standard-Schriftart definiert haben, kann man mit sans-serif als der zweiten Fallback-Angabe immerhin noch beeinflussen, dass der Text zumindest in einer serifenfreien Schriftart dargestellt wird.

Via CSS hat man jedoch eine interessante Möglichkeit, Text in einer selbst gewählten Schriftart darzustellen, in dem man @font-face nutzt. Damit kann man eine auf einem Webserver liegende Schrift-Datei einbinden, auf die man dann in in der CSS-Eigenschaft font-face zugreifen kann. Im CSS-Code sieht dies z.B. so aus:

@font-face {
font-family: 'XYZschrift';
src: local('XYZschrift'), url('XYZschrift.ttf') format('truetype');
}

Und das Beispiel von oben lässt sich dann folgendermaßen erweitern:

font-family: XYZschrift, Helvetica, Arial, sans-serif;

In diesem Beispiel versucht der Browser zunächst die Schriftart XYZschrift zur Darstellung des entsprechenden Textes zu nutzen. Bei modernen Systemen und Browsern wird dies auch gelingen. Dort wo dies nicht gelingt, wird wieder der Reihe nach versucht werden eine Schriftart zu finden, in der sich der Text darstellen lässt.

Da es bei der Nutzung einer Schriftart auch auf die entsprechenden Lizenzen zu achten gilt, muss man beim Erwerb einer Schriftart auch darauf achten, dass man auch die Nutzungsrechte fürs Web mit erwirbt. Zudem gibt es inzwischen auch Webschrift-Anbieter, bei denen man das Recht eine Schriftart auf der Website erwerben kann, die Schriftarten jedoch auf deren Servern verbleiben. Zu diesen Anbietern gehören u.a. Typekit oder Typotheque. Auch Google gehört zu diesen Anbietern, meines Wissens muss man dort aber für die Nutzung nichts zahlen.

CSS, Schriftarten, Web-Gestaltung, Websichere Schriftarten

10. Mai 2011
von Matthias Zellmer