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

Immer wieder frage ich, was zuerst kommt: » oder «? Aber es ist wie in der Straßenverkehrsordnung: Rechts vor Links, R vor L. Also, erst » (») dann « («).

Und so sieht das dann aus: »Ein Text, der in französichen Anführungszeichen, auch Guillemets genannt, steht. Zu beachten ist, dass die Klammern sozusagen auf den Text zeigen. Würde man diesen Text in französisch schreiben, müsste man die Guillemets umkehren.«

Mini-Update: Die einfachen Guillemets werden mit › (›) und ‹ (‹) erzeugt.

Björn Seibert haut mal wieder geballtes Fachwissen in die Welt, diesmal geht es um Schriftgrößen.

Er geht darauf ein, dass noch oft gepredigt wird, fixe Schriftgrößenangaben zu verwenden obwohl diese im IE nicht vergrößert werden können und somit sehr benutzerunfreundlich sind.

Außerdem geht es um einen Fehler im IE 5.xx, der mit em-Größenangaben nicht zurecht kommt wenn man bespielsweise die Schriftgrad-Einstellung (Ansicht, Schriftgrad) ändert. Er empfielt Prozentwerte zu verwenden.

Viel Spaß beim lesen.

Seit ich damals am 20.8.2004 einen gewissen Eintrag im Dr. Web-Weblog (mittlerweile gelöscht) gelesen habe und mich auf Gerrit van Aakens Website/Portfolio schubsen hab lassen, wende ich intensiv folgende Tastenkombinationen an:

  • Alt 0133 für das Auslassungzeichen …
  • Alt 0187 für das in deutschen Texten anführende Guillement »
  • Alt 0171 für das abschließende Guillement «

Ach ja, das richtige Apostroph ’ mache ich auch gerne mit Alt 0146.

Nur mit den unterschiedlichen Strichen hab ich noch nicht drauf ….

Alles das und noch viel mehr gibt es in seinem Essay über Sonderzeichen.