8 Tipps wie du deine Schrift lesbarer machst und damit mehr Leser*innen gewinnst

06.11.2020 | Webdesign

“Lieber die hellgelbe Schrift auf grauem Hintergrund? Oder die blaue?”
“Und wie groß soll der Text sein?”
“Die Überschrift in Großbuchstaben?”

Schwirren so viele Fragen in deinem Kopf, wenn du deine Web-Texte veröffentlichen willst?

So geht es vielen.

Du weißt, dass Texte ansprechend aussehen müssen, damit sie gelesen werden.

Aber wie machst du das?

Darauf habe ich eine klare Antwort: Das Wichtigste ist, dass deine Texte gut lesbar sind. Das ist nutzerfreundlich und steigert deine Conversion-Rate.

Das ist dir zu unkonkret?

Ich habe dir 8 Tipps zusammengestellt, an die du dich halten solltest.

Bereit? Ok, los geht’s.


1. Deine Schrift sollte ohne Lupe lesbar sein

zu kleine Schrift mit Lupe durchgestrichen

Du denkst, das versteht sich von selbst?

Leider nicht. Immer wieder stoße ich auf Webseiten-Texte, die nur mit Omas Lupe lesbar sind. Die habe ich aber nie zur Hand. Es ist anstrengend, so kleine Texte zu lesen und ich tue es nur, wenn mich der Text brennend interessiert. Also selten.  

Du solltest davon ausgehen, dass deine Kund*innen Omas Lupe auch nicht neben sich liegen haben.  

Aber was ist groß genug?

Die Faustregel ist: 16px für Fließtext. Das ist auch die Standardgröße, die Browser verwenden, wenn keine Schriftgröße angegeben ist. Damit machst du nichts falsch. Auch ich verwende diese Schriftgröße für den Fließtext auf meiner Website.

Ich kenne Menschen, denen das zu groß ist. Sie nehmen 14px oder 15px für ihren Fließtext. Das ist noch in Ordnung, darunter solltest du aber nicht gehen.

Spiegel.de verwendet eine Schriftgröße von 20px.

Warum?

Ganz einfach: Längere Texte lassen sich am Bildschirm besser lesen, wenn die Schrift größer ist.

Wenn du einen Blog planst, solltest du deine Schrift lieber etwas größer wählen als zu klein.

Wem die Schrift zu klein ist, der kann sie doch einfach größer zoomen?

Ja, theoretisch schon. Aber viele Leute wissen nicht, dass das geht oder wie das geht. Also verlass dich nicht darauf.

Übrigens: Die tatsächliche Höhe von Schriftarten variiert. Es kann sein, dass du für deine Lieblingsschrift einen höheren Pixelwert benötigst, damit sie gleich groß empfunden wird wie eine andere Schrift.

Tipp zur Umsetzung auf deiner Website:

Wenn du deine Website anlegst, solltest du die Basis-Schriftgröße mit 16px definieren. Davon ausgehend gibst du die Schriftgrößen für Überschrift und Fließtext relativ in em, rem oder Prozent an. Du willst wissen wie das genau geht? Schau dir meinen Blogbeitrag zum Thema em, rem und px an.


2. Verwende genügend große Zeilenabstände

Damit deine Texte gut lesbar sind, ist der Zeilenabstand fast genauso wichtig wie die Schriftgröße.

Bei zu kleinem Abstand sinkt die Lesegeschwindigkeit, weil die Zeilen aneinanderkleben. Der Zeilenabstand sollte zwischen 1,3 und 2,0em liegen. Die Standard-Einstellung von Browsern liegt meist bei 1,2em. Du musst also selbst tätig werden.

Je kleiner die Schrift ist und je länger die Zeile, desto größer muss der Zeilenabstand sein.


3. Verwende starke Farbkontraste

gut lesbarer farbkontrast

Bekommst du beim Lesen auf manchen Webseiten auch Augenmigräne? Mittelgraue Schrift auf mittelblauem Hintergrund. Da hilft auch Omas Lupe nicht weiter. Der Kontrast ist so gering, dass die Augen beim Lesen schmerzen – Aua!

