The Universal Web

1.3 Strichstärke

Die Regel „regular bis leicht fett“, neu aufgebaut für 2026: kontinuierliche variable Strichstärkenachsen, Strichstärkenkompensation im Dark Mode mit Grades, das Modeproblem der Ultraleicht-Schnitte und das Zusammenspiel von Strichstärke und WCAG-Kontrast.

6 min read

Diese Seite wurde mit AI-Unterstützung übersetzt. Das englische Original ist maßgeblich.

Die Empfehlung von 2005 zur Strichstärke war kompakt und richtig: Text in regular bis leicht fetten Schnitten setzen; dünne Schriften meiden, deren Striche für sehbehinderte Lesende zu wenig Kontrast tragen, und schwere bis schwarze Schriften meiden, deren geschlossene Punzen die Leserlichkeit für alle erdrosseln. Zwanzig Jahre später hat sich das Ziel nicht bewegt. Verändert hat sich alles darum herum — Strichstärke ist heute eine kontinuierliche Variable statt eines Menüs aus zwei oder drei Schnitten, dunkle Oberflächen haben die Strichstärke kontextabhängig gemacht, und die Mode hat einen Großteil der Zwischenzeit damit verbracht, die Interface-Typografie genau in die Richtung zu ziehen, vor der dieses Kapitel warnt.

Was sich seit 2005 geändert hat

2005 war die Strichstärke eine diskrete Wahl. Eine Familie erschien als regular und bold, vielleicht light und black, und man wählte einen Schnitt. Variable Fonts haben diese Beschränkung aufgelöst: Die wght-Achse legt die Strichstärke als Kontinuum offen, typischerweise von 100 bis 900, ansprechbar aus CSS über font-weight oder font-variation-settings. „Regular bis leicht fett“ ist kein Ruck mehr von 400 auf 700 — es kann 430 für Fließtext im Light Mode sein, 380 auf dunklem Hintergrund, 500 für eine kleine Beschriftung, die Verstärkung braucht. Die Empfehlung überlebt; neu ist die Präzision, mit der sie sich umsetzen lässt.

Manche Familien gehen weiter und bieten eine Grade-Achse (GRAD) an, eine Konvention, die durch Familien wie Googles Roboto Flex populär wurde. Grade verändert die Strichdicke, ohne die Buchstabenbreiten zu verändern, sodass eine Anpassung den Text nicht neu umbricht. Dieser Unterschied zählt überall dort, wo die Strichstärke auf den Kontext reagieren muss — Dark Mode, Hover-Zustände, Rendering-Unterschiede —, ohne das Layout zu verschieben.

Die zweite Veränderung ist der Aufstieg dunkler Oberflächen zu einem vollwertigen Modus, abfragbar über prefers-color-scheme. Strichstärke und Polarität wirken zusammen, und die Richtlinien von 2005 — geschrieben in einer Ära nahezu universellen dunklen Texts auf hellem Grund — mussten sich dem nie stellen.

Dark Mode und Strichstärkenkompensation

Heller Text auf dunklem Grund liest sich schwerer als derselbe Text in positiver Polarität. Helle Striche scheinen gegen dunkle Umgebung anzuschwellen — der Effekt wird gemeinhin über Halation beschrieben, das Ausstrahlen von Licht aus hellen Flächen, und er ist auf emissiven Bildschirmen sowie für Lesende mit Astigmatismus oder Streulicht-Bedingungen ausgeprägt. Eine Schrift, die für dunkel-auf-hell abgestimmt ist, wirkt in hell-auf-dunkel leicht aufgebläht und unscharf; Punzen verengen sich, und in kleinen Größen beginnen Buchstaben zu verstopfen.

Die praktische Kompensation besteht darin, die Strichstärke im Dark Mode leicht zu reduzieren. Mit einer variablen wght-Achse stellt eine Absenkung des Fließtexts um 20 bis 50 Einheiten — etwa von 400 Richtung 370 — die beabsichtigte Strichdichte wieder her. Wo eine GRAD-Achse existiert, ist sie das bessere Werkzeug, da ein negativer Grade die Striche ohne Neuumbruch verdünnt; genau für diesen Anwendungsfall wurden Grades entworfen. Statische Familien bieten keinen guten Hebel — was selbst ein Argument für Variable Fonts in jedem Produkt ist, das sich beiden Farbschemata verpflichtet.

Der Dark Mode verlangt eine zweite, verwandte Anpassung: Rein weißer Text auf reinem Schwarz maximiert die Halation. Leicht abgemilderte Vordergründe (Off-White) und aufgehellte dunkle Flächen reduzieren das Blenden, ohne nennenswert Kontrast zu opfern. Strichstärkenkompensation und Wertabmilderung arbeiten zusammen.

Das Problem der Ultraleicht-Schnitte

