Schriftgewichte auf einer Skala: Größe und Gewicht kombinieren

Typografische Hierarchie hat zwei Regler — Größe und Gewicht — und beide bewusst zu kombinieren schlägt es, einen davon auszureizen. Das gängige Muster: Fließtext bei 400, Überschriften bei 600–700, kleine Labels bei 500 und Display-Text bei 700 oder höher mit engerem Zeichenabstand. Eine Schriftgrößenskala beantwortet die Frage nach der Größe; dieser Artikel beantwortet die Frage direkt danach — welches Gewicht zu welcher Größe passt und wann Gewicht die Aufgabe einer Größe übernehmen kann.

Die Logik in Kurzform: Größe ordnet Text aus der Ferne, Gewicht ordnet ihn aus der Nähe, und kleiner Text braucht mehr Gewicht statt weniger. Das durchgerechnete Beispiel unten zeigt dieselbe Karte auf beide Arten gebaut. Dieser Artikel ist Teil unseres Leitfadens zur Schriftgrößenskala.

Warum wichtigen Text nicht einfach größer machen?

Weil Größe ein teurer Regler ist. Jede Stufe an Wichtigkeit, die du allein über die Größe ausdrückst, verbraucht einen Schritt auf der Skala — und die Schritte wachsen multiplikativ, sodass einer reinen Größen-Hierarchie entweder die brauchbaren Schritte ausgehen oder sie mit einer obersten Stufe endet, die weit größer ist als das Design braucht. Gleichzeitig häufen sich die Zwischenfälle: Ein Label, das den Fließtext daneben überordnen sollte, aber innerhalb einer kleinen Komponente sitzt, hat keinen Platz mehr. Mach es größer, und es sprengt die Komponente; lass es, und es verschwindet.

Gewicht ist der zweite Regler, der das löst. Zwei Textstücke können sich eine Größe teilen und trotzdem klar geordnet sein — eine Zeile mit Gewicht 600 liest sich als Überschrift zu einer Zeile mit Gewicht 400 bei gleicher Größe, ohne dass ein neuer Schritt nötig ist. Der intuitive Grund, warum Gewicht funktioniert: Das Auge liest Dunkelheit als Betonung, bevor es Maße liest. Ein schwereres Gewicht bringt mehr Tinte auf dieselbe Fläche, und diese Dichte wird präattentiv wahrgenommen — so, wie ein fettes Wort in einem Absatz heraussticht, bevor du überhaupt etwas gelesen hast. Größe sagt, wie weit oben im Dokumentbaum du dich befindest; Gewicht sagt schau zuerst hierher in Reichweite.

Welches Schriftgewicht passt zu welcher Größe?

Gewichte in CSS sind numerisch, 100–900 — die Zuordnung von Namen wie „regular” und „bold” zu Zahlen ist in der font-weight-Referenz definiert. Hier eine durchgerechnete Kombination auf einer modularen Skala mit 16px-Basis (Verhältnis 1,333, zwei Noten pro Intervall):

Beachte, was nicht in der Tabelle steht: 900. Sehr schwere Gewichte schließen die Punzen — die eingeschlossenen Weißräume in Buchstaben wie e und a — und bei den meisten Textschriften atmen sie erst, wenn die Größe groß genug ist, um diese Punzen offen zu halten. Ein Gewicht von 800–900 bei 51px kann spektakulär sein; dasselbe Gewicht bei 21px ist ein Fleck. Schwere Gewichte brauchen Größe; sie ersetzen sie nicht.

Sieh dir die Kombinationen live an: Öffne diese Skala im Scale Composer — jede Ebene trägt ihr eigenes Gewicht neben ihrer Größe, von 500 am Label-Ende ansteigend bis 700 im Display. Ändere das Gewicht einer beliebigen Ebene und beobachte, wie weit sie sich in der Hierarchie verschiebt, ohne dass sich ihre Größe überhaupt ändert.

Warum braucht kleiner Text mehr Gewicht, nicht weniger?

