Fünf Gute Vorsätze für

Bessere Lesbarkeit

Status Quo


Auch in 2012 leiden noch viele Webseiten
unter schlechter Lesbarkeit.

Spiegel Online
Microsoft
Fulda.de
Osthessen-News
Osthessen-News

Muss das sein?


Besucher suchen bestimmte Informationen – nicht grafisch aufwändige Layouts oder blinkende Werbung. Der Inhalt sollte immer im Vordergrund stehen.

Denn der beste Inhalt nützt wenig, wenn der Konsument ihn nur schwer wahrnehmen kann.

Gute Lesbarkeit ist keine Kunst*



*wenn man die folgenden Punkte beachtet

Schriftgröße

Die Schriftgröße für längere Texte auf dem Bildschirm sollte nicht kleiner sein als 16px.

Schriftgröße


Aus gutem Grund sind 16px die Browser-Standardschriftgröße. Dennoch quälen viele Seiten ihre Leser mit Texten die in 12px oder kleiner gesetzt sind.

16px? Viel zu groß!


Oliver Reichenstein bringt es auf den Punkt:

Initially it is more difficult to create a good layout with a big font size, but that difficulty will help you design a simpler, clearer site.

Zeilenabstand

Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.


Mehr Platz zwischen den Zeilen erleichtert das Lesen längerer Texte. Ideal sind ca. 130%-150% der verwendeten Schriftgröße.

Zeilenabstand

p {
    line-height: 1.4em;
}

Es empfiehlt sich die Verwendung von em anstatt Pixel, da em-Angaben relativ zur Schriftgröße sind.

Zeilenlänge

Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz! " quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.

Die maximale Zeilenlänge sollte zwischen 50-80 Zeichen liegen.

Zeilenlänge

p {
    width: 455px;
}

Bei einer Zeichengröße von 16px liegt die optimale Zeilenlänge zwischen 450px-650px.

Kontrast

Gut lesbar?

Gut lesbar

Kontrast

p {	
    background: #fefefe;
    color: #333;
}

Im Idealfall sollte auch die Verwendung von 100% Schwarz auf 100% Weiß vermieden werden.

Schriftart


Für lange Texte sind Serifen-Schriften am Besten geeignet, da diese i.d.R. klarer voneinander unterscheidbare Zeichen enthalten.

Dadurch vereinfacht sich das Erkennen von »Wortformen« beim schnellen Lesen.

Schriftart


Illusion


Illusion

Ein kleines Beispiel


Link zum Beispiel

Ein Klick auf den »Lesbarkeit« Knopf rechts oben, wendet die eben erwähnten Vorsätze auf den Text an.

Bonuspunkte


body {
    text-rendering: optimizeLegibility;
}

Bei Angabe dieser CSS-Eigenschaft verbessern Mozilla- und WebKit-basierte Browser die Text-Darstellung.

Optimiertes Kerning



Farbe: LAVA


Farbe: LAVA

Ligaturen



raffiniert


raffiniert

Oh, und eins noch…

Diesen klassischen CSS-Fontstack bitte vermeiden:

body {
    font-family: Arial, Helvetica, sans-serif;
}

Arial vs. Helvetica

Die bessere Variante

body {
    font-family: sans-serif;
}

Hier wird einfach der Browserstandard Sans-Serif Font genutzt:

  • Windows: Arial
  • MacOS/iOS: Helvetica
  • Linux: ???

Buchempfehlung

»Buchstabenkommenseltenallei n«

von Indra Kupferschmid

Ich will aber nicht warten!


Wer nicht warten möchte, bis die Lieblingsseite ihre Inhalte auch lesbar anbietet –
dem kann geholfen werden.

Fragen?


Mario Fink (@mariofink)

Mehr zum Thema

Links zu Positivbeispielen

Links zu Negativbeispielen

Quellen

Erstellt mit

reveal.js – a css 3d slideshow

Thank you @hakimel!