Diese Seite wurde mit AI-Unterstützung übersetzt. Das englische Original ist maßgeblich.
Die Breite ist die leiseste der Schriftachsen. Lesende bemerken sie selten bewusst, doch sie bestimmt die beiden Ressourcen, von denen Leserlichkeit abhängt: den Punzenraum im Inneren der Buchstaben und die Zahl der Zeichen, die auf eine Zeile passen. Der Befund von 2005 lautete, dass normale bis leicht schmale Breiten am leserlichsten sind — breite Schnitte dehnen Buchstabenformen über die leichte Erkennbarkeit hinaus, und stark verschmälerte Schnitte erdrosseln die Punzen, die ein e von einem c oder einem o unterscheiden. Dieser Befund ist gut gealtert. Verändert hat sich die Maschinerie: Die Breite ist keine feste Eigenschaft einer Fontdatei mehr, sondern eine kontinuierliche, skriptbare Gestaltungsachse.
Was sich seit 2005 geändert hat
2005 war ein „condensed“ Font eine eigene Datei, sofern sie überhaupt existierte, und Webgestaltende hatten meist weder die Fonts noch den Auslieferungsmechanismus, um eine zu nutzen. Zwei Entwicklungen haben das verwandelt. Die Webfont-Auslieferung (die moderne @font-face-Ära, ab etwa 2010) machte echte schmale und breite Schnitte verfügbar. Dann registrierten die OpenType Variable Fonts (ab 2016) wdth als Standardachse, in CSS zugänglich über font-stretch — inzwischen formal als font-width aliasiert — mit Schlüsselwortwerten wie condensed (75 %) und semi-condensed (87,5 %) oder beliebigen Prozentwerten bei Fonts, die den Bereich unterstützen.
Die entscheidende Eigenschaft einer gestalteten Breitenachse ist, dass sie keine Skalierung ist. Wenn ein Variable Font entlang wdth schmaler wird, hält die Interpolation des Gestalters die vertikalen Strichstärken konsistent, hält die Punzen so offen, wie es die Geometrie erlaubt, und richtet die Abstände neu zu. Horizontale Skalierung — transform: scaleX(0.8) oder ihre Vorfahren — bewirkt das Gegenteil: Sie verdünnt vertikale Striche relativ zu horizontalen, verzerrt Kurven und staucht die Abstände proportional. Der Unterschied zwischen einer echten Condensed und einer Pseudo-Condensed ist genau der Unterschied zwischen einer echten Kursiven und einer gescherten Roman — und er zählt für dieselben sehbehinderten Lesenden.
Die zweite Veränderung ist konzeptionell. Responsives Design hat uns gelehrt, dass die Zeilenlänge, nicht die Schriftwahl, die Variable ist, die Nutzende tatsächlich erleben — und die Breite ist nun ein Werkzeug, um sie zu steuern. Eine Schlagzeile, die bei schmalen Viewports unglücklich umbricht, kann ein paar Breiteneinheiten enger werden, statt unter die lesbare Größe zu schrumpfen. Das ist eine wirklich neue Fähigkeit, und sie kommt mit wirklich neuen Wegen, Fehler zu machen.
Breite und das Punzenbudget
Die Leserlichkeitsmechanik aus Version 1 beschreibt den Zielkonflikt noch immer korrekt. Breite Schnitte vergrößern Buchstabenformen horizontal, ohne unterscheidende Information hinzuzufügen; in Lesegrößen verlangsamen sie die Erkennung leicht und verschwenden Zeilenlänge. Stark verschmälerte Breiten schließen die Punzen und verringern die räumlichen Unterschiede zwischen verwechselbaren Paaren — in einer engen Condensed nähern sich o, e und c einander an, und der Rhythmus der Vertikalen in Wörtern wie minimum wird zum Lattenzaun.
Für fortlaufenden Text bleibt das sichere Band schmal: etwa 90 % bis 100 % der Normalbreite — normal bis knapp vor semi-condensed. Condensed und schmalere Schnitte sind Display-Werkzeuge — Schlagzeilen, Beschriftungen, datendichte Tabellen, in denen eine gestaltete Condensed einer geschrumpften Regular wirklich überlegen ist. Breite Schnitte sind Branding-Werkzeuge. In Absätze gehört keines von beiden.
Die Strichstärke wirkt mit der Breite zusammen. Eine fette Schrift zu verschmälern schließt die Punzen doppelt; wenn Sie verschmälern müssen, bleiben Sie bei regular oder leichter. Auch die Größe wirkt mit: Welche Breite in 40px Schlagzeilengröße funktioniert, muss in 16px Fließtextgröße gelockert werden. Manche Variable Fonts koppeln wdth mit einer Achse für optische Größe (opsz), die das teilweise übernimmt; die meisten überlassen es Ihnen.
Zoom, Vergrößerung und Sehbehinderung
Die Gruppe, die großzügige Breiten am dringendsten braucht, ist zugleich die, die verschmälerter Schrift am ehesten unter den schlechtesten Bedingungen begegnet. Wer eine Bildschirmlupe nutzt, sieht ein kleines Fenster auf eine vergrößerte Seite: Vergrößerte Condensed offenbart ihre geschlossenen Punzen und ihre enge Zurichtung ohne den ausgleichenden Kontext der ganzen Zeile. Wer den Browser-Zoom bei 200 % nutzt — ein Niveau, das das Resize-Text-Kriterium der WCAG 2.2 (1.4.4) von Inhalten verlangt —, löst Ihre Schmale-Viewport-Layouts aus, also genau dort, wo Gestaltende heute versucht sind, die Schrift zu verschmälern, damit alles passt.
Widerstehen Sie dieser Versuchung beim Fließtext. Wenn ein Layout bei 200 % Zoom nur funktioniert, indem es Buchstabenformen quetscht, ist das Layout das Problem. WCAG 1.4.10 (Reflow) weist die richtige Richtung: Inhalte sollten in eine einzelne Spalte umbrechen statt sich zu komprimieren. Breitenanpassung ist für Schlagzeilen unter Reflow legitim; auf Absätze angewendet ist sie ein Alarmsignal.
Auch Textabstands-Anpassungen zählen hier. WCAG 1.4.12 verlangt, dass nutzerseitige Erhöhungen von Buchstaben- und Wortabstand Inhalte nicht zerbrechen. Verschmälerte Schrift, die von enger Zurichtung abhängt, zerfällt visuell meist, sobald eine sehbehinderte Person die Laufweite erhöht — ein weiterer Grund, fortlaufenden Text nahe der Normalbreite zu halten, wo zusätzliche Laufweite würdevoll nachgibt.
Pseudo-Condensed vermeiden
Pseudo-Verschmälerung überlebt in freier Wildbahn in drei Formen: CSS-Transformationen auf Text, veraltetes font-stretch auf Fonts ohne Breitenachse (was Browser korrekt ignorieren, Gestaltende aber mitunter mit Transformationen „reparieren“) und nicht-uniform skalierter Text in SVG oder Canvas. Alle drei erzeugen die Verzerrung mit verdünnten Vertikalen, die kein Schriftgestalter je gebilligt hat. Wenn ein Entwurf wirklich schmalere Schrift braucht, lauten die Optionen: ein Variable Font mit echter wdth-Achse, ein eigens gestalteter schmaler Schnitt oder ein anderes Layout. Es gibt keine vierte Option, die die Lesenden respektiert.
Wenn Sie die wdth-Achse nutzen, bevorzugen Sie die High-Level-Eigenschaft font-stretch/font-width gegenüber rohem font-variation-settings, damit der Browser Vererbung und Fallback sinnvoll verwalten kann, und verifizieren Sie den Fallback: Auf Systemen, auf denen der Variable Font nicht lädt, sollte eine Condensed-Anforderung gegen einen Fallback-Stack zur Normalbreite degradieren, nicht zu einer synthetisierten Quetschung.
In CSS
/* Width belongs to the wdth axis — never to transforms */
body { font-stretch: 100%; }
.compact-table { font-stretch: 92%; } /* slightly condensed floor */
/* Anti-pattern — distorts stroke contrast and spacing:
.squeezed { transform: scaleX(0.8); } */Empfehlungen
- Halten Sie fortlaufenden Text zwischen etwa 90 % und 100 % der Normalbreite; der Befund von 2005 gilt weiter.
- Reservieren Sie gestaltete schmale Schnitte für Schlagzeilen, Beschriftungen und platzkritische Display-Anwendungen; reservieren Sie breite Schnitte für Branding.
- Täuschen Sie Breite niemals vor: keine scaleX-Transformationen, keine nicht-uniforme Skalierung von Text in SVG oder Canvas.
- Nutzen Sie die variable wdth-Achse über font-stretch (font-width) und bestätigen Sie einen würdevollen Fallback, wenn der Font nicht lädt.
- Verschmälern Sie Fließtext nicht, um 200 % Zoom oder schmale Viewports zu überstehen — brechen Sie stattdessen um, gemäß WCAG 1.4.10.
- Verifizieren Sie, dass Text intakt bleibt, wenn Nutzende Buchstaben- und Wortabstand erhöhen (WCAG 1.4.12); enge Condensed-Settings scheitern hieran oft zuerst.
- Vermeiden Sie die Kombination von schmaler Breite mit fetter Strichstärke oder kleinen Größen; so weit dehnt sich das Punzenbudget nicht.