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 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.
Gestalte die Typographie auf deiner Website so, dass der User den Text gut lesen kann und nicht bloß scannt. Auf allen Endgeräten Desktop, Mobil und Tablet. Dann wird er zum Leser, zum Abonnenten, zum Käufer.
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:
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.
In 3 einfachen Schritten
zu deinem glasklaren WEBSITE-KONZEPT!
Abonniere meinen Newsletter für Website-Queens und du erhältst den Fahrplan für dein Konzept für 0 Euro.
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 Suchverhalten 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
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.
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.
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.
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?
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.
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.
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, lass uns einen Blick auf deine Website werfen: Im 1:1 Mini-Mentoring gibt’s konkrete Hinweise und viele Aha-Momente.
*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.
Diese Beiträge könnten dir auch gefallen:
Business-Websites, die verkaufen:
Mit klarem Design und genialem Content, der ins Hirn und Herz deiner Zielgruppe geht.
Damit du genau die Menschen anziehst, die zu dir passen.
© Frau König, 2024
Liebe Frau König,
leider werden die Beispiele zum Thema Kontrast und Pixelgrösse bei Schriften auf dieser Seite nicht abgebildet. Als ich ihren Blogartikel schon mal auf meinem Handy gelesen hatte, war das wunderbar der Fall. Lediglich der mangelnde Kontrast der gelben Schrift ist sichtbar.
Dennoch herzlichen Dank für die vielen Anregungen!
Hallo liebe Petra, vielen Dank für dein Feedback. Bei den Pixelgrößen stehen 4 Boxen mit Schriftgrößen von 14 bis 20 Pixel neben- und untereinander. Natürlich lässt sich ein Text in 14 px lesen, aber es geht um das entspannte und aufmerksame Lesen. Und dies ist bei 14 px nicht für einen kompletten Text gegeben. Auch beim Kontrast geht es darum, zu optimieren, damit es nicht anstrengend ist, auch einen längeren Text aufmerksam im Web lesen zu können.
Liebe Grüße
Silke
Vielen Dank für deinen ausführlichen Artikel, du, hast mir sehr geholfen 🙂
Wohoooo, das freut mich riesig, Andrea 🥳
Tolle Info auf Ihrer Website!!
bin gerade dabei eine neue Website zu machen und tue mich schwer.Einzig auf eine Farbe habe ich mich festgelegt.Terracotta ,statt rosa.
Und genau ihr Terracotta ton auf dem Beispiel mit den Kontrastschrift ist die Farbe die ich suche.Bislang habe ich sie nur aus Zeitschriften.
Können sie mir bitte die Farbe nennen für meine Webdesignerin, bitte bitte!
Sandra
Lieben Dank Alexandra,
wir nutzen im Browser Chrome eine Extension, um Farben von Websites zu extrahieren. In diesem Fall ist es diese hier: #b35959
Viel Spaß damit und liebe Grüße
Silke