Es fühlt sich verkehrt an — kleiner Text ist untergeordnet, sollte er also nicht leichter sein? Optisch: nein. Bei 12px ist ein Strich vielleicht kaum einen Pixel breit; setzt du dort eine Schrift mit Gewicht 300 ein, macht das Anti-Aliasing diese Striche grau, und der Text fällt unter einen angenehmen Kontrast — besonders auf Bildschirmen mit geringer Dichte. Ein kleines Label von 400 auf 500 anzuheben hält seine Striche solide bei einer Größe, in der kaum Pixel übrig sind.

Das ist das Spiegelbild der Display-Regel. Großer Text hat Pixel übrig, also kann er sich Extreme in beide Richtungen leisten — sehr schwer oder sehr leicht. Kleiner Text kann sich leicht nicht leisten. Wenn ein kleines Label sich auch untergeordnet anfühlen soll, dämpfe seine Farbe statt seines Gewichts: Ein Label mit Gewicht 500 in einem sekundären Grau liest sich ruhig und bleibt lesbar; ein Label mit Gewicht 300 in vollem Schwarz liest sich kaputt.

Kann Gewicht einen Größenschritt ersetzen?

Aus der Nähe: ja — und das ist der praktischste Schachzug in der ganzen Kombination. Ein 16px-Label mit Gewicht 600 über einem 16px-Fließtext mit Gewicht 400 liest sich als zwei unverkennbare Ebenen, ohne einen Skalenschritt zu verbrauchen. Innerhalb von Karten, Listenzeilen, Formulargruppen und Tabellenköpfen ist eine reine Gewichts-Hierarchie meist das bessere Werkzeug: Die Elemente liegen nur Zentimeter auseinander, das Auge vergleicht die Dunkelheit also direkt, und das Layout behält eine Textgröße zum Ausrichten.

Hier ist dieselbe Produktkarte auf beide Arten gebaut:

/* Version A — Größe macht die ganze Arbeit: vier Größen, ein Gewicht */
.card-title { font-size: 24px; font-weight: 400; }
.card-label { font-size: 13px; font-weight: 400; }
.card-body  { font-size: 16px; font-weight: 400; }
.card-price { font-size: 21px; font-weight: 400; }

/* Version B — Größe und Gewicht teilen sich die Arbeit: zwei Größen */
.card-title { font-size: 21px; font-weight: 600; }
.card-label { font-size: 12px; font-weight: 500;
              letter-spacing: 0.05em; text-transform: uppercase; }
.card-body  { font-size: 16px; font-weight: 400; }
.card-price { font-size: 16px; font-weight: 700; }

Version A braucht vier Größen (zwei davon — 13px und 24px — abseits der Skala) und liest sich trotzdem flach, weil alles eine Stimme teilt. Version B braucht zwei Skalengrößen plus den 12px-Label-Schritt: Der Titel sinkt von 24 auf 21px, weil das Gewicht 600 einen Teil der Last trägt, und der Preis überordnet den Fließtext bei derselben Größe von 16px, weil 700 aus der Nähe 400 überordnet. Weniger Größen, klarere Ränge — und jede Größe lebt weiterhin auf der Skala.

Eine brauchbare Faustregel: Innerhalb einer Komponente greif zuerst zum Gewicht; über Abschnitte einer Seite hinweg greif zur Größe. Das Scannen zwischen entfernten Bereichen braucht den messbaren Unterschied, den nur die Größe liefert; das Ordnen von Nachbarn braucht die Unmittelbarkeit des Gewichts.

Probier Gewicht vor Größe

Der schnellste Weg, deine eigenen Kombinationen zu kalibrieren, ist den Gewichts-Regler zu isolieren: Öffne zwei Stile bei derselben Größe von 16px — einen bei 400, einen bei 600 — und schalte den schwereren durch 500, 600 und 700. Beobachte, wo das Paar anfängt, sich als zwei Ebenen zu lesen statt als ein Stil mit einem Fehler: Diese Schwelle ist deine Hierarchie bei gleicher Größe, und jeder Schritt, den sie spart, ist ein Schritt, den deine Skala nicht tragen muss.