29. Dezember 2005 in Journal » Usability/Accessibility
Lesekomfort durch optimale Typographie
Texte brauchen Platz zum Atmen
Weißräume erleichtern das Lesen von kleinen, wie auch großen Texten ungemein. Ausreichende Abstände zu beiden Seiten und zu folgenden Absätzen gehören einfach zu einem gut lesbaren Text dazu. Wenn nicht genug Weißräume vorhanden sind, kann der Text oder gar die ganze Seite überladen wirken.
Die Zeilenhöhe, also die Abstände jeder Zeile nach oben und unten, sollte mindestens 150% der Schriftgröße betragen. Ich persönlich habe mich auf meiner Website für 160% entschieden.
Die folgende Abbildung zeigt das Verhältnis von Schriftgröße und Zeilenhöhe:
Die Zeilenhöhe wird mit CSS folgendermaßen bestimmt:
line-height: 160%;
Natürlich können auch Einheiten wie em, pt oder auch px genutzt werden. Wobei sich aber Punkte und Pixel nicht wirklich dafür eignen, da im Internet Explorer eine Skalierung der Schriftgröße den Text unlesbar macht.
Kontraste
Bei Websites sollte zumindest der Hauptinhalt eine dunkle Schrift auf hellem Hintergrund aufweisen. Denn auf dunklem Hintergrund kann die Schrift zu klein und zu gequetscht wirken, und die Aufmerksamkeit des Lesers verlieren. Um das Interesse des Lesers auf den Hauptinhalt zu lenken, sollten für nebensächlichere Inhalte (z.B. eine Sidebar) niedrigere Kontraste gewählt werden.
Schriftgrößen
Obwohl Designer meist niedrige Schriftgrößen vorziehen, sollte man den Leser dadurch nicht unnötig belasten. Deshalb empfehle ich für Fließtext eine relativ große Schrift (wie z.B. 0.85 em der Standard-Schriftgröße des Browsers) zu nutzen.
Vorschau
Im nächsten Artikel trage ich ein paar Tipps zum web-gerechten Texten zusammen. Denn nicht nur die Typographie, sondern auch der Schreibstil trägt zur Übersichtlichkeit und zur leichten Aufnahme bei.
Diskussion geschlossen
Die Kommentarfunktion dieses Artikels wurde deaktiviert. Private Mitteilungen an Martin bitte per E-Mail an martin@labuschin.com. Danke.
10 Kommentare
robert am 29. Dezember 2005 #
ist die schriftgröße von 0.85em in allen browsern die standard größe?
findest du, dass deine sidebar einen geringeren kontrast bieten würde als der main-content, wenn die sidebar größer wäre und der main-content kleiner - also die seiten quasi vertauscht würden?
weiß auf schwarz müsste doch den gleichen kontrast bieten, wie schwarz auf weiß, oder? (aber es ist anstrengender zu lesen...)
gruss rob
(und bitte beantworte mal meine mail)
Michael Schmid am 29. Dezember 2005 #
Hat jetzt zwar nicht unbedingt direkt mit Typographie zu tun sondern mehr mit dem Layou allgemein:
Mir fällt leider immer wieder auf, dass -- wohl zugunsten des Designs -- Webseiten mit fester Breite gestaltet werden. Bestes Beispiel hier auf dieser Seite. Trotz 1280er Auflösung in der Breite kommt der Inhalt gerade mal auf 400 Pixel Breite. Vergrößert man die Schrift, so sind pro Zeile nur wenige Worte. Die hochgesetzte line-height macht den Rest, d.h. der Besucher muss ständig scrollen. Hier auf dieser Seite als Beispiel: 400Pixel Textbreite, bei einer 1280er Breite 2x 250px dunkelgrau und verschwendet, + 285 Pixel verschwendet die Sidebar. D.h. bei 1280er Auflösung wird der Inhalt gerade mal zu 30% ausgenutzt, bei beispielsweise Notebook mit 1500er Breite nur noch gute 25%. Noch extremer bei den Kommentaren, wo nur etwa 320 Pixel zur Verfügung stehen.
D.h. meines Erachtens ist nicht nur die Typographie für den Lesekomfort wichtig, sondern auch das Seitendesign selbst.
Martin Labuschin am 30. Dezember 2005 #
@Robert: Nein, 0.85em ist nicht die Standardgröße. Ich meine eher 0.85em gesehen relativ vom Standard eines Browsers. Ich denke, die meine Sidebar verliert schon ziemlich viel Aufmerksamkeit, wenn man bedenkt, dass sie fast die selbe Hintergrundfarbe wie der Body hat. Und die Schriftfarbe meiner Sidebar ist ja auch nicht weiß... Ausserdem wirkt ja Schrift, wie schon gesagt, kleiner als umgekehrt, wenn der Hintergrund dunkler ist als die Schrift.Robert, es ist noch keine Mail von dir hier eingetroffen. Wann hast du sie denn geschrieben? Und ist die Email-Adresse auch die deines Gravatars? Vielleicht schickst du sie nochmal.
@Michael: Ich kann dir wegen den Skalieren der Schriftgröße teilweise zustimmen. Das Layout müsste sich am besten ja mit vergrößern. Denn eine optimale Zeilenlänge, also etwa 60 bis 70 Zeichen pro Zeile, passt ja nicht mehr, wenn man zoomt.Wegen der Zeilenhöhe kann ich dir aber nicht zustimmen, denn die bleibt ja im Verhältnis eigentlich gleich.
Pascal am 30. Dezember 2005 #
An Martin Schmid
Der Vorteil von hohen Auflösungen ist das man mehrere Fenster nebeneinander offen haben kann und hat und nicht das man mit maximiertem Browser surft was jedoch besonderes bei Windowsusern sehr gängig ist. Ich ärger mich auch oft genug über Webseiten die viel zu breit für meinen alten 17" Röhrenmonitor sind und die sich dann nicht einmal per Opera auf Browserbreite drücken lassen.
Pascal am 30. Dezember 2005 #
Sorry hab mich verlesen, ich meinte Michael Schmid ;)
Martin Labuschin am 30. Dezember 2005 #
Wegen der hohen Auflösung hast du Recht. Schlaue Leute mit hoher Auflösung wissen den Vorteil des gewonnenen Platzes meißt zu nutzen.
robert am 30. Dezember 2005 #
ok, habe die mail jetzt nochmal verschickt. (mit meiner gravatar-mailadresse).
ich habe das mit den farben jetzt nochmal nachgelesen.
http://www.metacolor.de/komplementaerfarben.htm
die wirkung war mir gar nicht bewusst.
tomsw am 30. Dezember 2005 #
Vor allem bei den Kommentaren muss man bei dir extrem viel scrollen, aber sonst gefällt mir das Lesen hier sehr gut!
soeren am 9. Januar 2006 #
zitat: [...das lesen am bildschirm unterscheidet sich sehr vom lesen von printmedien...]
genau darum verzichte ich auf kursive schriftarten. diese sehen schon in gedruckter form des öfteren grauenvoll aus und sind schwer lesbar. für die darstellung auf monitoren, projektoren etc. trifft dies besonders zu.
Conny Lo am 20. März 2006 #
Die einzig brauchbare Kursive ist die der ?Georgia?. Diese Serifenschrift ist auch sonst recht brauchbar für Fließtexte im Web. Sie ergibt ein erfreulich helles Schriftbild ab, sodaß übermäßiger Durchschuss entfallen kann.
Und noch was zur festen Seitengröße: wer eingermaßen häufig Sites gebaut hat, merkt, dass alle Bestandteile der Site ineinander greifen und zusammen passen sollten. Die Grundregel, eine passende Zahl von Anschlägen pro Zeile einzuhalten, bedingt zum Beispiel passende Satzbreite, diese schiebt die anderen Elemente, Überschriftengrößen müssen harmonisieren usw.
Ein groß aufgebautes Layout zieht unweigerlich großzügige Typografie nach sich usw. Web2.0-mäßiges Design ist dafür Beispiel. Möchte man aber warmes, unaufdringliches (Blog)Design, dann verzichtet man auf alle Aufblähung, und es reichen geringe Ausmessungen. So ist es doch erfreulich, wenn die Site in festen Rahmen bleibt, und nicht nach Belieben verzerrt, gedehnt, verhunzt wird.
Wo wir bei der Frage des liquiden Designs angelangt wären ;-)