style-sheets.de { Cascading StyleSheets im Praxiseinsatz }

Schriftfamilienangaben

Das Problem mit den "Standard-Schriftarten"

Oft werden Schriftartangaben in der Form font-family: verdana; angegeben. Nun werden viele sagen: wo ist das Problem? Ich will doch, dass die Schrift in Verdana gesetzt wird. Das ist zwar richtig, aber was ist mit denjenigen, die evtl. die Schriftart Verdana (oder welchen Font man auch immer auswählt) nicht installiert haben? Bei denen wird dann der Text in der Standardschriftart des Browsers gerendert. Das ist oft Times, also eine Serifenschriftart. Das ist nun wiederum garnicht im Sinne des Autors.

Da hilft auch kein beschränken auf die sog. "Standard-Webschriftarten" (meist ist damit der Inhalt von Microsofts kostenlosem Webschriftarten-Pack (im Lieferumfang jedes Internet Explorers enthalten) gemeint). Es ist aber nunmal so, dass man als Stylesheet-Autor absolut keine Kontrolle über die Vorraussetzungen auf den Rechnern der Nutzer hat. Damit muss man sich abfinden.

CSS bietet die Lösung

Hat man das erstmal getan, bietet sich auch gleich eine elegante Lösung in form von CSS. Die Eigenschaft font-family: bietet die Möglichkeit dem Browser eine Liste mit mehreren Schriftarten zur Auswahl mitzugeben. Im Fall des Nichtvorhandenseins der ersten genannten Schriftart im Stylesheet versucht der Browser die zweite anzuzeigen, dann die dritte usw..

Hat man nun eine lange Reihe von Schriftarten angegeben, kann man aber trotzdem nicht sicher sein, das mindestens eine auf dem Rechner des Benutzers vorhanden ist. Daher sollte man den Wert der Eigenschaft font-family: am Ende mit einer generischen Schriftfamilie abschließen.

Generische Schriftfamilien

Bei Angabe dieser speziellen Schriftfamilien wählt der Browser des Nutzers eine voreingestellte Schriftart aus. Meist kann der Nutzer diese in den Einstellungen verändern und seinen Vorlieben so anpassen. Will man daher diese Vorlieben der Nutzer respektieren, empfiehlt sich die Angabe von generischen Familien erst recht. Zugelassene Generische Schriftamilien sind in CSS

serif
z.B. Times New Roman od. Georgia
sans-serif
z.B. Arial, Helvetica, Univers od. Verdana
monospace
z.B. Courier, Courier New od. Monaco
cursive
Laut Definition eigentlich Script-Schriftarten wie z.B. Zapf Chancery; unter Windows ist stattdessen allerdings Comic Sans MS default Cursive-Schriftart (u.a. wohl auch, weil keine geeignete Schriftart im Lieferumfang enthalten ist.
fantasy
Laut Definition "dekorative" Schriften die Buchstaben repräsentieren; ich persönlich rate davon ab, sich auf diese generische Schriftfamilie zu verlassen (also sie als letztes in der font-family:-Eigenschaft anzugeben), da solche Schriftarten auf den wenigsten Nutzer-Rechnern vorzufinden sein werden

In der Praxis

Hier ein Beispiel, das sich in vielen Stylesheets im Web wiederfindet:

font-family: verdana;

Und zum Vergleich, wie man es richtig machen sollte ein Auszug aus dem Stylesheet dieser Site:

font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Lucida", Verdana, "Bitstream Vera Sans", sans-serif;

Im Beispiel wird mit Lucida eine recht "exotische" Schriftart gewählt. Sie ist hauptsächlich auf Mac- und Linuxrechnern zu finden (jeweils in verschiedenen Varianten, daher die vielen Schreibweisen). Windows-Benutzer haben sie selten installiert, aber das macht nichts, schliesslich ist meistens mit Verdana ein akzeptabler Ersatz vorhanden.

Fazit

Auch mit CSS ist keine totale typografische Kontrolle möglich. Aber man kann wenigstens den Benutzern, die eine bessere/geeignetere Schriftart installiert haben die Möglichkeit geben, die eigene Website in dieser zu betrachten.


Kommentare

Anmerkungen, Fragen oder konstruktive Kritik zu diesem Beitrag sind immer gerne gesehen.

Einfach eine eMail an Gerrit Kaiser