Wie viele Schriftgrößen braucht ein Design System?

Ein Design System braucht eine Schriftgröße pro typografischer Rolle — Bildunterschrift, Fließtext-Varianten, Überschriftsebenen, Display — und wer die Rollen zuerst definiert, landet meist bei neun bis zwölf benannten Größen. Die Zahl ist ein Ergebnis, kein Ziel: Wenn ein System immer weiter Größen hinzufügt, ohne Rollen hinzuzufügen, wächst die Hierarchie nicht, sie driftet.

Dieser Artikel arbeitet das Rollen-Inventar durch, zeigt einen elfstufigen Satz auf einer echten Skala und zieht die Linie zwischen einer gerechtfertigten Ergänzung und Drift. Die Skalen-Mechanik dahinter behandelt unser Leitfaden zur Schriftgrößenskala.

Warum Rollen zählen statt Größen?

Eine Größe bedeutet für sich genommen nichts — sie ist die Antwort auf eine Aufgabe. Die Aufgaben sind über Produkte hinweg bemerkenswert stabil: etwas Kleines und Zurückhaltendes (Bildunterschriften, Labels), etwas zum längeren Lesen in zwei oder drei Dichten (Fließtext klein, mittel, groß), eine Reihe von Überschriftsebenen (typischerweise vier) und etwas Riesiges für Aufmacher (Display). Zähle die zusammen, und du kommst auf neun, bevor du auch nur einen einzigen Pixelwert angefasst hast.

Veröffentlichte Systeme bestätigen diesen Bereich meist. Die Schriftgrößenskala von Material Design 3 zum Beispiel ist vollständig nach Rollen organisiert — display, headline, title, body, label — jeweils in drei Größen. Das Vokabular unterscheidet sich zwischen Systemen; der zugrunde liegende Schritt ist derselbe: Benenne die Aufgaben, dann weise jeder Aufgabe eine Größe zu.

Deshalb hat auch „wie viele Schriftgrößen?” eine stabile Antwort, während „welche Größen?” keine hat. Die Pixelwerte hängen von deiner Basis und deinem Verhältnis ab; die Menge der Aufgaben, die Text erfüllt, ändert sich von Produkt zu Produkt kaum.

Wie sehen elf Ebenen auf einer echten Skala aus?

Hier ist ein vollständiger Rollensatz auf einer reinen Quarte (1,333) mit zwei Zwischenschritten pro Intervall und einer Basis von 16px — die Formel der modularen Skala size = base × ratio^(i/notes) erzeugt jeden Wert:

Elf Rollen, elf Größen, keine Waisen — jede Größe existiert, weil eine Aufgabe existiert, und jede Aufgabe hat genau eine Größe.

Öffne dieses elfstufige Setup im Scale Composer, um dieselben Schritte als echten Text gerendert zu sehen, von caption bis display.

Wie wirkt eine Skala als Budget?

Ohne Skala ist das Hinzufügen einer Größe reibungslos und unsichtbar: Ein Wert von 17px schleicht sich über das Stylesheet einer einzelnen Komponente ein, niemand prüft ihn als Entscheidung, und ein Jahr später findet ein Audit 14, 15, 16, 17 und 18px, die alle denselben Job machen. Mit einer Skala muss eine neue Größe entweder auf einem bestehenden Schritt landen — was die sichtbare Frage aufwirft welche Rolle ist das? — oder sie sitzt neben der Formel, was sofort erkennbar ist. Die Skala verwandelt stille Drift in eine explizite Entscheidung. Das ist ihre Budget-Funktion, und sie hat wenig mit Ästhetik zu tun.

Der Grund, warum das Budget klein bleiben kann, ist perzeptiv. Ein Leser misst Text nicht; er vergleicht ihn. Hierarchie wird von Unterschieden getragen, die groß genug sind, um wahrgenommen zu werden, und zwei Größen, die ein oder zwei Pixel auseinanderliegen, lesen sich nicht als zwei Ebenen — sie lesen sich als Inkonsistenz oder Fehler. Zusätzliche Größen jenseits dieser Schwelle fügen keine Ausdruckskraft hinzu; sie fügen Rauschen hinzu. Ein gutes Dutzend Rollen entspricht ungefähr der Anzahl an Unterscheidungen, die ein Layout treffen kann, bevor die Unterscheidungen nicht mehr wahrgenommen werden.

Wann ist eine zusätzliche Größe gerechtfertigt — und wann nicht?

Füge eine Größe hinzu, wenn eine neue Rolle auftaucht. Ein Produkt, das datendichte Tabellen entwickelt, bekommt eine echte neue Aufgabe: numerische Werte, die bei hoher Dichte lesbar bleiben müssen und zwischen caption und body-small sitzen. Diese Rolle taucht auf jedem Datenscreen wieder auf, verdient einen Namen und — auf einer Skala mit Zwischenschritten — findet oft einen bereits wartenden Halbschritt.

Füge keine Größe hinzu, weil ein Screen 17px „braucht”. Diese Anforderung ist fast immer ein Layout-Problem im Typografie-Kostüm: Die eigentliche Lücke sind Abstände, Schriftgewicht oder Farbe, und die ehrliche Lösung ist entweder, diese Werkzeuge zu nutzen, oder den Screen an das System anzupassen. Der Test ist übertragbar: Wenn du die Rolle benennen kannst und erwartest, dass sie über mehrere Screens hinweg wiederkehrt, füge sie hinzu; wenn du nur den Screen benennen kannst, lass es.

Was passiert, wenn die Skala mehr Größen erzeugen kann, als du brauchst?

Mehr, als du vielleicht erwartest. Senke das Verhältnis und erhöhe die Zwischenschritte, und die Formel wird großzügig: Ein Verhältnis von 1,125 mit drei Zwischenschritten pro Intervall setzt benachbarte Größen rund 4 % auseinander — etwa 37 Schritte zwischen einer 12px-caption und einem 51px-display. Kein Rollensatz braucht 37 Größen.

Diese Großzügigkeit ist kein Fehler der Skala; sie erinnert daran, wo die Zurückhaltung wohnt. Die Skala ist eine Speisekarte, keine Auslieferungsliste — die benannten Rollen wählen daraus aus, und die Disziplin besteht darin, nicht jeden Schritt zu nutzen, den sie erzeugen kann.

Zähle die Schritte selbst

Den Überschuss zu sehen, macht das Budget-Argument greifbar: Öffne eine Skala mit niedrigem Verhältnis und vielen Zwischenschritten im Scale Composer und zähle die Schritte zwischen der caption-Größe und der display-Größe. Wähle dann die elf aus, die in deinem System einen Namen verdienen würden — und beachte, wie sicher sich die anderen über zwanzig Ablehnungen anfühlen, sobald die Rollen aufgeschrieben sind.