CSS text-fit: Schrift ohne JavaScript skalieren?

CSS text-fit: Der Browser skaliert die Schrift jetzt selbst auf Containerbreite

Michael Dobler

Autor Dr. Web

22. August 2026

2 Min. Lesezeit

Jahrelang war eine Überschrift, die ihre Textbox exakt ausfüllt, ein Fall für JavaScript. Die CSS-Eigenschaft text-fit erledigt das jetzt im Browser und skaliert die Schriftgröße eines Textknotens automatisch auf die Breite seines Containers. Microsoft Edge 150 lieferte das Feature am 2. Juli 2026 aus.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Für Entscheider in Agenturen und Webteams klingt eine solche Schriftregel nach einem Detail, spart im Alltag aber echten Aufwand. Responsive Typografie hing bislang an Zusatzskripten, deren Wartung Zeit und Ladegewicht kostet.

Das Wichtigste in Kürze

text-fit skaliert die Schriftgröße automatisch auf die Containerbreite, ohne JavaScript und ohne manuelle Berechnung.
Microsoft Edge 150 unterstützt die Eigenschaft seit dem 2. Juli 2026.^[1] Chrome erprobt eine verwandte Variante namens text-grow, Firefox und Safari fehlen noch.
Der native Weg vermeidet das Messen und Neuzeichnen der JavaScript-Lösungen und damit das sichtbare Text-Flackern beim Laden.
Ohne Fallback bleibt der Einsatz riskant: Ältere Browser brauchen eine Absicherung; die Skalierung darf zudem den Zoom der Nutzer nicht aushebeln.

Was macht die CSS-Eigenschaft text-fit?

Gerahmtes P aus Karton mit Maßband und Kompass — Die CSS-Eigenschaft text-fit skaliert die Schriftgröße automatisch, sodass Textzeilen die Containerbreite exakt ausfüllen

Die Eigenschaft text-fit skaliert die Schriftgröße eines Textknotens so, dass die Zeile die Breite ihres Containers exakt ausfüllt, allein per CSS.

Die Skalierrichtung legen zwei Werte fest: grow vergrößert zu kurze Zeilen bis zur Kante des Containers, shrink verkleinert zu lange Zeilen, bis sie hineinpassen. Ein zweiter Parameter bestimmt, ob alle Zeilen dieselbe Größe teilen oder jede Zeile für sich rechnet.^[2]

Der Nutzen liegt überall dort, wo die Textlänge schwankt und der Platz fest bleibt: Hero-Überschriften, Kennzahlen im Dashboard, Produkttitel im Onlineshop. Bisher verlangte jede dieser Stellen eine eigene Bastellösung. Ähnlich holte zuvor schon CSS shape() eine JavaScript-Aufgabe in den Browser.

Was ändert sich gegenüber den JavaScript-Tricks?

Der Unterschied liegt nicht in der Optik, sondern im Rechenweg: JavaScript misst, rechnet und zeichnet nach, text-fit erledigt die Anpassung direkt in der Layout-Phase des Browsers.

Bibliotheken wie FitText, fitty oder textFit lesen die Maße eines Elements aus, berechnen eine neue Schriftgröße und schreiben sie zurück. Dieses Wechselspiel aus Lesen und Schreiben zwingt den Browser zu wiederholten Layout-Durchläufen und lässt den Text beim Laden kurz in falscher Größe aufblitzen.^[3]

Der native Weg umgeht das, weil die Anpassung Teil der normalen Darstellung wird. Die Idee reicht bis zu Dave Ruperts FitText von 2011 zurück, seither lösten sich die Skripte ab. Auch Chrome zeigte im Dezember 2025 die verwandte Eigenschaft text-grow in einer Testversion.

Damit reiht sich text-fit in eine Serie ein, in der native CSS-Funktionen alte JavaScript-Helfer ablösen, von Scroll-Effekten bis zur Wahl der richtigen UI-Schrift.

text-fit nimmt dem Frontend eine Dauerbaustelle ab, doch verlässlich wird die Technik erst mit einem sauberen Fallback. Ein Test allein in Edge produziert die nächste Kompatibilitätslücke gleich mit.
— Markus Seyfferth, Chefredakteur Dr. Web

Solche Browser-Neuerungen ordnen wir laufend ein, vom jährlichen State of CSS bis zu praktischen Werkzeugsammlungen für den Webdesign-Alltag.

text-fit: der native CSS-Weg gegen das JavaScript

Wie Browser Schrift an den Container anpassen, Stand August 2026

Zwei Wege, dieselbe passgenaue Schrift

Bisher: JavaScript

FitText, fitty, textFit

Textbreite messen, neu berechnen, ins Layout zurückschreiben
wiederholte Layout-Durchläufe im Browser
Schrift flackert beim Laden kurz in falscher Größe
externe Bibliothek nötig, mehr Ladegewicht

Neu: CSS text-fit

eine Eigenschaft

Anpassung läuft in der Layout-Phase des Browsers
kein Nachladen, kein Skript
kein Flackern, richtige Größe sofort
Werte grow und shrink steuern die Richtung

Wer text-fit heute unterstützt

150

Microsoft Edge

liefert text-fit aus, seit dem 2. Juli 2026

Test

Google Chrome

Prototyp der verwandten Eigenschaft text-grow, Dezember 2025

noch

Firefox und Safari

keine Unterstützung, Fallback bleibt Pflicht

Wofür sich text-fit lohnt

Hero-Überschriften mit wechselnder Länge, Kennzahlen im Dashboard, variable Produkttitel im Onlineshop: überall dort, wo der Platz fest ist und der Text schwankt.

Worauf sollten Sie in DACH-Projekten achten?

Setzen Sie text-fit nur mit Fallback ein und prüfen Sie, dass die automatische Skalierung die Barrierefreiheit nicht bricht.

Bislang liefert allein Edge 150 die Eigenschaft aus, deshalb bleibt Progressive Enhancement Pflicht. Praktischerweise brachte dasselbe Release auch komma-getrennte Container-Queries und die Funktion named-feature() für @supports, mit denen sich ein Ersatz sauber ansteuern lässt.^[1]

Heikler ist die Barrierefreiheit. Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025. Die Web-Richtlinie WCAG verlangt zudem, dass Nutzer Text auf 200 Prozent vergrößern können. Vergrößert jemand die Schrift, darf text-fit die Zeile nicht wieder auf die Containerbreite zurückstauchen; genau diese offene Frage diskutiert die zuständige Arbeitsgruppe noch.

Für DACH-Teams heißt das konkret: text-fit gehört an Schmuckelemente wie Hero-Titel, nicht an langen Fließtext. Prüfen Sie jede Umsetzung zusätzlich bei aktiviertem Browser-Zoom.