Wird im CSS Stylesheet für ein Element oder einen Abschnitt eine Schriftart definiert, so wird dies mit mit dem Eigenschaft „font-family“ getan. Mit dieser Eigenschaft können nicht nur die zu verwendenden Schriften bestimmt, sondern es kann auch eine Schriftfamilie definiert werden, welche die verwendeten Schriftarten noch weiter eingrenzt. Doch welche Schriftfamilien existieren überhaupt, und für welche Zwecke werden sie verwendet?

Übersicht über die Schriftfamilien

1. Sans-Serif Schriftfamilie (font-family: sans-serif;)

Serifen sind die kleinen schmückenden Häkchen welche sich an den Enden der Buchstaben befinden. Die Schriftfamilie Sans-Serif (übersetzt ohne Serifen) enthält demzufolge Schriften, welche keine solchen Serifen besitzen. Der Sans-Serif Schriftfamilie wird nachgesagt, dass sie auf einem Bildschirm für unser Auge besser lesbar ist als Schriften mit Serifen.

Neben den Schriftarten Geneva und Helvetica, welche vor allem auf dem Mac zu finden sind, sind auf dem PC vor allem die folgenden Schriftarten unter den Serifenschriften weit verbreitet:

2. Serif Schriftfamilie (font-family: serif;)

Schriftarten mit Serifen werden häufig in gedruckten Texten wie Büchern oder Zeitungen verwendet, da sie allgemein dafür bekannt sind, die Leserlichkeit eines Textes zu verbessern. Dies vor allem deshalb, weil die Serifen an den Enden der Buchstaben die Grund- und Mittellinie einer Zeile betonen.

Neben der Schriftart „Times“, welche vor allem auf dem Mac zu finden ist, sind auch die folgenden zwei Schriftarten unter den Serifenschriften weit verbreitet:

3. Monospace Schriftfamilie (font-family: monospace;)

Die Schriftarten der Monospace Familie zeichnen sich dadurch aus, dass jeder Buchstaben der Schrift die gleiche Breite hat. Ein l erhält also die gleiche Breite wie beispielsweise ein v. Die Monospace Schriftfamilie wird vor allem verwendet, um Programmiercode oder Quellcode anzuzeigen. Aber auch grössere Abschnitte und Absätze sind in dieser Schriftart gut lesbar. Hier zwei Beispiel für Monospace Schriftarten:

4. Cursive Schriftfamilie (font-family: cursive;)

Die Schriftfamilie Cursive wird gerne für Überschriften oder Titel verwendet. Diese Schriftarten wirken meist recht verspielt und sind häufig Handschriften nachempfunden. Hier zwei Beispiele für Cursive Schriftarten.

5. Fantasy Schriftfamilie (font-family: fantasy;)

Die letzte Gruppe der Schriftfamilien umfasst dekorative Schriften. Diese sind meist auf verschiedenen Computern nur beschränkt verfügbar, und sollten im Webdesign deshalb nur beschränkt eingesetzt werden. Im folgenden zwei Beispiele von Cursiven Schriftarten:

Wie werden die Schriftfamilien per CSS definiert?

Mit der CSS-Eigenschaft „font-family“ hat man die Möglichkeit, sowohl einzelne Schriftarten zu bestimmen, wie auch am Ende der Definition eine Schriftfamilie anzugeben. Eine typische font-family Anweisung könnte etwa folgendermassen aussehen:

body {

font-family: Verdana, Geneva, Arial, sans-serif;

}

In diesem Beispiel geht der Browser folgendermassen vor, wenn er die Anweisung interpretiert: Zuerst wird er prüfen, ob die Schriftart Verdana auf dem Computer verfügbar ist. Falls dies der Fall ist, wird der body-Bereich der Webseite in dieser Schriftart angezeigt. Ist die Schriftart Verdana nicht vorhanden, wird zur nächsten Schriftart gesprungen. Hier würde also geschaut, ob Geneva auf dem Computer installiert ist. Wird auch diese Schrift nicht gefunden, wird die nächste Schriftart gesucht, hier also Arial. Wenn keine der angegebenen Schriftarten gefunden werden kann, verwendet der Browser die Schriftart, welche er für die definierte Schriftfamilie voreingestellt hat. Der body-Bereich würde hier also mit einer serifenlosen Schrift angezeigt.

Fazit: Mit der CSS-Anweisung „font-family“ hat man die Möglichkeit, verschiedene bevorzugte Schriftarten anzugeben. Falls diese auf dem Browser nicht vorhanden sind, kann man trotzdem noch bestimmen, aus welcher Schriftfamilie die verwendete Schriftart gesucht werden soll. So hat man einen relativ guten Einfluss auf den Charakter, welcher die Website durch die gewählte Schrift bekommen wird.