So verbesserst du die Lesbarkeit deiner Website-Texte

Über gute und schlechte typographische Gestaltung.

Texte spielen auf deiner Website die Hauptrolle. Der Inhalt, was du schreibst, ist dabei genauso wichtig wie die Gestaltung des Textes auf deiner Website. Die Typographie als Teil des Webdesigns sorgt für den ersten Eindruck. Und damit dafür, ob der User bleibt (und liest, abonniert und kauft) oder ob er wegklickt. Erfahre, wie du als Nicht-Designer die Lesbarkeit deiner Texte verbesserst.

Die Aufmerksamkeit des durchschnittlichen Website-Besuchers gleicht einem Toastbrot. Sorry, aber so ist es leider. Deshalb hast du nur wenige Sekunden, den User auf deiner Seite davon zu überzeugen, dass er bei dir das findet, was er gesucht hat.

Bleibt der User auf deiner Website, beginnt er zu scannen. Er überfliegt deine Seiten und Beitrage nach einer für ihn relevanten Überschrift, nach dem Absatz, der sein Problem löst. Er ist auf der Suche nach dieser einen Info. Das kann ein einzelner Satz sein.

Hat der User gefunden, wonach er gesucht hat, wird er zum Leser.

Mach es deinem User also besonders leicht, deine Inhalte zu erfassen. Auf allen Endgeräten Desktop, Mobil und Tablet. Dann wird er zum Leser. Oder zum Käufer.

Gestalte die Typographie auf deiner Website so, dass der User zum Leser wird – und bei deinen Texten und Beiträgen bis zum Schluss dabei bleibt.

Typographie auf der Website: So verbesserst du die Lesbarkeit deiner Texte.

Verbessere die Lesbarkeit deiner Website-Texte durch deine Schriften

In der Regel wählst du zwei Schriften: eine für deine Überschriften und besonders hervorzuhebende Wörter oder Textelemente und eine für deinen Fließtext.

Der Klassiker auf Websites ist die Kombination von einer markanten Serifen-Schrift mit einer nüchternen und klaren serifenlosen Schrift.

Trendy als Akzentschriften sind verschnörkelte Handschriften. Aber Achtung: Verwende diese nur bei besonders hervorzuhebenden Wörtern oder kurzen Phrasen. Warum, erfährst du weiter unten.

Wichtig ist, dass sich deine Schriften nicht zu ähnlich sind, sondern sich gut ergänzen. Sie müssen natürlich zu deinem Thema und deinem Branding passen und sich stimmig in dein Webdesign einfügen.

Schriften für deine Website oder deine Social Media-Posts findest du auf diesen Seiten:

fonts.google.com

dafont.com

fontsquirrel.com

elements.envato.com*

www.creativefabrica.com*

Wenn es dir schwer fällt, zwei Schriftarten auszuwählen, kannst du auch nur eine einzige Schrift mit verschiedenen Schriftschnitten (light, bold, italic, condensed, etc.) nutzen.

create & launch

WordPress für Starterinnen

Erstelle Dir in 4 Wochen Deine Website 
und mache aus Usern Kunden.

Gestalte mit deinen Schriften Hierarchien

Untersuchungen zeigen, dass wir Internet-Nutzer weniger als 20% einer Website lesen. Und vielleicht kennst du das von dir selbst auch: Du kommst auf eine Website und orientierst dich dort zunächst anhand der Überschriften.

Mache dir das Sachverhalten des Users zunutze und lenke ihn gezielt zu deinen wichtigen Inhalten.

Diese Zeile liest du danach.

Zuerst liest du diese Überschrift.

Und zum Schluss das hier.

Wenn du dich nicht entscheiden kannst, musst du nicht krampfhaft nach zwei Schriften suchen.

Suche dir stattdessen eine Schriftfamilie, sorge mit den unterschiedlichen Schriftgrößen, Schriftschnitten und Strukturelementen für Orientierung:

Das ist eindeutig die Überschrift.

Mit deinen unterschiedlichen Schriftstärken sorgst du für Struktur.

Und so findet sich dein Website-Besucher gut bei dir zurecht und wird

  1. regelmäßiger Leser
  2. Abonnent
  3. Käufer

Wichtig ist: Wenn alles hervorgehoben (bold) ist, ist nichts hervorgehoben.

Dies ist der Titel.
Das hier ist die Einleitung, der Teaser.
Hier beginnt der Fließtext.

So verbesserst du die Lesbarkeit deiner Website-Texte durch die Größe des Fließtextes und den Zeilenabstand.

