Bitte Abstand halten

Irgendwie sind wir es doch schon gewohnt, relativ sorglos mit der typografischen Gestaltung von Text umzugehen. Insbesondere bei HyperText im Web, denn auf die meisten Parameter haben wir mangels technischer Möglichkeiten doch gar keinen Einfluss. Was kann man da richtig oder falsch setzen? Wird schließlich automatisch vom Browser erledigt. Eigenmächtige Umbrüche, keine Silbentrennung, nicht einmal auf die Anzeige der korrekten Schrift kann man sich verlassen! Harte Zeiten für Typografie-Liebhaber.

Doch nicht alles ist so dramatisch wie oben behauptet. Man kann durchaus einige der bewährten Grundregeln für den Schriftsatz auch im Web-Design anwenden und so zu angenehmer lesbaren Ergebnissen kommen. Fangen wir an!


Die richtige Spaltenbreite

Als optimal lesbar gilt allgemein eine Spaltenbreite mit 50–80 Anschlägen pro Zeile. Das Auge findet problemlos zum Anfang der nächsten Zeile zurück, ohne dass solch ein Zeilenwechsel allzu häufig stattfinden muss. Dieser Wert ist selbstverständlich eine Faustregel und kann diskutiert werden. Dennoch gilt sie für Web und Print gleichermaßen. Dreispaltig gesetzte Zeitschriften (z. B. Stern, Focus) liegen bei etwa 40–45 Anschlägen, die meisten Web-Publikationen orientieren sich eher am oberen Ende mit 70–90 Anschlägen.

Es ist also gar nicht so wichtig, wieviele Pixel oder Zentimeter eine Spalte in der Breite misst; Entscheidend ist vor allem die Anzahl der Anschläge.

Wer eine flexible Breite in seinem Web-Layout angelegt hat, kann natürlich keinen direkten Einfluss auf die Spaltenbreite nehmen. In diesem Fall empfiehlt es sich, nicht mehr als 50% der Gesamtbreite für die Fließtextspalte einzurichten. Außerdem sollte man das Verändern des Schriftgrades so einfach wie möglich machen, damit User mit sehr breiten Browserfenstern bei Bedarf gegensteuern können. Man erreicht dies beispielsweise durch die Verwendung von em-Angaben beim Schriftgrad, oder mittels eines Auswahl-Menüs für Schriftgrade. Es gilt: Größere Buchstaben = weniger Anschläge pro Zeile = angenehmer zu lesen.


Der richtige Zeilenabstand

Zeilenabstand

Die Faustregel lautet hier: Ungefähr doppelte Versalhöhe. (Vorsicht! Die Versalhöhe ist nicht identisch mit dem Schriftgrad!) Einfach die Pixel zählen oder abschätzen. Zum Testen eignen sich am besten kantige Großbuchstaben wie E oder H.

Den Zeilenabstand muss man per CSS (line-height) einstellen, hier gibt es keine reine HTML-Lösung. Für den Fließtext ist ein Wert von mindestens 1.5em (anderthalbfacher Zeilenabstand) angesagt. Eher höher! Das ist zwar nicht so Platz sparend, dafür deutlich besser lesbar. Gerade bei Schriften mit größerer x-Höhe wie Arial oder Trebuchet sollte man für ausreichend Zeilenabstand sorgen.


Spaltenbreite/Zeilenabstand: Einige Beispiele

Screenshot vom css Zen Garden

css Zen Garden: Im Original-Layout des css Zen Gardens sieht man, dass die Zeilen viel zu lang sind, wenn man das Browserfenster ordentlich aufzieht. Doch Dave Shea war sich des Problems durchaus bewusst: Der Zeilenabstand ist nämlich sehr hoch gewählt: 9pt Schriftgröße, 17pt Zeilenabstand, das sind fast 2em. Dies macht es für das Auge wieder einfacher, die nächste Zeile zu finden. Übrigens: Solange man nicht mit Pixel-Werten arbeitet, kann man an jedem Browser (sogar am Internet Explorer) den Schriftgrad erhöhen, um die massive Länge der Zeilen zu relativieren.


Screenshot von The Exit

The Exit: Bei The Exit ist der Zeilenabstand zu klein (nämlich nicht definiert, also 1em), was einen verstärkten Bleiwüsten-Effekt zur Folge hat. Dafür ist die Zeilenlänge mit ca. 70 Anschlägen gut gewählt. Durch die Verwendung von Prozentangaben für den Grundschriftgrad lässt sich die Schrift in allen Browsern optimal skalieren. Speziell zu diesem Thema gibt es einen lesenwerten Artikel bei clagnut.


Screenshot von Stopdesign

Stopdesign: Mit einer Spaltenbreite von ca. 65 Anschlägen und einem Zeilenabstand von 1.6em sehen wir hier den Prototypen für gute Lesbarkeit.


Die richtige Ausrichtung/Umbruch

