Webtexte leichter lesbar machen

Start » Journal » So machst Du Deine Website-Texte leichter lesbar

 

So machst Du Deine Website-Texte leichter lesbar

Webtexte leichter lesbar machen

Es ist verflixt anstrengend, längere Texte am Monitor zu Lesen! Ist Dir bewusst, dass das zu einem großen Teil auch an der Aufmachung liegt? Also daran, wie die Texte formatiert sind.

Der Auftrag für Deine Websitetexte oder Blogposts lautet also klar: Mache Lust auf das Lesen Deiner Website-Texte, indem Du lese- und damit augenfreundlich formatierst. Ich lege Dir folgende 5 Schrauben ans Herz, an denen für besser lesbaren Text drehen kannst:

Erstaunlich oft sehe ich mittig ausgerichteteten Fließtext. Aber welchen Grund hat diese Ausrichtung? Bei einer Überschrift sehe ich den „Sinn“, dass damit  – eventuell mehrspaltiger – Text überspannt, also zusammengefasst wird. Aber bei Fließtext erschließt es sich mir nicht.

Es ist für das geneigte Leserauge sehr viel einfacher die Zeilenanfänge zu finden, wenn diese linksbündig ausgerichtet sind. Ein schnelles Erfassen von zentrierten Texten ist daher schwierig und macht sehr viel mehr Mühe. Aber gerade im Web wollen Texte schnell gescannt werden können.

Und on top: Zentrierte Texte wirken oft flatterhaft, machen eine Seite unruhig, stören den Lesefluss, lenken das Auge ab.

Mein Tipp: Zentrierte Überschriften sind okay. Geht ein Text aber über mehr als zwei Zeilen, dann rate ich eine linksbündige Ausrichtung an, weil es leichter lesbar ist.

Textorientierung für besser lesbare Texte

Bild 1:
Linksbündige Textorientierung für bessere Lesbarkeit

M

Zentriert

N

Linksbündig

Schriftgrößen

Fließtext

Wer einen Web-Text liest, sollte keine Leselupe brauchen. Für den Monitor ist es vorteilhaft, eher zu größeren Schriftgrößen zu greifen.

Allerdings wirken Schriftarten ganz verschieden. Daher kann es durchaus sein, dass Schriftarten gleicher Größe unterschiedlich gut lesbar sind. Zudem hängt die tatsächlich angezeigte Schriftgröße auch von Browser(-einstellungen) bzw. der Monitorgröße ab.

Lesepsychologisch gesehen sind zu kleine Schriftgrößen ungünstig, denn sie komprimieren Textabschnitte auch optisch. Einen „Block“ durchdringen zu müssen, das ist wenig einladend.

Mein Tipp: Im Zweifel lieber einen Schriftgrad höher wählen (und dann relative Maßeinheiten wie em, rem, vh oder vw verwenden)

Schriftgrößen für besser lesbaren Text

Bild 2:
Fontsvergleich: Monterchi Sans vs. Nunito Sans Regular bei gleicher Schriftgröße

M

< 16 px bzw. 1em

N

Richtgröße Fließtext:
16 – 20px oder 1em

Überschriften

Willst Du einen längeren Text zum Star erheben, dann gibt ihm krönende Überschriften. Formatiere die Überschriften auch visuell hierarchisch, denn so bekommt der Leser eine weitere Orientierungshilfe. Gute Überschriften sind auch als solche im HTML-Code (H1 – H7) ausgezeichnet: Das übernimmt jeder gute Webtext-Editor für Dich – nutze diese Funktion unbedingt.

 

M

> 64px oder 4em

N

Richtgröße für H1:
40px oder 2.5em

Zeilenabstand – gib den gebührenden Raum

Oft vernachlässigt wird der Zeilenabstand. Ist er zu gering, dann kann eine Seite ebenfalls schlecht gescannt werden. Ist er allerdings zu weit, dann verliert das Auge die Verbindung zur nächsten Zeile.

Mein Tipp: Wähle bei langen Zeilen und größeren Bildschirmen eher einen größeren Zeilenabstand. Er darf aber nicht größer sein als der Abstand zwischen zwei Absätzen.

M

100 %

N

140 – 170% der Schriftgröße

Zeilenlänge und Spaltenbreiten

Bei der Zeilenlänge kommt es auch darauf an, welche Schriftart und welche Schriftgröße verwendet wird.  Zu lange Zeilen sind aber grundsätzlich ungünstig für die Lesbarkeit. Es soll dem Auge leicht möglich sein, vom Ende einer Zeile zum Beginn der folgenden Zeile zu springen.