Die stärkste Revision dieses Kapitels betrifft nicht die Regel, sondern ihre Dringlichkeit. 2005 war dünne Schrift selten, weil sie nicht gerendert werden konnte — ein Haarstrich auf einem 96-DPI-Bildschirm verschwand schlicht. Hochauflösende Displays machten ultraleichte Schnitte darstellbar, und die Mode folgte sofort: Thin- und Extralight-Schnitte wurden in Branding, Interfaces und großem Displaytext zur Chiffre für Eleganz und Modernität.

Darstellbar ist nicht lesbar. Ein Strich der Stärke 200, der auf dem High-DPI-Bildschirm der Gestaltung überlebt, verschlechtert sich auf Monitoren mit Standarddichte, dunkelt bei geringer Displayhelligkeit oder aggressiver Nachtmodus-Filterung weiter ab und kann für sehbehinderte Lesende ganz unter die Schwelle nutzbaren Strichkontrasts fallen. Dünne Schrift ist eine gestapelte Wette darauf, dass jeder Lesende exzellente Sehschärfe, einen Premium-Bildschirm und volle Helligkeit hat. Gemessene Kontrastverhältnisse überzeichnen zudem die tatsächliche Leistung dünner Schrift: Die WCAG-Formel vergleicht Vorder- und Hintergrundfarbe, berücksichtigt aber nicht die Strichbreite — eine Schrift der Stärke 100 kann 4,5:1 technisch bestehen und dabei weit weniger nutzbaren Kontrast bieten als eine Schrift der Stärke 400 bei denselben Farben. Die APCA-Forschung, die in den WCAG-3.0-Entwurf einfließt, adressiert genau diese Lücke — ihr Modell behandelt Kontrast, Größe und Strichstärke als zusammenwirkende Variablen und weist dünnerem und kleinerem Text strengere Helligkeitskontrast-Anforderungen zu. Diese Entwicklungsrichtung bestätigt den Instinkt von 2005: Strichstärke ist Teil des Kontrasts, ob die aktuelle Formel es sagt oder nicht.

Der andere Pol braucht weniger Neuverhandlung. Schwere und schwarze Schnitte schließen in Textgrößen weiterhin die Punzen und verschmelzen Buchstabenformen; sie bleiben Display-Werkzeuge. Bold behält seine legitime Rolle für Hervorhebung und Hierarchie — und die WCAG selbst würdigt den Beitrag von Bold, indem sie die Großtext-Kontrastschwelle für fetten Text auf 14pt senkt, gegenüber 18pt für regular.

Die Strichstärkenachse von 100 bis 900 mit dem Band von 400 bis 600 als sicher für Fließtext markiert — Haarstriche sind nur für Display, Bold ist für Hervorhebung, und dünne Striche verschwinden auf dunklen Flächen.

Strichstärke in der Praxis

Eine moderne Strichstärken-Politik sieht so aus: Fließtext liegt zwischen etwa 400 und 500, je Familie gewählt — manche Schriften sind bei 400 leicht gezeichnet und lesen sich bei 450 besser. Hervorhebungen steigen 200 bis 300 Einheiten über die Fließtextstärke, damit sie unmissverständlich statt mehrdeutig sind. Der Dark Mode zieht einen moderaten Betrag über wght oder, vorzugsweise, GRAD ab. Nichts unter etwa 300 erscheint in Textgrößen, und alles darunter in Displaygrößen wird auf einem Bildschirm mit Standarddichte bei realistischer Helligkeit geprüft. Wo Variable Fonts nicht verfügbar sind, gelten die statischen Schnitte, die diesen Zielwerten am nächsten kommen, und die Dark-Mode-Kompensation verlagert sich stattdessen auf die Abmilderung der Farben.

In CSS

body { font-weight: 400; }
strong { font-weight: 600; }     /* semibold beats bold for emphasis */

@media (prefers-color-scheme: dark) {
  /* light-on-dark reads heavier — pull back with a variable axis */
  body { font-variation-settings: "GRAD" -20; }
}

Empfehlungen

  • Halten Sie Fließtext im Bereich 400–500, je Schriftart abgestimmt mit der variablen wght-Achse, wo verfügbar.
  • Reduzieren Sie die Strichstärke im Dark Mode leicht; bevorzugen Sie eine GRAD-Achse, wo die Familie eine anbietet, da Grade-Änderungen den Text nicht neu umbrechen.
  • Mildern Sie reine Weiß-auf-Schwarz-Paarungen im Dark Mode ab, um Halation zu begrenzen.
  • Behandeln Sie Strichstärken unter etwa 300 als reine Display-Schnitte und verifizieren Sie sie auf Bildschirmen mit Standarddichte; verwenden Sie sie niemals für fortlaufenden Text.
  • Vermeiden Sie schwere bis schwarze Schnitte in Textgrößen; nutzen Sie Bold als bewussten Hervorhebungsschritt von 200–300 Einheiten über der Fließtextstärke.
  • Lassen Sie ein bestandenes WCAG-Kontrastverhältnis keine dünnen Striche entschuldigen — Strichstärke ist Teil des effektiven Kontrasts, wie die APCA-Arbeit hinter dem WCAG-3.0-Entwurf ausdrücklich festhält.

Weiterführende Literatur