Weiße Schrift auf schwarzem Grund wirkt fetter als schwarze Schrift auf Weiß, obwohl der Fontwert identisch bleibt. Gegen diese optische Täuschung halten variable Fonts eine eigene Stellschraube bereit: die Grade-Achse korrigiert das wahrgenommene Gewicht, ohne die Zeilen neu umbrechen zu lassen.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Im Dark Mode steckt in jeder Website ein unsichtbares Problem: Der gleiche Text, den Sie tagsüber sauber ausbalanciert haben, wirkt nachts zu schwer. Schuld ist nicht der Font, sondern das Auge. Ein kaum bekannter Regler in variablen Schriften räumt den Effekt aus, bevor er Lesbarkeit kostet.
Das Wichtigste in Kürze
- Auf dunklem Grund wirkt helle Schrift schwerer, als sie ist. Der Fachbegriff: Halation oder Irradiations-Illusion.
- Die Grade-Achse (GRAD) variabler Fonts senkt den wahrgenommenen Fettgrad, ohne Buchstabenbreite oder Umbruch anzutasten.
- Ein Wert um −50 gleicht den Dark-Mode-Effekt aus. Roboto Flex erlaubt die Spanne −200 bis 150.
- Umsetzung per
font-variation-settings, gekoppelt anprefers-color-scheme. Voraussetzung: ein Font mit Grade-Achse.
Warum wirkt Text im Dark Mode schwerer?
Der Effekt heißt Halation: Helle Flächen strahlen für das Auge über ihre Kanten hinaus, dunkle ziehen sich zusammen. Weiße Buchstaben auf schwarzem Grund gewinnen dadurch scheinbar an Masse. Der Fontwert bleibt gleich, allein die Wahrnehmung kippt.
Das Problem ist älter als der Bildschirm. Schon im Druck musste dieselbe Schrift auf saugendem Zeitungspapier kräftiger geschnitten sein als auf glänzendem Magazinpapier, weil die Druckfarbe ins Papier läuft.[1] Genau dafür kennt die Typografie den Begriff Grade: eine feine Abstufung des Fettgrads bei gleicher Buchstabenbreite. Ähnliche Feinarbeit leistet heute auch CSS, damit der Browser eine Seite sauber setzt.
Auf dem Bildschirm kehrt Grade als Antwort auf den Dark Mode zurück. Bietet eine Website beide Modi an, erscheint derselbe Text hell auf dunkel eine Spur zu fett. Bei kleinen Schriftgraden kostet das messbar Lesbarkeit.
Grade statt Gewicht: Was die GRAD-Achse anders macht
Der naheliegende Reflex wäre, im Dunkelmodus einen dünneren Schriftschnitt zu wählen. Das scheitert an der Technik: Die Gewichts-Achse (wght) verändert mit dem Fettgrad auch die Buchstabenbreite, der Text bricht neu um, Schaltflächen verrutschen. Schon die Wahl der richtigen UI-Schrift wird dadurch heikler.
Die Grade-Achse trennt beides. GRAD senkt oder hebt den wahrgenommenen Fettgrad, lässt Laufweite und Umbruch aber unangetastet. Adam Argyle, CSS-Entwickleranwalt bei Google, empfiehlt für den Dunkelmodus einen GRAD-Wert um −50.[2] Roboto Flex spannt die Achse von −200 bis 150.[3]
Technisch läuft das über eine CSS-Variable, die an prefers-color-scheme hängt: font-variation-settings: "GRAD" var(--grad), im Dunkelmodus auf −50 gesetzt. Kein JavaScript, kein zweiter Font, kein Layout-Sprung. Grade reiht sich damit neben native Typo-Werkzeuge wie die Schriftskalierung per CSS text-fit.
Gewichts-Achse (wght)
Ändert Fettgrad und Buchstabenbreite.
Der Text bricht neu um, Schaltflächen verrutschen.
Grade-Achse (GRAD)
Ändert nur den wahrgenommenen Fettgrad.
Gleiche Breite, kein neuer Zeilenumbruch.
Die Grade-Achse ist kein Effekt für Typografie-Nerds, sondern ein Lesbarkeits-Werkzeug für jeden, der einen Dunkelmodus anbietet. Ignoriert man sie, verschenkt man Qualität, die einen einzigen CSS-Wert kostet.
— Markus Seyfferth, Chefredakteur Dr. Web
Was heißt das für Ihr Webdesign im DACH-Raum?
Der Haken steckt im Font. Variable Schriften unterstützen alle aktuellen Browser seit Jahren, eine Grade-Achse besitzen aber nur wenige Familien: Googles Roboto Flex und Roboto Serif sowie Apples SF Pro. Bei einer festen Hausschrift ohne GRAD fehlt der Regler schlicht.
Für Entscheider wird das zur Lesbarkeitsfrage. Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz viele Onlineangebote auf zugängliche Gestaltung. Eine Schrift, die im mittlerweile üblichen Dunkelmodus zu fett wirkt, erschwert das Lesen genau dort, wo Nutzer ihn aus Rücksicht auf die Augen einschalten.
Der Aufwand bleibt gering. Prüfen Sie zuerst, ob Ihre Webschrift eine Grade-Achse mitbringt, koppeln Sie den Wert an prefers-color-scheme und testen Sie das Ergebnis im echten Dunkelmodus, idealerweise mit prefers-contrast. Fehlt die Achse, gehört eine Schrift mit Grade in die engere Wahl, so wie andere Helfer in den Werkzeugkasten jedes Webdesigners.
Quellen
[1] Elliot Jay Stocks: „Keeping type consistent in changing conditions“
[2] Adam Argyle: „Adjust perceived typeface weight for dark mode without layout shift“
[3] Google Fonts: Roboto Flex, Grade-Achse (GRAD) −200 bis 150
Mehr Newshunger?
- CSS border-area: Farbverlauf-Rahmen ohne den border-image-Trick
- CSS shape(): beliebige Formen, die jetzt responsiv mitwachsen
- CSS Grid Lanes: Das native Masonry-Layout kommt ohne JavaScript
- State of CSS 2026: Nur 28 Prozent des CSS kommen von der KI
- Tinkerfont: Was der Bau einer eigenen Font-Erweiterung über Web-Typografie lehrt