Zu kurze Zeilen können aber auch negativ sein, wenn ein Bereich in mehrere Spalten unterteilt ist. Die Texte drängen dann schier nach unten. Wenn die Spalten dann auch noch einen geringen Abstand zueinander haben, verschwimmen die Inhalte und die Leseführung geht verloren. Im nebenstehenden Testimonial-Beispiel wären entweder kürzere Kundenstatements oder eine horizontale Anordnung günstiger.

Mein Tipp: Je schmaler oder schlanker eine Schriftart ist, desto eher sind kürzere Zeilen angesagt. Bei Spalten ausreichend Zwischenraum geben, damit jeder Inhaltsblock für sich den Fokus erhalten kann.

besser lesbar mit besserer Textaufteilung

Bild 3:
Zu langer Text im Verhältnis zur Spaltenbreite

M

> 80 Zeichen

N

Richtgröße:
ca. 45 bis 80 Zeichen

Leichter lesbarere Textfarben

Der Zauberfaktor heißt hier Kontrast. In Printprodukten wird meistens schwarz auf weiß gedruckt: Dieser Kontrast ist am Monitor allerdings zu hoch. Die eine Möglichkeit ist es, z. B. aus der Schriftfarbe die Farbintensität zu mildern, also statt Schwarz z. b. ein dunkleres Grau einzusetzen.

Die andere Idee ist, den Hintergrund mit einer anderen Farbe zu unterlegen. Beides siehst Du hier gerade auf dieser Seite.

Ja, bunt ist die Welt, aber auf einer Webseite zu viele verschiedene Farben im Text einzusetzen, das verwirrt. Also bitte etwas Zurückhaltung: Denn es hat sich etabliert, Links in Fließtexten farbig zu markieren. Früher war es eher nur ein unterstrichenes Wort. Als Linkfarbe darf es gerne eine leuchtendere Farbe sein, um aus dem Text herauszustechen. Wenn Du also z. B. bereits farbige Überschriften bereits einsetzt, Links dazu noch farbig sind, dann sollte es mit Bunt im Text genügen.

Logisch dann: Wenn man gerne „Stolper- oder Scanwörter“ einsetzt, dann markiere diese nur fett sein und bleibe in der Farbe des Fließtextes.

Besser lesbar mit Kontrast

Bild 4:
Je stärker der Kontrast, desto härter die Trennung

Fazit

Alles, was ein leichteres, einfacheres Aufnehmen eines Textes unterstützt, solltest Du nutzen. Es macht Sinn, sich die Schriftarten, die eingesetzten Schriftgrößen- und Farben vorab zusammen zu stellen. Teste Ihre Wirkung und Lesefreundlichkeit aus.

Lege sie dann einmal in den generellen Stileinstellungen Deiner Website fest. Das schafft vertrauenserweckende Konsistenz. Und spart Dir Arbeit, weil Du Dich dann bei jedem neuen Text bequem daran bedienen kannst.

Hol Dir den Website-Fahrplan

Die Autorin

Elke Petersen-Rusch ist Webdesignerin seit über 20 Jahren. Unzähligen Unternehmen, Praxen und Vereinen hat sie zu lebendigen Internetpräsenzen verholfen. Das Verbinden von Technik und Design ist genau ihr Ding – im Gegensatz zu Technikgeschwurbel. Als badisches Urgewächs lebt sie mittlerweile im Naturpark Aukrug mitten in Schleswig-Holstein – und liebt sowohl Spätzle als auch Grünkohl.

Elke Petersen-Rusch - CEO webwirbel.de GmbH

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Website-Strategien, Tools und Tipps frei Haus gibt es über unseren Newsletter:

 

Unsere E-Mails erreichen Dich über den Anbieter Sendingblue. In den Datenschutzhinweisen erfährst Du mehr dazu. Nach Deiner Anmeldung erhältst Du 1 - 2 mal pro Monat meine besten Tipps für Deine Website - eine Abmeldung ist natürlich jederzeit mit einem Klick möglich!

Mehr Inspiration?
Willkommen in unserem Netzwerk!

Get in Touch

Web. Design. Online-Marketing.

webwirbel.de GmbH

Mo - Fr 9:00 - 17:00 Uhr

Kloster 10, 24613 Aukrug

Mail: beratung@webwirbel.de

Newsletter abonnieren

Der webwirbelige Newsletter

Beflügle Deine Website und erhalte ca. einmal monatlich Tipps und Infos rund um Webdesign, Website-Optimierung und OnlineMarketing.

Bitte mache Dich auch mit unseren Datenschutzhinweisen vertraut.

Fast geschafft: Bitte schließe Deine Anmeldung ab - wir haben Dir dazu eine Mail an Deine angegebene Mailadresse geschickt.