5 Schritte für gute Lesbarkeit deiner Website

Lesbarkeit ist einfach ein so wichtiger Faktor für deine Website. Wenn potenzielle Kunden ihre Augen anstrengen müssen oder deinem Text nicht folgen können, riskierst du, ihr Interesse zu verlieren. Du hast all diese hochkonvertierenden Texte geschrieben, findest du nicht auch, dass es wichtig ist, dass deine Nutzer sie tatsächlich lesen können?

Nur weil DU etwas leicht lesen kannst, heißt das nicht, dass es auch für deine Nutzer gilt. Sie könnten sehbehindert, farbenblind oder mit einer niedrigeren Bildschirmauflösung unterwegs sein. Es ist wichtig, diese Nutzer bei der Gestaltung deiner Website zu berücksichtigen.

Im Web neigen Nutzer dazu, Texte zu überfliegen, anstatt jedes einzelne Wort zu lesen. Mit ein paar Tricks kannst du jedoch dafür sorgen, dass Nutzer tatsächlich den Inhalt lesen, den du mit so viel Mühe erstellt hast!

Hier sind einige Tipps, um die Lesbarkeit deiner Website zu überprüfen und zu verbessern. Ich zeige dir, wie du die CSS Peeper Chrome-Erweiterung benutzt. Das ist eine meiner absoluten Lieblings-Erweiterungen, weil sie dir so viele nützliche Informationen liefert – Schriftgröße, Stil, Farbe, Button-Größe und mehr – ohne dass du dich durch den Code wühlen musst.

Zuerst rufst du deine Website auf und wählst eine Seite aus, die viel Text enthält. Klicke auf das CSS Peeper Plugin. Jetzt kannst du auf jedes Element der Seite klicken, um dessen Stil anzuzeigen. Klicke auf einen Abschnitt des Fließtextes.

Als Nächstes überprüfen wir einige wichtige Dinge.

Kontrastverhältnis

Ich fange mit diesem Punkt an, weil es der häufigste Lesbarkeitsfehler ist, den ich bei Geschäftsinhabern sehe (leider auch bei vielen Webdesignern!).

Wenn du bei Divi unter Design schaust, welche Farbe deine Schrift hat, siehst du einen sechsstelligen Code. Das ist der Hex-Code, der dem Computer sagt, welche Farbe angezeigt werden soll. Wenn der Seitenhintergrund nicht weiß ist, klicke, um diesen Hex-Code ebenfalls anzuzeigen.

Besuche jetzt contrast-ratio.com. Kopiere deine Text- und Hintergrundfarben in die Felder. Diese Website wird dir sagen, ob dein Text die Standards der wichtigsten internationalen Normungsorganisation für das Internet erfüllt.

Das ist wichtig für deine Nutzer, die farbenblind sind oder eine Sehschwäche haben. Wenn dein Text den Test nicht besteht, versuche entweder, die Hintergrundfarbe aufzuhellen oder die Textfarbe zu verdunkeln.

Schriftgröße

Eine gute Faustregel für Webtexte ist eine Mindestgröße von 14 px. Ist dein Text kleiner als 14 px? Erhöhe die Schriftgröße!

Schriftart

Dieser Punkt ist etwas offener für Interpretationen, aber es ist gut, ihn zu überprüfen.

Es spielt keine Rolle, ob du eine Serif- oder Sans-Serif-Schrift für deinen Webtext verwendest; beide sind ziemlich standardisiert und gut lesbar.

Aber achte darauf, keine unkonventionellen Schriftarten wie Handschrift, Skript oder dekorative Schriften zu verwenden. Solche Schriftarten können in kleinen Dosen in großen Überschriften großartig sein. Aber sie gehören nicht in deinen Fließtext.

Zeilenabstand

Es ist schwer, Text zu lesen, der zu nah an der darunterliegenden Zeile ist. In Divi kannst die Zeilenhöhe unter Design > Text/Überschrift einstellen.

Deine Zeilenhöhe sollte 150 % deiner Schriftgröße betragen, um für alle Nutzer gut lesbar zu sein.

Zum Beispiel, wenn deine Schriftgröße 14 px beträgt, multipliziere sie mit 1,5, um eine ideale Zeilenhöhe von 21 px zu erhalten. Rechne nach und prüfe, ob du genügend Abstand zwischen deinen Zeilen hast. Andererseits solltest du auch nicht zu viel Platz haben.

Es ist auch hilfreich, deinen Text in kürzere Absätze zu unterteilen, damit die Augen etwas Erholung haben!

Zeilenlänge

Ein weiterer wichtiger Aspekt für die Lesbarkeit ist die Zeilenlänge.

Wenn die Zeile zu kurz ist, müssen unsere Augen viel springen, was ermüdend ist. Ist die Zeile zu lang, verlieren wir leicht die Stelle und müssen erneut lesen.

Die richtige Breite deines Textblocks hängt von deiner Schriftgröße ab, da eine ideale Zeilenlänge etwa 60-100 Zeichen beträgt (das heißt einzelne Buchstaben und Leerzeichen).

Um das zu testen, lade das Word Counter Plus Chrome Plugin herunter. Markiere eine Textzeile und klicke mit der rechten Maustaste, um den Word Counter auszuwählen.

Sieh dir die Zeichenanzahl an. Wenn sie über 100 Zeichen liegt, solltest du die Breite deines Textblocks verringern. Liegt sie unter 60 Zeichen, solltest du sie verbreitern.

Abschluss

Sobald du diese kleinen Anpassungen vorgenommen hast, wird deine Website für deine Nutzer deutlich lesbarer und zugänglicher sein.

Jedes Mal, wenn ein Nutzer mit deiner Seite interagiert, ist es Teil seiner Erfahrung als Kunde. Gib deinen Kunden ein herausragendes Erlebnis, bei dem sie nie ihre Augen anstrengen oder blinzeln müssen, um einen Blogbeitrag zu lesen. Dann können sie sich voll und ganz auf deinen Inhalt und deine Botschaft konzentrieren.

Hast du Änderungen entdeckt, die du an deiner Seite vornehmen wirst?