CSS font-family – Wahl der Schrift

CSs font family, font-stack: Schrift

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 Font Stack

Die Wahl der Schrift für die Webseite liegt Allen am Herzen. Früher haben wir darum eine Wunschschrift mit einer Liste von Alternativen vorgegeben:

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

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

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

Eine Eigenschaft font-color gibt es nicht, sondern die Farbe wird für alle Elemente (font, border, text-shadow, box-shadow) mit CSS color festgelegt.

font-family für Webfonts

Heute setzen die meisten Internet-Auftritte auf Webfonts, die über die font-face-Regel oder von einem externen Schrift-Server (z.B. Google-Fonts) geladen werden.

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://mein-webfont-server/lato.woff2) format ("woff2");
}

Schriften, die mit Font Face geladen werden, brauchen dieselbe Zuweisung. Auch wenn Webfonts mit hoher Sicherheit auf dem System des Benutzers geladen werden, macht eine Liste von Ersatzschriften Sinn.

h1, h2, h3, h4, h5, h6 {
    font-family: Lato, Helvetica, Roboto, sans-serif;
}

Der Browser nutzt die alternativen Schriften der Liste nicht nur, wenn das CDN (Content Delivery Network) nicht erreichbar ist, sondern auch während des Ladevorgangs. font-display: swap vermeidet, dass die Seite ohne Text auftaucht bis die Schrift geladen ist.

Alle Eigenschaften für die Schrift eines Elements in einer CSS-Regel festlegen:

blockquote { font: italic small-caps bold 1.2em/1.5em Georgia,Times,serif; } 

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 ergiebig:

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, ab iOS 10 San Francisco, mit Android kommt Roboto, die der Helvetica ähnlich ist und die unter Mac OS ebenfalls vorhanden 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.

Die Rückkehr der Systemschriften

Die Schriften, die vom Betriebssystem mitgebracht werden, haben in den letzten Jahren große Fortschritte in Hinsicht auf die Lesbarkeit auf den jeweiligen Monitoren bei unterschiedlichen Auflösungen gemacht.

Während viele der frei verfügbaren Webfonts einfach nur eine akzeptable Qualität aufweisen, gehören die Systemschriften heute zur ersten Sahne.

font-family: 
     -apple-system,        // Safari for OS X and iOS (San Francisco)
     BlinkMacSystemFont,   // Chrome < 56 for OS X (San Francisco)
     "Segoe UI",           // Windows
     Roboto,               // Android
     "Helvetica Neue",     // Basic web fallback
     Arial, 
     sans-serif;

Die Seite ist schnell geladen, keine zusätzlichen HTTP-Requests, die Schriften sehen gut aus. Diese Variante ist z.B. der Basis-Font-Stack in Bootstrap 4 und in WordPress 5 (Twentynineteen).

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 großes 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

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