Schriftfamilien und Font-Stacks

Eine Schrift namens „Gibtsnicht Sans“ gibt es auf keinem Gerät. Steht sie allein in font-family, entscheidet der Browser, in welcher Schrift die Seite erscheint. Und das ist selten die, die du wolltest.

01 / 04font-family ist eine Liste

font-family nimmt nicht einen Namen, sondern eine Liste mit Kommas dazwischen, sortiert von speziell nach allgemein. Der Browser geht sie von links nach rechts durch und nimmt die erste Schrift, die er auf dem Gerät findet.

<p class="stack">Die erste Schrift dieser Liste gibt es garantiert nirgends, also greift der nächste Eintrag.</p>
<p class="ohne">Hier steht am Ende nichts Generisches, und das Ergebnis ist Glückssache.</p>

/* Der Browser geht die Liste von links nach rechts durch
   und nimmt die erste Schrift, die auf dem Gerät liegt. */
.stack {
  font-family: "Gibtsnicht Sans", Arial, sans-serif;
}

/* Ohne generischen Fallback landet man beim Standard
   des Browsers, und der ist nicht deine Entscheidung. */
.ohne {
  font-family: "Gibtsnicht Sans";
}

Namen mit Leerzeichen setze ich in Anführungszeichen, "Segoe UI" statt Segoe UI. Pflicht ist das nicht, der Browser liest beides. Ein Name, der mit einer Ziffer anfängt oder einen Punkt enthält, macht ohne sie aber die ganze Zeile ungültig. Bei einteiligen Namen wie Georgia lasse ich sie weg.

Der zweite Absatz im Beispiel ist der Fall, den du vermeiden willst. Die genannte Schrift gibt es nicht, und eine Alternative steht nicht da. Also nimmt der Browser seine Standardschrift, und die ist auf den meisten Systemen eine Serifenschrift. So sieht die Seite dann aus, ohne dass es jemand entschieden hat.

Der Auskunftsstreifen hilft hier nur halb. Bei font-family steht dort die ganze Liste, so wie du sie geschrieben hast, beim ersten Absatz also "Gibtsnicht Sans", Arial, sans-serif. Welchen Eintrag der Browser tatsächlich genommen hat, steht da nicht. Das siehst du nur am Schriftbild. Oben steht eine Schrift ohne Füßchen, unten die Standardschrift des Browsers, auf den meisten Systemen eine mit Füßchen.

02 / 04Die generischen Familien

Am Ende jeder Liste steht deshalb eine generische Familie. Sie nennt eine Art von Schrift, und der Browser sucht sich daraus etwas Passendes.

<p class="a">serif: mit Serifen an den Buchstabenenden</p>
<p class="b">sans-serif: ohne Serifen</p>
<p class="c">monospace: jedes Zeichen gleich breit</p>
<p class="d">cursive: handschriftlich, sehr uneinheitlich</p>
<p class="e">system-ui: was das Betriebssystem benutzt</p>

.a {
  font-family: serif;
}

.b {
  font-family: sans-serif;
}

.c {
  font-family: monospace;
}

.d {
  font-family: cursive;
}

.e {
  font-family: system-ui;
}

• serif hat kleine Füßchen an den Buchstabenenden, sans-serif hat sie nicht.
• monospace gibt jedem Zeichen dieselbe Breite, dicktengleich nennt man das. Code wird damit lesbar, weil Einrückungen untereinander stehen.
• cursive ist handschriftlich und fällt je nach System so unterschiedlich aus, dass man es kaum benutzen kann. Dasselbe gilt für fantasy, das es ebenfalls gibt und das hier deshalb fehlt.

system-ui ist die jüngste und ein Sonderfall. Sie steht für die Schrift, in der das Betriebssystem selbst seine Menüs beschriftet. Auf einem Mac ist das San Francisco, unter Windows Segoe UI.

Daneben gibt es noch ui-monospace, ui-serif und ui-sans-serif, die dasselbe für die jeweilige Kategorie tun, also die Schrift des Systems für Code, für Text mit Füßchen und für Text ohne. Bisher kennt die nur Safari (Stand Oktober 2026). Chrome und Firefox gehen in der Liste einfach zum nächsten Namen weiter.

03 / 04Der System-Font-Stack

Aus system-ui und ein paar konkreten Namen baut man den sogenannten System-Font-Stack.

<h2>Nichts nachladen und trotzdem gut aussehen</h2>
<p>Dieser Text benutzt die Schrift, die dein Betriebssystem ohnehin mitbringt. Auf einem Mac sieht er anders aus als unter Windows, und beide Male heimisch.</p>

/* Der Reihe nach das moderne Schlüsselwort, dann für ältere
   Browser die Namen auf Mac, Windows und Android,
   und ganz am Ende der generische Fallback. */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

Er lädt nichts nach, kostet also keine Anfrage und keine Ladezeit. Er sieht auf jedem Gerät heimisch aus. Und er ist auf jedem System für Bildschirmtext ausgelegt.

Braucht eine Seite kein bestimmtes Erscheinungsbild, nehme ich ihn. Erst wenn eine Marke eine eigene Schrift verlangt, lohnt der Aufwand aus Lektion 6.3.

04 / 04Was die Reihenfolge kostet

Die Schriften in einer Liste sind unterschiedlich breit. Das bemerkt man erst beim zweiten Hinsehen. Wechselt der Browser von der einen zur anderen, bricht der Text an anderen Stellen um.

Bei einem System-Stack merkt das niemand, weil die Schrift sofort da ist. Bei einer nachgeladenen Schrift springt das Layout in dem Moment, in dem sie ankommt. Deshalb wählt man die Fallback-Schrift nicht nur nach dem Aussehen aus, sondern auch nach der Breite. Mehr dazu in Lektion 6.3.

Die Schrift setze ich einmal am body. Sie vererbt sich, also braucht es keine Regel je Element. Ausnahmen gibt es nur zwei. Code-Elemente sollen eine dicktengleiche Schrift haben, und Formularelemente erben die Schrift ohne font: inherit gar nicht erst.

In der Aufgabe bekommen drei Stellen der Seite ihre eigene Liste.