Die meisten Webseiten sind vollgestopft mit kleinem Text, der schwierig zu lesen ist. Warum? Eigentlich gibt es keinen Grund, so viel Information auf eine Bildschirmseite zu quetschen. Eigentlich ist es eine dummer Fehler aus vergangenen Zeiten als Bildschirme sehr klein waren.

Screen vs. Magazin: 100% ist nicht groß; Bild von Wilson Miner.

Erzähl uns nicht, wir sollen die Schriftgröße anpassen

Wir wollen unsere Browser Einstellung nicht jedes mal ändern, wenn wir eine Webseite besuchen!

Erzähl uns nicht, volle Webseiten sehen besser aus

Überfüllte Webseiten sehen nicht gut aus, sie sehen hässlich aus. Seiten mit irgendwelchen Sachen füllen hat der Usability noch nie geholfen. Es ist Faulheit, die dich veranlasst, uns alle möglichen Informationen an den Kopf zu werfen. Wir wollen, dass du dir Gedanken machst und vorauswählst, was wichtig ist. Wir wollen nicht deine Arbeit machen.

Erzähl uns nicht, scrollen ist böse

Dann sind nämlich alle Webseiten böse. Es ist nichts falsches am Scrollen. Gar nichts. Genau so wie nichts böses daran ist, eine Buchseite umzublättern.

Erzähl uns nicht, Text sei nicht wichtig

95% von dem, was Webdesign ausmacht ist Typographie.

Erzähl uns nicht, wir sollen uns Brillen kaufen

Lehn dich vielmehr zurück (!) und lese in einer entspannten Position weiter.

Fünf einfache Regeln

1. Standard Schriftgröße für lange Texte

Die Schriftgröße des Textes den du gerade liest ist nicht groß. Es ist die Schriftgröße, die Browser als Default anzeigen. Es ist die Schriftgröße, die von Browsern zur Anzeige vorgesehen war.

Wir wollen keine “Größer” oder “Kleiner” Buttons drücken und wir wollen unsere Browser Einstellungen nicht verändern. Wir wollen einfach loslesen. Wir wollen, dass du deine Einstellungen an unsere anpasst und nicht anders herum.

Am Anfang ist es schwieriger ein gutes Layout mit einer großen Schriftart zu erstellen, aber diese Herausforderung wird dir helfen, eine einfachere klarere Seite zu designen. Eine Seiten mit Informationen vollstopfen ist nicht schwer, aber eine Seite schlicht und einfach bedienbar zu gestalten ist es. Am Anfang wirst du geschockt sein, wie groß die Default Schriftgröße ist. Aber nach ein paar Tagen wünscht du dir keinen kleineren Schriftrgöße als 100% für den Text. Es sieht zwar erstmal groß aus, aber du wirst feststellen warum alle Browser Hersteller diese Größe als Default ausgewählt haben.

2. Aktiver “White Space”

Lass deinen Text atmen. Die Benutzung von White Space ist kein Steckenpferd von Designern und keine Geschmacksfrage.

“The width of the column must be proportioned to the size of the type. Overlong columns are wearying to the eye and also have an adverse psychological effect. Overshort columns can also be disturbing because they interrupt the flow of reading and put the reader off by obliging the eye to change lines too rapidly.”
Josef Muller-Brockmann, Grid Systems

Luft um den Text zu lassen reduziert den Stress Level und macht es wesentlich einfacher, sich auf die Hauptsache zu konzentrieren. Du musst nicht das ganze Fenster füllen. Dass White Space besser aussieht ist kein Seiteneffekt: Es ist die logische Konsequenz von funktionalem Design. Wer sagt, Webseiten müssen überfüllt sein?

Muller-Brockmann: “The question of the column width is not merely one of design or format; the question of legibility is of equal importance.”

Bitte stell sicher, dass die Linienbreite (line width) nicht zu groß ist und dass Du nach rechts und links Platz lässt damit das Auge es einfacher hat zu springen. Wir wollen weder die Schriftgröße noch die Fenstergröße anpassen. Wenn wir eine Webseite öffnen, wollen wir sie sofort lesen. Spaltenbreiten die skalieren sind nett; Unendliche Textzeilen über die ganze Bildschirmbreite sind es nicht.

Die Grundregel lautet: 10 bis 15 Worte pro Zeile. Für Liquid Layouts mit einer Schriftgröße von 100% ist eine Spaltenbreite von 50% (in Relation zur Fenstergröße) ein guter Mittelwert für die meisten Auflösungen.

3. Leserfreundliche Zeilenhöhe

Das sagen die Spezialisten:

Zeilenhöhen, die zu schmal sind, schaden der Lesegeschwindigkeit weil die obere und untere Zeile vom Auge zur gleichen Zeit erfasst wird. Das Auge kann nicht exklusiv auf eine Zeile fokussieren und der Leser verschwendet Energie an der falschen Stelle und ermüdet schneller. Das gleiche gilt für Zeilen, die zu viel Abstand haben.

Die Default HTML Zeilenhöhe ist zu klein. Erhöhst Du die Zeilenhöhe ist der Text einfacher lesbar. 140% Zeilenhöhe ist ein guter Richtwert.

4. Klarer Farbkontrast

Dies sollte eigentlich selbstverständlich sein, aber wenn Du immer noch glaubst, Du kannst die folgenden Kombinationen verwenden:

  1. Hellgrauer Text auf hellergrauem Hintergrund
  2. Silberfarbener Text auf einem schneeweißen Hintergrund
  3. Grauer Text auf einem gelben Hintergrund
  4. Gelber Text auf einem roten Hintergrund
  5. Grüner Text auf einem roten Hintergrund und so weiter…

… dann bist du kein Webdesigner sondern nur ein Designer mit einer Attitüde. Wenn du darauf bestehst, ein Webdesigner zu sein, dann musst du dir darüber bewusst sein, dass dies keiner je erfahren wird, weil keiner lesen kann, was du schreibst. Hör auf mit diesem Unsinn und lass uns sehen, was du geschrieben hast. Anmerkung: Für das Screendesign ist ein zu starker Kontrast (z.B. schwarz und weiß) auch nicht ideal, weil der Text anfängt zu flackern. Empfehlung: #333 auf #fff.

5. Kein Text in Bildern

Wir wollen in der Lage sein, Text zu suchen, Text zu kopieren, Text zu speichern, mit dem Mauszeiger zu spielen und Text zu markieren, während wir ihn lesen. Text in Bildern sieht schön aus, aber es geht nicht um schön bei Webdesign. Es geht um Kommunikation und um Information und Information muss lesbar, benutzbar skalierbar, zitierbar und verschickbar sein.

Wenn du deine Webseite nicht gutaussehend machen kannst ohne Text in Bildern zu benutzen, solltes Du noch einmal von vorne anfangen.

Dies ist eine Übersetzung des wunderbaren Artikels “The 100% Easy-2-Read Standard” aus dem Information Architects Blog.

Wie sind Eure Erfahrungen mit der Verwendung von Textgrößen? Was gefällt Euch? Welche Diskussionen hattet Ihr schon mit Kollegen oder Kunden zu dem Thema?

Popularity: 4%