Als Leserin habe ich da keine Lust weiter zu lesen. Und weg bin ich.

Mach diesen Fehler nicht. Denn sei dir sicher, dass auch deine BesucherInnen flüchten, wenn sie deinen Text schwer lesen können – und schwupps, hast du weniger Conversions. Schlecht für dein Business! 

Bei Sonneneinstrahlung auf einem Handy ist der Farbkontrast besonders wichtig. Was auf dem Bildschirm deines PCs noch gut lesbar ist, kann dann so unlesbar sein wie Geheimschrift mit Zitrone auf Papier.

Du bist dir unsicher, ob der Kontrast deiner Schrift zum Hintergrund groß genug ist? Nutze einen Kontrast-Checker.

Dort gibst du die Farbwerte der Schrift und des Hintergrunds an. Anschließend erhältst du als Ergebnis, ob die Farben den Kontrast-Check bestanden haben oder nicht.

Übrigens: Falls du ein Hintergrundbild verwendest, gelten die Regeln genauso. Dunkle das Bild etwas ab, wenn es zu hell ist.


4. Die perfekte Zeilenlänge

gut lesbare Zeilenlänge

Eine Stellschraube, an der du drehen kannst, ist die Zeilenlänge.

Immer wieder sehe ich Webseiten-Texte, die über die gesamte Breite des Bildschirms gehen.

So lange Zeilen sind mühsam zu lesen. Der Weg zum Anfang der nächsten Zeile ist für das Auge zu weit. Und schwupps, springen die Leser*innen ab.

Ok, denkst du. Dann also so kurze Zeilen wie möglich?

Nein, nicht ganz. Zu kurze Zeilen unterbrechen den Lesefluss und sind ebenfalls schwer zu lesen.

Ideal ist eine Zeilenlänge von 45-80 Zeichen – das ist meine Faustformel. Wenn du im Internet danach googelst, wirst du auch andere Angaben finden. Diese werden aber in etwa im gleichen Bereich liegen.

Geh also nicht zu dogmatisch an die Zeilenlänge heran, aber sei dir ihrer Wichtigkeit bewusst. Mit der Zeit wirst du ein besseres Gespür dafür entwickeln.


5. Verwende Schrift in Großbuchstaben sparsam

Wir sind nicht daran gewöhnt, Texte in Großbuchstaben zu lesen.

DARUM SIND SOLCHE TEXTE SCHWERER FÜR UNS LESBAR.

Allerdings ist das nur eine Frage der Gewöhnung. Es gibt Studien, bei denen die Testpersonen solche Texte bereits nach einem kurzen Training genauso schnell lesen konnten wie normal gesetzten Text.

Allerdings haben deine Leser*innen ein solches Training wahrscheinlich nicht absolviert. Du solltest längere Texte in Großbuchstaben daher vermeiden. Für Überschriften, Menüeinträge und Buttons sind sie nicht ideal, aber vertretbar.


6. Verwende niemals Blocksatz und selten zentriert

Du solltest Web-Texte niemals im Blocksatz anordnen. Auch nicht, weil Blocksatz in Büchern Standard ist und du denkst, dass das dann auch für Webseiten gelten müsste.

Was ist der Unterschied?

Bei der Produktion von Büchern weiß man wie der Text hinterher aussehen wird, denn die Abstände und Trennungen können optimal gesetzt werden. Bei Web-Texten weißt du nicht wie groß der Bildschirm deiner Leser*innen ist. Dadurch können unschöne Abstände entstehen und der Text lässt sich schwer lesen.

Auf vielen Webseiten sehe ich zentriert gesetzten Text. Das ist ok, wenn der Text kurz ist. Aber je länger der Text ist, desto schwieriger lässt er sich lesen. Der linke Rand ist unregelmäßig. Die Augen müssen den Zeilenanfang bei jedem Zeilensprung neu suchen. Das ist mühselig.

Also merken: Zweizeilige oder dekorative Texte kannst du zentrieren.

Setze längere Texte, die gelesen werden sollen, linksbündig.


7. Mach die Schrift barrierefrei

Mach es Altersfehlsichtigen, Legasthenikern und Farbblinden leichter, deine Texte zu lesen.