Wir sind uns einig darüber, dass Überschriften hervorstechen müssen. Sie tun dies in der Regel durch die Schriftart- und -größe.

Wenn deine Überschriften die Kür sind, ist der Fließtext auf deiner Website die Pflicht. Hier findet dein Website-Besucher die für ihn relevanten Infos.

Sorge also dafür, dass er deinen Text vernünftig auf allen Endgeräten lesen kann. Hier siehst du den Unterschied:

Diese Schrift hat 14 px.

Diese Schrift hat 16 px.

Diese Schrift hat 18 px.

Diese Schrift hat 20 px.

Welche Schrift ist für dich am besten lesbar? Wie ist es am großen Monitor und wie am Handy?

Für eine gute Lesbarkeit ist der Zeilenabstand ebenfalls wichtig. Hierbei gilt die Regel: Je größer die Schrift, desto größer der Zeilenabstand. 

Bei einer Schrift von 14 px reicht ein Zeilenabstand von 1,3 px aus. Aber wir haben ja festgestellt, dass der Text in dieser Größe sowieso nicht gut lesbar ist. Ich wollte dir dieses Beispiel aber nicht vorenthalten.

Die Schrift mit 16 px kommt mit einem Zeilenabstand von 1,4 px gut aus. Aber findest du die Schrift nicht auch noch zu klein, um einen längeren Text aufmerksam zu lesen?

Die 18 px große Schrift benötigt einen größeren Zeilenabstand. Mit 1,5 px kann man den Text gut lesen.

Bei dem Beispiel mit 20 px ist ein Zeilenabstand von 1,6 px optimal.

Setze für eine gute Lesbarkeit deiner Website-Texte auf Farb-Kontraste

Damit deine Website-Texte gut gelesen werden können, müssen sie sich optimal vom Hintergrund abheben. Gerade bei farbigen oder Foto-Hintergründen kann es wichtig werden, deine reguläre Schriftfarbe anzupassen. 

Hier sind einige Beispiele:

Beim Kontrast geht es einzig und allein um die Lesbarkeit.
Überprüfe unbedingt, ob du diesen Fließtext auch aus ein wenig Entfernung noch gut lesen kannst.

Beim Kontrast geht es einzig und allein um die Lesbarkeit.
Überprüfe unbedingt, ob du diesen Fließtext auch aus ein wenig Entfernung noch gut lesen kannst.

Beim Kontrast geht es einzig und allein um die Lesbarkeit.
Überprüfe unbedingt, ob du diesen Fließtext auch aus ein wenig Entfernung noch gut lesen kannst.

Beim Kontrast geht es einzig und allein um die Lesbarkeit.
Überprüfe unbedingt, ob du diesen Fließtext auch aus ein wenig Entfernung noch gut lesen kannst.

Beim Kontrast geht es einzig und allein um die Lesbarkeit.
Überprüfe unbedingt, ob du diesen Fließtext auch aus ein wenig Entfernung noch gut lesen kannst.

Beim Kontrast geht es einzig und allein um die Lesbarkeit.
Überprüfe unbedingt, ob du diesen Fließtext auch aus ein wenig Entfernung noch gut lesen kannst.

Und wie oft siehst du auf Websites eigentlich Links in einer wirklich ungünstigen Schriftfarbe?

Natürlich kannst du wichtige Textstellen mit einer anderen Textfarbe hervorheben. Werde aber hier nicht zu bunt. Wähle neben deiner definierten Grundfarbe eine Akzentfarbe, mit der du entweder die Schrift selbst färbst oder aber den Hintergrund des Textes hervorhebst.

Gib deinem Text Freiraum – dann ist er besser lesbar

Für eine gute Schriftgestaltung solltest du deinen Texten Raum geben, leeren Raum.

Achte darauf, dass oberhalb und unterhalb von Überschriften, Slogans, Verkaufstexten mindestens 30 px frei bleiben.

Hast du deinen Text farbig oder mit einem Bild unterlegt, solltest du diesen Freiraum weiter erhöhen. Dann hängt der Text nicht zu nah an der Farbkante und sieht gleich wertiger aus.

Noch wichtiger ist aber der Raum rechts und links vom Text.

Sieh mal in der Tageszeitung oder in Zeitschriften nach. Dort verläuft Text nie über die gesamte Seitenbreite. In Printmedien wird Text in Spalten gesetzt. So ist er lesbar.

In Print und Web gilt die Regel: Text mit 8 bis 12 Wörtern pro Zeile ist optimal zu erfassen. 

Selbst wenn dein Webdesign auf die volle Monitorbreite ausgerichtet ist, solltest du für deinen Text eine Breite von maximal 750 px definieren.

