{"id":288,"date":"2024-03-13T10:19:20","date_gmt":"2024-03-13T09:19:20","guid":{"rendered":"https:\/\/www.servicepraxis.com\/faq\/?p=288"},"modified":"2024-03-13T10:24:49","modified_gmt":"2024-03-13T09:24:49","slug":"lesbarkeit-verbessern","status":"publish","type":"post","link":"https:\/\/www.servicepraxis.com\/faq\/how-to\/lesbarkeit-verbessern\/","title":{"rendered":"Lesbarkeit von \u00dcberschriften verbessern"},"content":{"rendered":"\n<p>Gerade mehrzeilige \u00dcberschriften k\u00f6nnen schnell einen ungleichm\u00e4\u00dfigen Textfluss aufweisen, insbesondere wenn lange W\u00f6rter vorhanden sind. Abhilfe schafft die Eigenschaft <strong>text-wrap<\/strong>. Diese legt fest, wie ein Text umgebrochen werden soll. Der zugeh\u00f6rige Parameter<strong> balance<\/strong> erm\u00f6glicht es modernen Browsern<sup> 1<\/sup>, den Text in einem Blockelement so zu formatieren, dass die L\u00e4ngen der einzelnen Zeilen und W\u00f6rter ausgeglichen sind. Dies f\u00fchrt zu einem harmonischeren Erscheinungsbild des Textes auf der Webseite.<\/p>\n\n\n\n<div class=\"wp-block-group card-container-group card-container-group-with-bg hide-xl data-aos_zoom-in data-aos-delay_200 data-aos-duration_400\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-columns card-container\">\n<div class=\"wp-block-column\">\n<p class=\"fw-bold\">Optimierung der Darstellung von \u00dcberschriften f\u00fcr eine bessere Lesbarkeit<\/p>\n\n\n\n<p>Durch die gleichm\u00e4\u00dfige Verteilung von Zeilen und W\u00f6rtern werden Header auf Webseiten f\u00fcr Nutzer:innen ansprechender gestaltet. Die Eigenschaft text-wrap balance tr\u00e4gt zu einer insgesamt besseren Lesbarkeit und Benutzererfahrung bei.<\/p>\n\n\n\n<p>Abbildung links ohne bzw. rechts mit text-wrap: balance.<\/p>\n\n\n\n<p class=\"small\">www.internet-marketing.de<br>www.servicepraxis.com<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<figure class=\"wp-block-image size-full wp-duotone-ffffff-rgb6978112-1\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"555\" src=\"https:\/\/www.servicepraxis.com\/faq\/wp-content\/uploads\/sites\/7\/blg7_howto_textbalance_001.png\" alt=\"Lesbarkeit verbessern mit ausbalancierten \u00dcberschriften \u00a9 B&amp;N Internet-Marketing\" class=\"wp-image-286 img-fluid \"\/><figcaption class=\"wp-element-caption\">Lesbarkeit verbessern mit ausbalancierten \u00dcberschriften \u00a9 B&amp;N Internet-Marketing<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<figure class=\"wp-block-image size-full wp-duotone-ffffff-rgb6978112-2\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"555\" src=\"https:\/\/www.servicepraxis.com\/faq\/wp-content\/uploads\/sites\/7\/blg7_howto_textbalance_002.png\" alt=\"Lesbarkeit verbessern mit ausbalancierten \u00dcberschriften \u00a9 B&amp;N Internet-Marketing\" class=\"wp-image-287 img-fluid \"\/><figcaption class=\"wp-element-caption\">Lesbarkeit verbessern mit ausbalancierten \u00dcberschriften \u00a9 B&amp;N Internet-Marketing<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p>Durch die <strong>gleichm\u00e4\u00dfige Verteilung<\/strong> der Textzeilen und W\u00f6rter ist die \u00dcberschrift angenehmer zu lesen. Der <strong>ausbalancierte Textfluss<\/strong> tr\u00e4gt dazu bei, dass das Layout der Webseite harmonischer wirkt und einen professionellen Eindruck hinterl\u00e4sst. Entwicklern wird die M\u00f6glichkeit er\u00f6ffnet, \u00dcberschriften auf unterschiedlichen Bildschirmgr\u00f6\u00dfen und Aufl\u00f6sungen <strong>optimal anzuzeigen<\/strong>, was die Benutzererfahrung verbessert.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Weniger ist mehr<\/h3>\n\n\n\n<p>Auch wenn die Eigenschaft sich nicht nur auf \u00dcberschriften, sondern auch auf jeden beliebigen Text anwenden l\u00e4sst, ist hiervon strikt abzuraten. <strong>Prim\u00e4rer Anwendungsfall sind \u00dcberschriften<\/strong>, denn der Browser muss erst die am ausgewogenste L\u00f6sung finden. Daher funktioniert beispielsweise im Google Chrome<sup> 2<\/sup> dies nur f\u00fcr maximal sechs Zeilen, um weiterhin die Website m\u00f6glichst schnell auszuliefern.<\/p>\n\n\n\n<p class=\"small\"><sup>1 <\/sup>Unterst\u00fctzt werden die g\u00e4ngigen Browser seit Anfang 2024. Vgl. hierzu <a href=\"https:\/\/caniuse.com\/?search=%20text-wrap%3A%20balance\" target=\"_blank\" rel=\"noreferrer noopener\">www.caniuse.com<\/a>. <sup> <\/sup><br><sup>2<\/sup> Mehr zum Thema z.&nbsp;B. auf <a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/css-text-wrap-balance\" target=\"_blank\" rel=\"noreferrer noopener\">developer.chrome.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Durch die gleichm\u00e4\u00dfige Verteilung von Zeilen und W\u00f6rtern werden \u00dcberschriften ansprechender gestaltet. Eine einfache M\u00f6glichkeit, das Erscheinungsbild einer Webseite zu verbessern und sicherzustellen, dass Inhalte optimal pr\u00e4sentiert werden.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-288","post","type-post","status-publish","format-standard","hentry","category-how-to"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.servicepraxis.com\/faq\/wp-json\/wp\/v2\/posts\/288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.servicepraxis.com\/faq\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.servicepraxis.com\/faq\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/faq\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/faq\/wp-json\/wp\/v2\/comments?post=288"}],"version-history":[{"count":0,"href":"https:\/\/www.servicepraxis.com\/faq\/wp-json\/wp\/v2\/posts\/288\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.servicepraxis.com\/faq\/wp-json\/wp\/v2\/media?parent=288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.servicepraxis.com\/faq\/wp-json\/wp\/v2\/categories?post=288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.servicepraxis.com\/faq\/wp-json\/wp\/v2\/tags?post=288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}