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, monospace oder fantasy 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. Heute können wir nicht einmal mehr davon ausgehen, dass auf Windows-Clients Microsoft Office installiert ist, aber die Liste der verfügbaren Schriften unter Windows ist ausgiebig:

Schriftarten, die mit Microsoft Windows ausgeliefert werden

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

MacOS-Fonts

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

Drei Karten zum Schrift-Vergleich
Schriften sind nicht einfach Geschmack. Die Lesbarkeit in unterschiedlichen Schriftgrößen, Schriftstärken und -farben vor hellem und dunklen Hintergrund ist ein Erfolgskriterium.

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.

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

Auf der anderen Seite sind Arial, Helvetica, Verdana, Gill Sans und Times relativ sichere Systemschriften (heute löscht kaum noch jemand Systemschriften von seinem Rechner, um kostenbaren Speicherplatz zu sparen) und bescheren der Webseite kürzere Ladezeiten.

Nett animiert mit vielen interessanten Fakten zur Geschichte der Typografie auf youTube

Text und Ziffern

Wir testen Schriften meist nur mit Text, nicht aber mit Ziffern. Wer Zahlenkolonnen setzt, sollte auch ein Augenmerk auf die Ziffern der gewählten Schrift werfen.

Nicht-proportionale Schriften können durchaus proportionale Ziffern zeigen, bei denen alle Zahlen dieselbe Breite haben. Dann sitzt bei rechtsbündigen Zahlen das Komma immer gleich, ohne dass besondere Formatierungen aufgezogen werden müssen.

Verdana
923456789.111
111496139.968

Arial
923456789.111
111496139.968

Helvetica
923456789.111
111496139.968

Times
923456789.111
111496139.968

Georgia
923456789.111
111496139.968

Open Sans
123456789.111
111496139.968

ö * A 3 Ü ! g " 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