Typografie im Web: Warum Sie auf Websites keinen Blocksatz verwenden sollten

In Zeitungen, Zeitschriften, Büchern, Geschäftsberichten und wissenschaftlichen Arbeiten ist Blocksatz die übliche Art, Texte zu formatieren: links bündig, rechts bündig. Blocksatz ist ästhetischer, besser lesbar und professioneller als Flattersatz mit seinem unregelmässigen rechten Rand. Und trotzdem nutzen fast alle Websites dieser Welt Flattersatz. Dieser Artikel beschreibt, warum das so ist – und warum Sie auf Ihrer eigenen Website Blocksatz mit Bedacht einsetzen sollten.

Wie Blocksatz funktioniert

Das Grundprinzip von Blocksatz kann man ganz einfach mit einem Textverarbeitungsprogramm (z.B. Microsoft Word, Apple Pages, OpenOffice, LibreOffice) nachvollziehen: Man nimmt einen beliebigen Text – der standardmässig als Flattersatz formatiert sein dürfte – und stellt den Randausgleich auf Blocksatz um.

Der Preis, den man für den regelmässigen rechten Rand zahlt, sind unregelmässige Wortabstände innerhalb der Zeile: Wo im Flattersatz einheitlich breite Leerzeichen standen, klaffen nun teilweise unschöne Löcher im Text. Und diese Löcher werden umso störender, je weniger Zeichen auf einer Textzeile Platz haben und je länger die im Text vorkommenden Wörter sind. Damit Blocksatz wirklich ästhetisch, gut lesbar und professionell daherkommt, muss man also an diesen beiden Parametern arbeiten.

Beginnen wir bei der Anzahl Zeichen pro Zeile. Diese wird einerseits durch die Spaltenbreite und andererseits durch die Schriftgrösse bestimmt. Je grösser die Schrift und je schmaler die Textspalte desto weniger Zeichen passen auf eine Zeile, und desto grösser ist die Wahrscheinlichkeit von unschönen übergrossen Wortabständen.

Bei gedruckten Texten kann man dies beim Layouten berücksichtigen und zudem das Resultat 1:1 beurteilen, bevor es bei den Lesern ankommt. Im Web hingegen hat man nur sehr bedingt die Kontrolle über Zeilenlängen und Schriftgrössen: Je nach Bildschirmgrösse und Benutzereinstellungen wird derselbe Text ganz unterschiedlich umbrochen, und entsprechend ist auch die Grösse der Wortabstände nicht vorhersehbar.

Silbentrennung

Beschäftigen wir uns nun mit dem zweiten Parameter, den Wortlängen. Im Druck werden überlange Wörter am Zeilenende durch eine Silbentrennung passend gemacht. Mit dieser einfachen Massnahme kann man unschöne Wortabstände weitestgehend eliminieren. (Auch diesen Effekt kann man in einem Textverarbeitungsprogramm gut nachvollziehen, indem man die automatische Silbentrennung aktiviert oder deaktiviert.)

Im Web stossen wir aber auch hier an Grenzen: Eine manuelle Silbentrennung kommt nicht in Frage, weil (siehe oben) Texte im Web bei jedem Benutzer anders umbrechen und wir dann plötzlich Worttrennungen mitten in der Zeile hätten. Und eine automatische Silbentrennung gibt es im Web nur bedingt.

Automatische Silbentrennung im Web

Damit ein Web Browser beim Textumbruch auch gleich eine automatische Silbentrennung vornehmen kann, müssen mehrere Bedingungen gleichzeitig erfüllt sein:

1. Der Browser muss die automatische Silbentrennung beherrschen.
In den aktuellen Versionen bieten die meisten Browser die Silbentrennung. Nach wie vor wird die CSS-Eigenschaft hyphens aber nicht von allen Browsern ohne Einschränkungen unterstützt.

2. Im Quellcode einer Webpage muss angegeben werden, in welcher Sprache ein Text geschrieben ist (HTML-Attribut: lang). Zudem müssen allfällige Einschübe von fremdsprachigen Texten gekennzeichnet werden.
Das lang-Attribut pro Seite zu setzen ist keine grosse Sache, und bei einem gut aufgesetzten CMS sollte dies automatisch geschehen. Kritischer ist wohl der zweite Punkt: Denkt der Content Manager daran, bei einem englischen Zitat mitten auf einer deutschen Webpage den Sprachcode zu hinterlegen? Und ist er dazu technisch überhaupt in der Lage?

3. Im Browser muss ein Wörterbuch der jeweiligen Sprache installiert sein, in welchem der Browser die Trennung einzelner Wörter nachschlagen kann.
Diesen Punkt hat man als Website-Betreiber nicht selbst in der Hand: Ob die Besucher der Website die entsprechenden Wörterbücher in ihrem Browser installiert haben oder nicht, kann man nicht beeinflussen. Und nach meiner persönlichen Erfahrung wissen wahrscheinlich nur die wenigsten, wie man dies macht und warum man dies tun sollte.

4. Im Stylesheet muss definiert werden, dass ein Text vom Browser getrennt werden soll (CSS-Eigenschaft: hyphens).
Dies wiederum ist technisch trivial und wird einmalig vom Entwickler/Administrator der Website vorgenommen.

Manuelles Finetuning

Entscheidet man sich trotz der obigen Vorbehalte für eine Website mit Blocksatz, dann sollte man sich auch die Mühe machen, kritische Stellen manuell zu optimieren. Folgende Möglichkeiten stehen dabei zur Verfügung:

• Mögliche Trennstellen können mit einem bedingten Trennzeichen ­ (Soft Hyphen) gekennzeichnet werden. Dies ist insbesondere bei Wörtern, die nicht in jedem Wörterbuch vorkommen, empfehlenswert. (Das bedingte Trennzeichen greift übrigens auch dann, wenn die Silbentrennung nicht konfiguriert ist. Und selbst im Flattersatz kann es sich lohnen, Wortmonster wie den Donau­dampf­schiff­fahrts­kapitän trennbar zu gestalten).
• Eine spezielle Form, um mögliche Trennstellen zu kennzeichnen, ist das HTML-Element <wbr /> (Word Break Opportunity). Es funktioniert insofern gleich wie das Soft Hyphen, als die Trennung nur bei Bedarf erfolgt und ansonsten unsichtbar bleibt. Findet die Trennung statt, wird allerdings kein Trennzeichen eingefügt. Das ist für Spezialfälle wie URLs hilfreich, wo das Trennzeichen zu einer ungültigen Adresse führen würde.
• Möchte man umgekehrt bewusst verhindern, dass an einer bestimmten Stelle jemals getrennt wird, so kann man dafür im Stylesheet eine spezielle Klasse mit hyphens: none; definieren und die betreffenden Textpassagen dann entsprechend codieren.