Textausrichtung und Silbentrennung


Nicht nur Zeilenlänge und -abstand spielen, wie im Artikel „Die Wahl des richtigen Zeilenabstands“ beschrieben, bei Fragen der Lesbarkeit eine große Rolle, sondern auch die Textausrichtung. Wenn Sie den CSS-Parameter text-align nicht überlegt einsetzen, schaden Sie nicht nur der Lesbarkeit, sondern Ihre Gestaltung bekommt schnell einen amateurhaften Charakter. Auf dem Weg von linksbündigem über zentriertem zu rechtbündigem Text geben wir Ihnen nachfolgend ein paar Tipps:

Linksbündiger Text

Bei Text, der von links nach rechts gelesen wird, hilft eine gerade linke Kante beim Zeilenwechsel und erhöht den Lesekomfort. Insofern ist die linksbündige Defaulteinstellung gut gewählt und sollte nur mit Bedacht geändert werden. Da im Webdesign in der Regel keine Trennungen zur Verfügung stehen, ist die flatternde rechte Kante nicht immer schön; dazu aber weiter unten etwas mehr.


Abbildung 1: der Text auf der linken Seite stellt einen guten Flattersatz dar. Die flatternde Kante ist nicht zu groß gewählt, sie enthält keine Treppen-Effekte und es gibt keine unschönen Trennungen. Der Flattersatz bei dem Text auf der rechten Seite enthält zu große Flatterbereiche, Treppeneffekte und unschöne Trennungen mit nur zwei Zeichen.


Zentrierter Text

Außer in Überschriften oder bei einleitenden, nur wenige Zeilen umfassenden Texten sollten Sie die Finger von der Mittelachse lassen. Auch wenn mittig gesetzter Text im ersten Eindruck eine gewisse Ordnung ausstrahlt, leidet die Lesbarkeit von längeren Texten unter dem Fehlen jeglicher Kante zur Orientierung. Nicht ohne Grund ist die Mittelachse als hilfloser Gestaltungsversuch von Amateuren verschrien, der von Profis gemieden wird.


Abbildung 2


Rechtsbündiger Text

Rechtsbündiger Text kommt schon im Druck nur selten vor. Flexible Seitenbreiten im Web lassen rechtbündigen Text schnell aus dem Fokus des Betrachters verschwinden und erschweren hier den Einsatz zusätzlich. Von wenigen Ausnahmen abgesehen und dann auch nur für wenige Zeilen, sollten Sie rechtbündigen Text besser nicht einsetzen.


Abbildung 3


Blocksatz

Eine Sonderrolle nimmt der Blocksatz ein, der mit dem Parameter text-align:justify im CSS erzeugt wird. Aber Vorsicht: zwar beruhigen die gleichlangen Zeilen und die zusätzliche gerade rechte Kante das Layout, aber zu einem sehr hohen Preis. Guter, ausgeglichener Blocksatz ist eine große typografische Kunst, die eine extreme gestalterische Kontrolle verlangt. Und genau diese Kontrolle haben Sie im dynamischen Webdesign nicht. Für seine berühmte Bibel griff Gutenberg zum Beispiel auf über 250 Buchstabenvarianten mit teilweise leicht unterschiedlicher Breite zurück, um einen ausgeglichenen Satz zu erreichen; ein heute unvorstellbarer Aufwand und technisch im Web gar nicht zu erreichen.
Selbst Trennungen sind im Web immer noch ein Problem und in der Folge wachsen die Wortabstände über das erträgliche Maß hinaus, so dass der Text fleckig und unharmonisch wirkt. Auch die gerade rechte Kante im Blocksatz kann die dadurch entstehende typografische und schlecht lesbare Katastrophe nicht mehr retten. Also auch für den Blocksatz gilt im Web: lieber die Finger davon lassen.


Abbildung 4


Silbentrennungen

Zum Schluss noch paar Worte zur Silbentrennung. Nicht nur beim eben angesprochenen Blocksatz sondern auch beim linksbündigen Satz wird diese Option für ein gleichmäßiges Schriftbild benötigt. Allerdings machen es im Web vom Betrachter änderbare Schriftgrößen und Spaltenbreiten schwer, die Trennungen zu kontrollieren und man muss sich letztendlich auf eine Automatik verlassen.
Aktuell erwarten alle modernen Browser noch Vendor-spezifische Prefixe zur Aktivierung einer automatischen Silbentrennung.
Also zum Beispiel:
body {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
In Zukunft sollte alleine die Option hyphens: auto ausreichen. Achten Sie auch auf eine korrekte Sprachzuweisung im html-Tag (also zum Beispiel <html lang="en">), da sonst möglichweise falsche Sprach-Algorithmen die Trennungen zu einem orthografischen Desaster machen.
So schön eine automatische Trennung im Webdesign ist, so unbefriedigend ist sie für Typografen. Eine weitere Kontrolle haben Sie nämlich nicht. Wichtige Optionen, wie zum Beispiel die minimale Anzahl abgetrennter Buchstaben oder die maximale Anzahl an Trennungen in Folge, sind mehr oder weniger dem Zufall überlassen und sorgen mitunter für unschöne Ergebnisse.
Eine weitere Option jenseits der Automatik soll nicht verschwiegen werden: Mit dem HTML-Zeichen ­ können Sie einen bedingten Trennstrich setzen und Browser anweisen, im Zweifel das Wort an dieser Stelle zu trennen. Einen handoptimierten Satz erreichen auch Sie auch damit nicht, aber Sie können sehr langen Wörtern, wie sie zum Beispiel im Deutschen gerne vorkommen, etwas den Schrecken nehmen und allzu große Lücken im Zeilenfall verhindern.