CSS font-family – Schrift für Webseiten

Der Font Stack

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.

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 viele Internet-Auftritte auf Webfonts, die über die font-face-Regel geladen werden.
Nur Achtung: Bei Schrift-Servern – in erster Linie Google-Fonts, dem Datenschutz zuliebe Schriften immer herunterladen und vom eigenen Webspace einbinden!

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

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.

CSS font – KurzschriftAlle 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:

Windows 11 font list auf learn.microsoft.com

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

Fonts included with macOS Monterey auf support.apple.com

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.

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

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.

CSS Webfonts – ladbare Schriften – sind 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 halten.

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.