Lesbarkeit von Überschriften verbessern

Gerade mehrzeilige Überschriften können schnell einen ungleichmäßigen Textfluss aufweisen, insbesondere wenn lange Wörter vorhanden sind. Abhilfe schafft die Eigenschaft text-wrap. Diese legt fest, wie ein Text umgebrochen werden soll. Der zugehörige Parameter balance ermöglicht es modernen Browsern ¹, den Text in einem Blockelement so zu formatieren, dass die Längen der einzelnen Zeilen und Wörter ausgeglichen sind. Dies führt zu einem harmonischeren Erscheinungsbild des Textes auf der Webseite.

Optimierung der Darstellung von Überschriften für eine bessere Lesbarkeit

Durch die gleichmäßige Verteilung von Zeilen und Wörtern werden Header auf Webseiten für Nutzer:innen ansprechender gestaltet. Die Eigenschaft text-wrap balance trägt zu einer insgesamt besseren Lesbarkeit und Benutzererfahrung bei.

Abbildung links ohne bzw. rechts mit text-wrap: balance.

www.internet-marketing.de
www.servicepraxis.com

Durch die gleichmäßige Verteilung der Textzeilen und Wörter ist die Überschrift angenehmer zu lesen. Der ausbalancierte Textfluss trägt dazu bei, dass das Layout der Webseite harmonischer wirkt und einen professionellen Eindruck hinterlässt. Entwicklern wird die Möglichkeit eröffnet, Überschriften auf unterschiedlichen Bildschirmgrößen und Auflösungen optimal anzuzeigen, was die Benutzererfahrung verbessert.

Weniger ist mehr

Auch wenn die Eigenschaft sich nicht nur auf Überschriften, sondern auch auf jeden beliebigen Text anwenden lässt, ist hiervon strikt abzuraten. Primärer Anwendungsfall sind Überschriften, denn der Browser muss erst die am ausgewogenste Lösung finden. Daher funktioniert beispielsweise im Google Chrome ² dies nur für maximal sechs Zeilen, um weiterhin die Website möglichst schnell auszuliefern.

¹ Unterstützt werden die gängigen Browser seit Anfang 2024. Vgl. hierzu www.caniuse.com.
² Mehr zum Thema z. B. auf developer.chrome.com.

Kostenfreie Erstberatung gibt es hier: