Typografie im Webdesign: Teil 2 – Grundregeln zur Lesbarkeit

Elmastudio Artikel Thumbnail

Hier ein paar Grundregeln, um die Lesbarkeit deiner Webtexte zu ver­bes­sern. Um die Punkte besser ver­ständ­lich zu machen, habe ich jeweils ein Beispiel von der Elmastudio-Webseite aus­ge­sucht.

Scannbare Texte (scan­nable text)
Scannbarer Text

Scannable Text bedeutet, Webtexte werden viel mehr über­flogen bzw. vom Auge »abge­scannt«, als wie in einem Buch richtig gelesen. Einige Elemente um deine Webtexte für den Leser »Scannable« zu machen:

   - Deine Texte sollten nicht zu lang sein.
   - Zeilenabstände glie­dern den Text.
   - Auflistungen lassen sich leicht lesen.
   - Schlüsselwörter kannst du durch Farbe, Fett oder Kursiv her­vor­heben.
   - Unterstrichene Wörter weisen auf Links hin.

Fokus-Elemente
Fokus Elemente

Um dein Weblayout inter­es­santer zu gestalten, kannst du Elemente wie Buttons, Bilder, Grafiken oder Icons ver­wenden. So kannst wich­tige Elemente betonen.

Weiße Flächen
Weiße Fächen

Weiße Flächen kannst du geschickt als Trennelemente ein­setzen. Wichtig ist z.B. ein ange­nehmer Textrand, Abstände zwi­schen Über­schrift und Text, und Zeilenabstände.

Benutzerfreundliche Über­schriften
Benutzerfreundliche Überschriften

Über­schriften sind mit die wich­tigsten Elemente in der Typografie.
Sie sollen den Leser fes­seln, und sollten daher nicht zu lang sein.

Beim Verhältnis der Über­schrift zum Text, heißt es, das rich­tige Maß zu finden. Ist die Über­schrift zu groß, schreckt das den Leser ab. Ist sie zu klein, findet sie nicht die gewünschte Beachtung.

Benutze Fotos und Grafiken
Grafiken und Fotos

Fotos und Grafiken sind abwechs­lungs­reiche Elemente und lockern deine Texte auf.

Trennelemente
Trennelemente

Indem du Elemente wie Linien und far­bige Hintergründe ein­setzt, kannst du dein Layout besser struk­tu­rieren. So findet sich der Benutzer besser auf deiner Webseite zurecht.

Das sind natür­lich nur die wich­tigsten Elemente, um die Lesbarkeit deiner Webtexte zu ver­bes­sern. Falls du noch wei­tere Vorschläge, oder Beispiele hast, schreibe doch ein­fach einen Kommentar.

2 Kommentare

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.

*


Top