Schlagwort: lesbarkeit

Kategorien
Gestaltung und Design Typographie Webdesign/Gestaltung

Tipps zu hellem Text auf dunklem Grund

In Light text on dark background vs. readability von Roger Johansson geht’s mal wieder um die Probleme und Tipps zu weißem/hellen Text auf schwarzen/dunklen Hintergrund. Besonders im Hinblick auf die Lesbarkeit. Oftmals verwischen sich die hellen Buchstaben zu einem nicht lesbaren Brei. Die wichtigsten Regeln einmal zusammengefasst:

Schriftgröße

Als allererstes sollte man eine ausreichende Schriftgröße verwenden. Mini-Texte jenseits der 10px sollten generell vermieden werden, lesbar wird es so ab 12px. Auf eine geeignete Schriftart ist wie immer auch zu achten!

Beispiel zur Schriftgröße ansehen.

Zeilenabstand vergrößern

Um die Lesbarkeit zu steigern und keinen Textbrei zu erhalten, sollte der Zeilenabstand vergrößert werden. Am einfachsten geht dies mit der CSS-Anweisung line-height: Ein Beispiel: line-height: 1.4em;. Dies würde den Zeilenabstand um 40 % der Schriftgröße erhöhen.

Beispiel zum erhöhten Zeilenabstand ansehen.

Wie man sieht, hat die Lesbarkeit enorm zugenommen. [Feed-Abonnenten sollten einfach mal die Original-Seite anschauen und das Stylesheet neu laden (F5 drücken).]

Laufweite erhöhen (sperren)

Zusätzlich zum Zeilenabstand kann man auch noch die Abstände zwischen den Buchstaben vergrößern: letter-spacing: 0.03em;. Hierbei ist es wichtig, das ganze nicht zu übertreiben! Außerdem sollte man hier auch die Wortabstände per word-spacing vergrößern, da es bei hohen Werten sonst schwer werden könnte, Zwischenräume und Leerzeichen auseinanderzuhalten. Dieser Wert sollte über dem Buchstaben-Abstand liegen.

Beispiel zur erhöhten Laufweite ansehen.

Kontrast

Der Kontrast zwischen Hintergrund- und Textfarbe sollte ausreichend genug sein, beide voneinander zu unterscheiden, aber auch nicht zu groß oder auch grob ausfallen, da dies auf Dauer schwer für die Augen werden kann. Wählt man für den Hintergrund die Farbe Schwarz #000 und gibt dem Text ein dunkles grau wie #666, dann ist der Text kaum zu erkennen. Färbt man den Text allerdings weiß (#FFF) wird es wieder besser mit der Lesbarkeit.

Beispiel zum Kontrast ansehen.

Natürlich gelten diese Regeln auch bei dunkel-auf-hell-Webseiten. Vielen Dank nochmal an Christoph für seine Hinweise in den Kommentaren.

Weitere Infos