Wie gesagt: Auf Websites lesen wir anders. Wir alle sind Toastbrot. 

Wenn dein Text über fast die gesamte Seitenbreite verläuft,  ist das eine massive Wand. Eine Textwand, die den Lesefluss des Users, der ja eigentlich nur scannt, schnell erschlagen kann.

Bei mir selbst habe ich Folgendes schon oft beobachtet:

Ich beginne zu lesen. Schon beim zweiten Satz merke ich, wie sich mein Gehirn ausschaltet. Ich scrolle dann nur noch. Dann erscheinen tolle Fotos. Ich scrolle weiter bis ich am Ende der Seite ankomme. Was in dem Text nach dem zweiten Satz steht, kann ich nicht mehr aufnehmen. Und erst recht nicht verarbeiten. 

Wenn dein Text rund zehn Wörter pro Zeile und oben,
unten, rechts und links Freiraum hat, kann dein Website-
Besucher ihn sehr viel besser lesen.

Ungefähr so wirkt ein Text, der auf voller Seitenbreite links und rechts lediglich 20 px Rand erhalten hat:

Versuche jetzt einmal diesen Text, der nahezu über die gesamte Monitorbreite verläuft, entspannt zu lesen und am Ende dieses superlangen Satzes (auch das noch!) noch bei der Stange zu bleiben und zu wissen, worum es eigentlich geht. Hinzu kommt, dass dieser Text in einer womöglich auch noch viel zu kleinen Schrift mit einem zu geringen Zeilenabstand gestaltet ist, was noch weitere Minuspunkte bei deiner Aufmerksamkeit mit sich bringt. Die Frage ist, wie lange schaffst du es, am Ball zu bleiben?

Positiv ist, dass in der mobilen Darstellung die Seitenbreite begrenzt ist. Achte aber bei der Schriftgestaltung für Smartphone und Tablet darauf, dass dein Text nicht links und rechts an den Seitenrändern hängt, sondern definiere auch hier einige Pixel Abstand.

Lass uns zum Schluss einmal die trendigen Hand- oder Caligraphieschriften anschauen

Vorneweg muss ich dir sagen, dass ich geschwungen Schriften à la Bellwethers, Cattclay (Laura Seiler nutzt diese Schrift) oder Hello Sunday wirklich toll finde.

Auf einer früheren Version meiner Website hatte ich mit der Schrift Passengers Scripts Highlights im Text gesetzt. 

Wenn du eine Schnörkelschrift sparsam einsetzt, kannst du tolle Effekte damit erzielen. Du solltest aber unbedingt vermeiden, sie als Überschrift oder zum Hervorheben ganzer Sätze zu nutzen. Denn dann sieht das so aus:

Nutze verspielte Schnörkel- oder Caligraphieschriften nur sehr sparsam, denn sonst findet das entspannte Lesevergnügen auf deiner Website schnell ein Ende.

Wie du siehst, kannst du mit wenigen Tricks die Aufmerksamkeit deines Users unterstützen. 

Wenn du dir nicht sicher bist, ob deine Website optimal in Sachen Nutzerfreundlichkeit aufgestellt ist, mach den Website-Check>> und erfahre, wo und wie du aus dem Scanner einen Leser, aus dem Leser einen Abonnenten oder Käufer machst.

Typographie: So verbesserst du die Lesbarkeit deiner Website-Texte

*Die gekennzeichneten Links sind Affiliate-Links.
Wenn du über einen Link etwas kaufst oder ein Abo abschließt, erhalte ich eine kleine Provision. Am Preis für dich ändert sich nichts.
Ich empfehle grundsätzlich nur Tools, die ich selbst nutze und von denen ich absolut überzeugt bin.

Schreibe einen Kommentar

Diese Beiträge könnten dir auch gefallen:

Menü schließen
Website mit Plan Workbook für dein Online-Business

Sichere Dir jetzt dein kostenloses Workbook Website mit Plan und erfahre, 
wie du deine Website Schritt für Schritt aufbaust und ein Business daraus machst.

Sichere Dir jetzt mein kostenloses Workbook Website mit Plan und erfahre, wie du deine Website Schritt für Schritt aufbaust und ein Business daraus machst.

Mit diesem Eintrag erhältst du in wenigen Minuten gratis per E-Mail Zugang zu meinem kostenlosen Workbook. Aufgrund des Wertes dieses Workbooks werde ich dich auch in meine Newsletter-Liste aufnehmen und dich weiterhin mit tollem Content und hilfreichen Produkten versorgen. Mehr zum Newsletterversand findest du in der Datenschutzerklärung.