praegnanz.de büro für intervernetzte medien

Gerrit, 13.08.2004

Bitte Abstand halten

Was der Schriftsetzer damals mühsam pauken und üben musste, macht der Computer heute von alleine. Falsch gedacht! Auch beim digitalen HTML-Schriftsatz kann man viele Fehler machen. Ein kleiner Ratgeber über Zeilen, Spalten und das richtige Maß.

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

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

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.


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.


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:

css Zen Garden 15 Petals

Und so sieht weniger Laufweite bei pixelgraphix aus:

pixelgraphix


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

20 Kommentare

  1. Henning Krol am 19. August 2004 #

    Vielen Dank für diesen Artikel!

    Auf The Exit scheint der Zeilenabstand mittlerweile erhöht worden zu sein. Sieht zumindest im Firefox so aus.
  2. Peter Bergner am 22. August 2004 #

    durchaus mal S p e r r e n
    Beim Sperren, sollte man darauf achten, den Abstand vor und nach dem gesperrten Wort zu vergrößern, sonst verbinden sich optisch die Buchstaben (Worte) vor und nach dem gesperrten Wort mit diesem (so wie es z.B. oben im Text passiert).
  3. Alex Bepple am 15. November 2004 #

    Mit dem Sperren sollte man sehr vorsichtig sein, es wird gerne mal missbraucht. Robert Bringhurst bringt die Richtlinien hervorragend auf den Punkt:

    “The reason for not letterspacing lower case is that it hampers legibility. But there are some lowercase alphabets to which this principle doesn’t apply. (…)

    Moderate letterspacing can make a face such as lower case Univers bold condensed more legible rather than less. Inessential ligatures are (…) omitted from letterspaced text. (…)

    Letterspacing will always sabotage a Renaissance roman or italic. But when we come to the other extreme, the faces with no calligraphic flow, letterspacing of lowercase letters can sometimes be of genuine benefit.

    Because it isolates the individual elements, letterspacing has a role to play where words have ceased to matter and letters are what count. Where letters function one by one (as in acronyms, web-site and e-mail address) letterspacing is likely to help, no matter whether the letters are caps, small caps or lower case.”
  4. Alex Bepple am 15. November 2004 #

    Mit der Regel, Interpunktionszeichen nach fett ausgezeichnetem Text ebenfalls fett zu setzen, bin ich nicht einverstanden. Fettes springt ins Auge, aber das Interpunktionszeichen ist gar nicht das, was hervorgehoben wird.

    Von vielen Typographen, nämlich u.a. Dominic Hurley, Thomas Phinney und Robert Bringhurst, wird das ebenso gesehen. Robert Bringhurst schreibt in seinen „Elements of typographic style“:

    „When boldface is used to emphasize words, it is usually best to leave the punctuation in the background, which is to say, in the basic text font. It is the words, not the punctuation, that merit emphasis.“
  5. Nicolai am 26. Dezember 2004 #

    Auf keinen Fall darf die linke Klammer ein anderes Verhalten wie als die rechte aufweisen
  6. Flomo Hardwig am 7. Januar 2005 #

    @Alex

    »He who would letterspace lower-case text, would steal sheep.« (»Wer Gemeine sperrt, stiehlt auch Schafe.«)
    → Eric Gill (auch Frederic Goudy zugeschrieben)
  7. nighthawk am 2. Februar 2005 #

    ein pingeliger kommentar:
    wenn mich nicht alles taeuscht heisst die regel »Anders.. als, aber gleich.. wie« – der satz

    Auf keinen Fall darf die linke Klammer ein anderes Verhalten aufweisen wie die rechte

    muesste also korrekterweise

    Auf keinen Fall darf die linke Klammer ein anderes Verhalten aufweisen als die rechte

    heissen. ob da jetzt noch ein komma vor das »als« muss weiss ich leider dank der allgemeinen volksverwirrung (auch als neue deutsche rechtschreibung bekannt) gerade nicht auswendig.
  8. Christoph am 26. März 2005 #

    Wie kann man eigentlich die Zahl der Anschläge in einer Zeile kontrollieren? Wenn ich versuche, sie mit width: 70em; beispielsweise festzulegen, funktioniert das doch wieder nur, wenn die verwendete Schriftart auch auf dem Computer des Lesers vorhanden ist. Falls nicht und sie durch eine generische ersetzt wird, kommt alles durcheinander, nicht nur die Zeilenlänge, auch das Verhältnis zu Schrifthöhe und Durchschuß.
  9. Gerrit am 27. März 2005 #

    @Christoph: Es geht nicht! :-) Die ems im CSS haben nur bedingt etwas mit der tatsächlichen Breite der Buchstaben zu Tun. Auch die verschiedenen Darstellungsnuancen der verschiedenen Betriebssysteme spielen eine Rolle. Man kann also nur abschätzen. Das reicht aber meistens auch aus.
  10. r23 am 30. März 2005 #

    Trackback von r23:
    Bitte Abstand halten

    Ein kleiner Ratgeber über Zeilen, Spalten und das richtige Maß. Gerrit van Aaken
  11. Bodo am 21. Juni 2005 #

    Was mich beim Thema »Schriftsatz im Web-Design« schon lange irritiert:

    Bei jedem Browser kann man als Benutzer die Standard-Schriftgröße einstellen; zweckmäßigerweise so, daß man einerseits alles gut lesen kann, andererseits nicht zu wenig Text ins Fenster paßt. Halt so, wie es für einen am besten ist. Aber etliche Websites (dieser eingeschlossen) kommen dann daher und setzen ins CSS so etwas wie »font: 75% …«. Statt einer Schrift, die man noch gut lesen kann, bekommt man dann logischerweise eine Schrift vorgesetzt, die nur drei Viertel der Größe hat, die man gut lesen könnte.

    Frage: Was soll das? Sind marktübliche Browser so unbenutzbar oder marktübliche Browser-Nutzer so … äh …unbrowserbar, daß bei der Standard-Schriftgröße normalerweise zielgenau ein Drittel mehr herauskommt, als sinnvoll wäre? Oder wie oder was?
  12. Gerrit am 21. Juni 2005 #

    @Bodo: Die Sache ist die, dass man ja einen Ausgangspunkt braucht. Eine initiale Größe der Schrift. Und die ist bei 100% einfach zu groß und sieht klobig aus. Der Designer achtet also darauf, dass die Website bei unveränderter Schriftgröße einigermaßen okay aussieht. Denn viele User wissen gar nicht, dass man die Schriftgröße verändern kann. Schließlich weigert sich der Internet Explorer bei Schriftangaben in Pixeln, die Sschrift zu skalieren.

    Nach langem Probieren habe ich die Kombination aus Grundschriftgröße 75% und relativen Abweichungen in em für mich entdeckt. Eine Methode, die in allen Browsern zu halbwegs vernünftigen Ergebnissen führt.

    Ich weiß, dass vielen die Schrift zu klein ist. Aber glaube mir, wenn ich sie größer machen würde, schimpfen noch mehr Leute, weil nichts mehr auf den Bildschirm psst und weil es hässlich aussieht.
  13. Retrax am 3. Dezember 2005 #

    Super Text! Vielen Dank!

    Ich hatte seither…wie sagt man so schön… eine Bleiwüste nach der anderen auf meiner Seite.

    Dadurch, daß mir die Texte bekannt waren ist mir das auch gar nicht aufgefallen. Es ist sehr schwer die persönliche Brille abzunehmen und sich in die Perspektive des Besuchers zu versetzen.

    Aber dank diesem Essay hier wurde mir manches klarer bezüglich guter Webseiten Gestaltung! :-)
  14. Thomas am 4. Dezember 2005 #

    Der Zeilenabstand bei heise online sieht im Firefox 1.5 (Mac) irgendwie sehr eng aus, während Safari ihn größer darstellt. Jemand eine Ahnung wieso das so ist?
  15. Iris Bleyer am 16. Dezember 2005 #

    Zitat Alex Bepple:
    »Mit der Regel, Interpunktionszeichen nach fett ausgezeichnetem Text ebenfalls fett zu setzen, bin ich nicht einverstanden. Fettes springt ins Auge, aber das Interpunktionszeichen ist gar nicht das, was hervorgehoben wird.«

    Und damit bin ich so pauschal auch nicht einverstanden ;o). Ich persönlich habe mich dafür entschieden, ein nachfolgendes Interpunktionszeichen nur dann ebenfalls fett hervorzuheben, wenn es inhaltlich in unmittelbaren Zusammenhang mit dem hervorgehobenen Text steht.
    Beispiel: Wenn ich eine komplette Frage hervorhebe, ist auch mein Fragezeichen fett. Wenn ich jedoch nur einen einzelnen Begriff hervorheben will, der zufällig am Ende einer Frage steht, dann hebe ich das Fragezeichen nicht hervor, denn das würde m.E. den Sinn der Hervorhebung entstellen.

    Nebenbei bemerkt, imo ein sehr guter Artikel – insbesondere, weil er so offen formuliert und daher diskutabel ist. ;o)
  16. Rüdiger am 13. März 2006 #

    Der Artikel und die Kommentare haben mir sehr weitergeholfen. Danke

  17. arno am 28. August 2006 #

    Letterspacing vs. Sperren
    Auffällig wie blind für die eigene Typokultur viele Deutsche sind. In Fraktur gibt es keine Kursive. Deshalb wurde in deutschen Büchern das  S p e r r e n  viel mehr eingesetzt als in Seattle. Amerikaner nehmen ausgetriebene Zeilen kaum wahr, benutzen deshalb inter character spacing wo Deutsche Wortzwischenräume vergrößern. Wer öfters gesperrte Begriffe sieht, muss nämlich bei einer wegen Blocksatz geweiteten Zeile (ganz kurz und meist unbewusst) prüfen, ob Sperrung vorliegt.

    Die Statements über letterspacing gelten nicht fürs Deutsche.

  18. Thomas Förster am 15. Dezember 2006 #

    Hallo! Wollte nur mal fragen, ob die Möglichkeit besteht echte Kursive in HTML zu nutzen (statt »verschiefte«)?

  19. Greg am 11. Februar 2007 #

    Dass HTML keine Silbentrennung kann, ist so nicht ganz richtig. Der Text wird nicht automatisch getrennt, aber es gibt mit der Entität &shy; die Möglichkeit, anzugeben, an welcher Stelle eine Trennung stattfinden darf. Bei Bedarf wird dann dort auch automatisch getrennt. Gecko-Browser unterstützen dies leider (noch?) nicht.

  20. Fritz Jörn am 28. März 2007 #

    Feine, beeindruckend präzise Gedanken. Meine eigene Web-»Kunst« geht auf das Jahr 1966 zurück. Da waren die Bildschirme so schmal oder so grob, dass HTML direkt gelesen werden konnte. Zeilen durften zu Ende laufen. Inzwischen sind meine Seiten zu Lindwürmern geworden, wie Nudeln in chinesischen Fertigsuppen so dicht beinander und genauso unlesbar  … Trotzdem mag ich nicht auf CSS übergehen und Style Sheets und Kode, der hernach nur mehr mit Hochtechnologie zu korrigieren ist. Schad  …

Kommentarfunktion für diesen Artikel geschlossen.