Wenn du prüfen willst, ob deine Webseite auch für farbblinde Menschen zugänglich ist, nutze Tools wie z.B. den Color Blindness Simulator von Coblis.

Altersfehlsichtige stellen in ihrem Browser vielleicht von vorneherein eine größere Schrift ein. Damit sie deine Website dann tatsächlich größer sehen, solltest du deine Schriftgrößen relativ in em, rem oder Prozent angeben.  Wenn du die Werte in px angibst, skaliert der Text nicht automatisch. Die Leute müssen dann zoomen. Das ist nervig. Vielleicht wissen sie auch gar nicht wie das geht.

Ich habe einen extra Blogbeitrag geschrieben, wenn du wissen willst, wie du deine Schrift in em oder rem definierst.

Wenn du die vorangegangenen Tipps beherzigst, machst du es Legasthenikern bereits einfacher, deine Texte zu lesen. Zusätzlich hilfst du ihnen, wenn du eine Schriftart verwendest, bei denen die Ober- und Unterlängen klar deutlich sind. D.h. die Striche beim h gehen weit nach oben, die Striche beim p deutlich nach unten.
By the way, es gibt sogar Schriften, die extra für Legastheniker entwickelt wurden.


8. Mythos widerlegt: Serifen sind genauso gut lesbar wie serifenlose Schriften

Das Gerücht, serifenlose Schrift wäre am Bildschirm leichter lesbar als solche mit Serifen, hält sich so hartnäckig wie Kaugummi unter dem Schultisch. Ich habe es auch 20 Jahre lang geglaubt!

Tatsächlich gibt es keinerlei Studien, die diesen Mythos belegen. Du glaubst mir nicht? Dann lies mal hier: bnfr.de/ux020

Nur bei zu geringer Schriftgröße führen die Serifen dazu, dass die Buchstaben schwerer lesbar sind.

Ok, jetzt haben wir diesen Mythos widerlegt. Du kannst dich endlich trauen auch eine Serifenschrift für dein Unternehmen zu verwenden, wenn diese zu dir passt.


Juhu! Jetzt weißt du Bescheid über gute Web-Typographie und wirst viele Fehler nicht mehr machen. Ich wünsche dir viel Erfolg dabei!

Solltest du Hilfe benötigen, wende dich gerne an mich.

– Über mich –

Sylvia Klatt Autor

Hi, ich bin Sylvia Klatt, Webdesignerin und WordPress-Expertin. Hier blogge ich über WordPress und Divi.

Erfahre mehr über mich…

– Divi-Workshop –

Lerne zeitsparende Divi-Techniken in unserem Kurz-Workshop!

-> Klick hier für mehr Infos zum Workshop

– Meine Empfehlung* –

Affiliate Link Raidboxes

Ich empfehle Raidboxes aus voller Überzeugung: schnelle Ladezeiten, klimapositiv, super Support, auf WordPress spezialisert.
*Dies ist ein Affliate Link, d.h. ich bekomme eine Provision, wenn du auf diesen Link klickst und Raidboxes buchst. Dir entstehen dadurch keine zusätzlichen Kosten.

Diese Blogbeiträge könnten dich auch interessieren:

In 7 Schritten zu deiner erfolgreichen Website

In 7 Schritten zu deiner erfolgreichen Website

Eine Website zu erstellen, ist ähnlich wie ein Hausbau. Du kannst die Wände irgendwohin setzen. Ist dann halt blöd, wenn die Wand zwischen Bad und Schlafzimmer fehlt oder der Architekt die Öffnung für die Haustür vergisst. Eine Website zu bauen, ist ganz ähnlich. Eine...

Stockfotos – ja oder nein? Über die Vorteile und Nachteile.

Stockfotos – ja oder nein? Über die Vorteile und Nachteile.

Der Text für die Website ist fertig, aber die Fotos fehlen - und du fragst dich, welche du am besten nehmen solltest? Lieber das hübsche Stockfoto mit dem Schreibtisch, den Blumen und dem Mac-Book drauf? Oder das mit den lachenden Menschen? So wie du stellen sich...