Loecher im Blocksatz

Bitte niemals Blocksatz! Abgesehen davon, dass dies sowieso nicht alle Browser mitmachen: Dadurch, dass in HTML keine Silbentrennung möglich ist, würden riesige Löcher zwischen die Wörter gerissen (siehe Bild), insbesondere bei sonst so optimalen Zeilenlängen von weniger als 70 Anschlägen. Finger weg! Für gut lesbare Websites kommt im Lauftext ausschließlich linksbündiger Satz in Frage.

Was den Umbruch angeht: Erneut haben wir keine Chance, etwas zu kontrollieren, so dass Spitzfindigkeiten wie Rauhsatz oder »echter« Flattersatz definitiv nicht möglich sind. Es gibt natürlich den beliebten <br />-Tag in HTML. Doch für manuelles Umbrechen im Fließtext ist dieser bitteschön nicht gedacht; Man stelle sich das Chaos vor, wenn der User den Schriftgrad erhöht. Lediglich für inhaltlich bedingte Umbrüche, beispielsweise bei Gedichten, darf <br /> verwendet werden.

Spätestens hier wird deutlich, dass HTML-Texte einen Hybridzustand zwischen Manuskript und fertig gesetztem Layout darstellen. Man hat zwar Kontrolle über einige Rahmenfaktoren, doch wie der Text beim User letztlich fließt, ist nicht vorhersehbar.


Die richtige Laufweite

Dank CSS ist es möglich, auch die Laufweite zu manipulieren. Dies klappt vor allem dann gut, wenn die Schrift per Anti-Aliasing dargestellt wird. Ist dies nicht der Fall, so kann die Laufweite nur in 1-Pixel-Schritten verändert werden – was oft zuviel des Guten ist.

Auch hier eine Faustregel: Große Schriften vertragen weniger, kleine Schriften brauchen oft mehr Laufweite. Es ist natürlich kein Verbrechen, die Schrift einfach so zu lassen, wie sie ist. Dennoch tut es der Lesbarkeit gut, wenn man Schriften unter 12px ein wenig mehr Raum gibt, insbesondere im Versalsatz. Umgekehrt kann es bei groß gesetzten Headlines ab 30px angenehm wirken, die Buchstaben ein bisschen mehr kuscheln zu lassen.

Immer offen sein für Experimente! Solange es sich nicht um größere Mengen Lauftext handelt, kann man durchaus mal Sperren oder die Buchstaben ineinanderfließen lassen.

In einem Zen Garden Design von Dave Shea und Eric Meyer wird gesperrt:

�berschrift bei 15 Petals

Und so sieht weniger Laufweite bei pixelgraphix aus:

�berschrift bei pixelgraphix.de


Die richtigen Auszeichnungen

Wer seinen Text, z. B. mit kursiven oder fetten Wörtern und Abschnitten, auszeichnet, muss Folgendes beachten:

  • Wenn nach dem fetten Wort ein Interpunktionszeichen wie Punkt, Komma, Strichpunkt, Ausrufezeichen, Fragezeichen oder Doppelpunkt folgt, so ist dieses Zeichen ebenfalls fett! Das Gleiche gilt für Kursives: So ist es richtig!
  • Bei Klammern ist das differenzierter: Kurze kursive Einschübe stehen (absolut immer) in geraden Klammern. Nur wenn die Klammern innerhalb eines kursiven Abschnitt stehen, sind sie (ebenfalls) kursiv. Auf keinen Fall darf die linke Klammer ein anderes Verhalten aufweisen wie die rechte – entweder sind beide kursiv oder beide gerade.
  • Speziell im Web bleibt die Frage, wie mit Hyperlinks verfahren wird, die ja auch eine Art von Auszeichnung darstellen. Es wirkt jedoch seltsam, wenn man sie genauso behandelt wie fette und kursive Wörter. Ein Hyperlink stellt nämlich eine in sich geschlossene, inhaltliche Einheit dar. Der verlinkte Begriff steht für das Ziel des Hyperlinks, da verwirren die Satzzeichen nur. (Zum Beispiel auf diese Weise! Sieht doch nicht gut aus.) Ganz klar ist die Sache bei ausgeschriebenen Hyperlinks, beispielsweise http://base-box.de; Hier hätte der Strichpunkt wirklich nichts innerhalb des Links zu suchen, da er die URL verfälschen würde.

Fazit

Eine der wichtigsten und richtigsten Weisheiten für Designer lautet: »Nur wer die Regeln kennt, kann sie gezielt brechen.« Ich habe oben einige der wichtigsten Regeln für den Schriftsatz im Web besprochen. Das sind selbstverständlich alles keine absoluten Wahrheiten. Wer also Diskussionsbedarf sieht, möge sich in Form von Kommentaren rühren! Ich freue mich über ausgedehnte Fachsimpelei und Fehlerkorrekturen seitens meiner Leser.

Weiterführende Links