CSS, HTML und Javascript mit {stil}

CSS font-family – Wahl der Schrift

CSS font family Schrift auswählen

CSS font-family gibt eine Wunschschrift vor und listet Alternativen für den Fall, dass die Schrift auf dem System des Benutzers nicht installiert ist.

Ohne die font-face-Regel können Browser nur Schriften anzeigen, die auf dem System des Besuchers installiert sind. Darum erlaubt CSS Alternativen neben der Wunschschrift.

Am Ende der Liste kann noch eine allgemeine Schriftklasse wie serif, sans-serif oder monospace folgen.

Der Browser wird die erste Schrift der Auswahlliste benutzen, die auf dem Zielsystem installiert ist oder durch die font-face-Regel geladen wurde. Die Hochkommas sind optional, aber wichtig, wenn der Name Leerzeichen enthält: z.B. "Times New Roman".

body { font-family: Verdana, 'Lucida Sans Unicode', sans-serif }

Wenn keine Hochkommas verwendet werden, soll der Browser alle Leerzeichen entfernen und den Namen des Fonts als Zeichenkette ohne Leerzeichen umsetzen.

Die Liste kann beliebig viele Schriften enthalten. Der Browser wird die erste Schrift wählen, die er auf dem System des Besuchers findet.

Welche Schriften sind schon da?

Eine Abfrage, welche Schriften beim Besucher installiert sind, gibt es natürlich nicht. Gehen wir einfach davon aus, dass auf den meisten Windows-Clients Microsoft Office installiert ist, ist eine Blick auf die von Office installierten Schriften eine gute Glaskugel:

Schriftarten, die mit Microsoft Office 2010-Produkte installiert sind

Für die andere Seite – iPhone und iOS – gibt es ebenfalls eine Liste:

iOS-Fonts

Auf iPhone und iPad herrscht seit iOS 7 eine Helvetica Light, mit Android kommt Roboto, die der Helvetica ähnlich ist. Schriften unter Unix sind ein bewegliches Ziel.

Times New Romane Tt Ee Rr ÜüTt Ee Rr Üü Löffelstiel abcdefghinjklmnopqrstuvwxyzäüöß0123456789 Robotoe Tt Ee Rr ÜüTt Ee Rr Üü Löffelstiel abcdefghinjklmnopqrstuvwxyzäüöß0123456789 Helveticae Tt Ee Rr ÜüTt Ee Rr Üü Löffelstiel abcdefghinjklmnopqrstuvwxyzäüöß0123456789

CSS font-family Vererbung

Da die Schriftfamilie vererbt wird, erbt jedes untergeordnete Element die Schriftfamilie von seinem Eltern-Element – es sei denn, für ein Element ist ein individueller CSS-Stil vermerkt.

Um die Schriftfamilie für das gesamte Dokument festzulegen, reicht es also, font-family für das body-Element der Seite aufzunehmen.

body { font-family: TrajanPro-Regular, 'Lucida Grande', sans-serif; }

CSS font-family Schriftklassen

Am besten sitzt stets eine allgemeine Schriftklasse als letzter Eintrag in der Auflistung. Wenn der Browser keine der Schriften aus der Liste findet, wird er versuchen, zumindest eine Schrift dieser Klasse zu verwenden.

Für die Schriftklasse gibt fünf Varianten:

  • serif • Serifenschrift wie Times, Garamond oder Georgia
  • sans-serif • serifenfreie Schrift wie Arial, Helvetica oder Frutiger
  • cursive • keine Kursivschrift, sondern eine Schreibschrift
  • fantasy • Fantasieschrift wie Comic Sans Serif
  • monospace • Schrift mit fester Laufweite für jedes Zeichen wie Courier oder Monaco
<p style="font-family: cursive;">Der frühe Vogel fängt den Wurm.</p>

Darstellung

Der frühe Vogel fängt den Wurm.

Der frühe Vogel fängt den Wurm.

Der frühe Vogel fängt den Wurm.

Der frühe Vogel fängt den Wurm.

Der frühe Vogel fängt den Wurm.

Welche Schriften bei der Anwendung der Schriftklasse tatsächlich zum Einsatz kommt, lässt sich nicht vorhersagen.

Zuverlässige Schriften für Webseiten?

Die alternativen Schriften müssen sorgfältig gewählt werden. Arial und Helvetica sind Schriften, die eine ähnliche Größe aufweisen. Verdana hingegen ist größer, läuft breiter und wird zu einem vollkommen anderen Zeilenumbruch führen.

Bis vor kurzer Zeit gab es nicht viele Schriften, die auch nur halbwegs zuverlässig auf den Rechnern der meisten Besucher installiert waren. Heute käme noch die Frage hinzu, welche Schriften es für iPad, Android und Smartphones gibt und ob diese Schriften gut lesbar sind.

Times, Times New Roman
Die Königin hob ihre güldene Schleppe und suchte nach 57 Spiegeln.
Georgia
Die Königin hob ihre güldene Schleppe und suchte nach 57 Spiegeln.
Helvetica, Arial
Die Königin hob ihre güldene Schleppe und suchte nach 57 Spiegeln.
Verdana
Die Königin hob ihre güldene Schleppe und suchte nach 57 Spiegeln.

Aber mit CSS3 sind webfonts – ladbare Schriften – zum Standard geworden und geben dem Webdesign nicht nur ein größeres kreatives Potential, sondern auch mehr Sicherheit.

Mit vielen interessanten Fakten zu Geschichte der Typografie: eine umfassende Infografik