Lesbare Typografie im Web: Zeilenlänge, Schriftgröße und Zeilenabstand richtig wählen

Wir von Talha Aslan und Team sehen in Webprojekten oft, dass der Text als letzter Schritt kommt. Dabei kommen die meisten Besucher wegen einer Information, nicht wegen eines Titelbildes. Deshalb entscheidet die Gestaltung des Textes darüber, ob Ihre Botschaft wirklich ankommt.

Deshalb gehen wir in diesem Leitfaden vier Grundeinstellungen nacheinander durch. Zu jeder nennen wir Startwerte aus offiziellen Quellen, einfache Prüfwege und die Fehler, die wir am häufigsten beheben. Die Wahl der Schriftart ist ein eigenes Thema; dazu finden Sie unseren Leitfaden Web Typografie: die passende Schrift wählen. Hier geht es darum, wie Sie die gewählte Schrift auf der Seite bemessen.

Welche vier Einstellungen bestimmen lesbare Typografie?

In der Praxis entscheiden vier Einstellungen darüber, ob sich ein Text angenehm liest. Zusammen bilden sie lesbare Typografie, denn sie hängen voneinander ab. Wenn Sie also eine davon ändern, sollten Sie die anderen ebenfalls prüfen. Zum Beispiel passen bei größerer Schrift weniger Zeichen in denselben Kasten, und somit ändert sich auch die Zeilenlänge.

• Zeilenlänge: die Anzahl der Zeichen pro Zeile. Bei sehr langen Zeilen verliert das Auge den Anfang der nächsten Zeile.
• Grundschriftgröße: die Größe des Fließtextes in Pixel oder rem. Kleine Schrift zwingt mobile Leser zum Zoomen.
• Zeilenabstand: der vertikale Raum zwischen den Zeilen. Enge Zeilen machen aus einem Absatz einen grauen Block.
• Kontrast: der Helligkeitsunterschied zwischen Schrift und Hintergrund. Hellgraue Schrift wirkt elegant, ermüdet aber auf den meisten Bildschirmen das Auge.

Außerdem spielen Absatzabstand, Ausrichtung und Überschriftenhierarchie eine Rolle. Allerdings lassen sich diese drei viel leichter lösen, sobald die vier Grundwerte stimmen. Deshalb empfehlen wir, zuerst die Grundwerte festzulegen und dann die Feinarbeit anzugehen.

Wie lang sollte eine Zeile im Fließtext sein?

Eine offizielle Obergrenze liefert WCAG, die Barrierefreiheitsrichtlinie des W3C. Das Erfolgskriterium 1.4.8 Visuelle Darstellung der Stufe AAA verlangt, dass Zeilen höchstens 80 Zeichen lang sind. Für chinesische, japanische und koreanische Schrift liegt die Grenze bei 40. Da es sich um ein Kriterium der Stufe AAA handelt, bindet es nicht jede Website. Es liefert aber eine solide Obergrenze.

In der Typografie nennt man häufig einen Bereich von etwa 45 bis 75 Zeichen pro Zeile. Sehen Sie das als Startbereich aus der Praxis, nicht als feste Regel. Deutsche Wörter fallen durch Komposita oft lang aus. Daher zielen wir im Fließtext meist auf 60 bis 75 Zeichen am Desktop.

Zu kurze Zeilen bereiten allerdings ebenfalls Probleme. Das Auge springt ständig zurück an den linken Rand, und der Text liest sich abgehackt. Das Ziel ist also nicht die kürzeste Zeile. Gesucht ist eine mittlere Breite, der das Auge bequem folgen kann.

Dann hilft ein schneller Test: Kopieren Sie am Desktop eine durchschnittliche Zeile Ihres Artikels und zählen Sie die Zeichen. Kommen Sie mit Leerzeichen auf 90 oder 100 Zeichen, ist Ihr Textcontainer vermutlich zu breit.

Wie begrenzen Sie die Zeilenlänge mit CSS?

Am praktischsten ist eine zeichenbasierte Maximalbreite für den Textcontainer. Die CSS Einheit ch entspricht der Breite der Ziffer Null in Ihrer aktuellen Schrift. Geben Sie dem Fließtext also eine Maximalbreite von etwa 65 bis 70 ch, bleibt die Zeilenlänge unabhängig von der Schriftart in einem vernünftigen Bereich.

Der Vorteil für lesbare Typografie: Der Container wächst mit der Schriftgröße mit. Bei einer festen Breite in Pixel passen bei größerer Schrift weniger Zeichen in eine Zeile. Mit ch bleibt das Verhältnis dagegen stabil.

In der Umsetzung sollten Sie auf einige Punkte achten:

• Setzen Sie die Maximalbreite nur für den Fließtext; Tabellen, Bilder und Codebereiche dürfen breiter sein.
• Zentrieren Sie die Textspalte oder richten Sie sie links aus, vermeiden Sie aber ungleiche Leerflächen.
• Bei Vorlagen mit Seitenleiste zählt zudem die Breite der Hauptspalte.
• Auf breiten Bildschirmen sollten Absätze nie die volle Breite einnehmen; gleichen Sie den Raum stattdessen mit Bildern oder einem Infokasten aus.

Nutzen Sie ein fertiges Theme, finden Sie die Inhaltsbreite meist in den Themeoptionen oder in den globalen Stilen des Blockeditors. Die Bezeichnungen unterscheiden sich je nach Theme. Suchen Sie daher im Adminbereich nach dem passenden Abschnitt.

Welche Grundschriftgröße braucht der Fließtext?

Gängige Browser liefern als Standard eine Schriftgröße von 16 Pixel für den Fließtext. Diesen Wert sehen wir daher als Untergrenze. Bei langen Artikeln und Ratgebern liest sich ein Wert zwischen 17 und 18 Pixel oft angenehmer. Auch das ist ein Startbereich, denn die Mittellänge Ihrer Schrift verändert das Ergebnis.

Konkret beschreibt die Mittellänge, wie hoch die Kleinbuchstaben im Vergleich zu den Großbuchstaben stehen. Manche Schriften wirken schon bei 16 Pixel groß, andere bei gleicher Größe eher klein. Deshalb empfehlen wir, nicht nach der Zahl allein zu entscheiden, sondern nach der echten Darstellung auf einem echten Bildschirm.

Kleine Schrift taucht vor allem an bestimmten Stellen auf: Produktbeschreibungen, Formularbeschriftungen, Footer, Preishinweise und Cookiebanner. Diese Bereiche wirken nebensächlich. Trotzdem schauen Leser genau dort hin, wenn sie eine Entscheidung treffen. Steht zum Beispiel eine Lieferbedingung in 12 Pixel und Hellgrau, übersieht der Leser sie leicht und ist später überrascht.

Für Überschriften gibt es keine einzig richtige Größe. Zwischen H1, H2 und H3 braucht es allerdings einen sichtbaren Größensprung. Wirken Überschriften und Fließtext fast gleich groß, liest sich die Seite wie eine flache Textwand.

Pixel oder rem: welche Einheit eignet sich für die Schriftgröße?

Für den Fließtext empfehlen wir die Einheit rem. Sie bezieht ihren Wert aus der Schriftgröße des Wurzelelements. Erhöht ein Nutzer in den Browsereinstellungen die Standardschriftgröße, folgen Werte in rem dieser Vorgabe. Feste Pixelwerte ignorieren sie dagegen in manchen Browsern.

Dieser Unterschied zählt vor allem für Menschen mit Sehschwäche und für ältere Leser. Denn viele von ihnen zoomen nicht jede Website einzeln. Stattdessen erhöhen sie einmal die globale Schriftgröße im Browser. Ein Theme, das die Wurzelgröße in Pixel festschreibt, hebt diese Wahl stillschweigend auf.

Außerdem sind fließende Schriftgrößen eine nützliche Technik. Die CSS Funktion clamp lässt die Schriftgröße zwischen einem Minimum und einem Maximum mit der Bildschirmbreite wachsen. So erhalten Sie am Handy Fließtext nahe 16 Pixel und am breiten Bildschirm nahe 18 Pixel. Legen Sie das Minimum trotzdem in rem fest, sonst verhält sich der Zoom womöglich unerwartet.

Kurz gesagt: Die Wahl der Einheit ist unsichtbar, wirkt aber stark. Im Designentwurf stehen Pixelwerte, und das ist in Ordnung. Die Umrechnung in rem gehört dann zur Aufgabe des Entwicklungsteams.

Wie groß sollte der Zeilenabstand sein?

Wir empfehlen für den Fließtext einen Zeilenabstand von mindestens dem 1,5 fachen der Schriftgröße. Auch die MDN Referenz zur Zeilenhöhe nennt für Hauptabsätze einen Mindestwert von 1,5. Laut MDN hilft das Menschen mit Sehschwäche und Menschen mit kognitiven Einschränkungen wie Legasthenie.

Dieselbe Seite erklärt zudem, dass eine einheitenlose Zahl in den meisten Fällen der bevorzugte Weg ist. Der Browser multipliziert einen einheitenlosen Wert mit der eigenen Schriftgröße jedes Elements. Ein Wert in Pixel oder em entsteht dagegen nur einmal und geht als feste Länge an die Kindelemente. Bei großen Überschriften überlappen sich dann unter Umständen die Zeilen.

WCAG 2.2 ergänzt einen anderen Blickwinkel mit dem Kriterium 1.4.12 Textabstand der Stufe AA. Es verlangt, dass keine Inhalte und Funktionen verloren gehen, wenn ein Nutzer den Zeilenabstand auf das 1,5 fache der Schriftgröße erhöht. Es zwingt Sie also nicht zu diesem Wert. Stattdessen erwartet es, dass Ihre Website ihn aushält.

Überschriften vertragen einen engeren Zeilenabstand, weil sie kurz und groß sind. Auch das bleibt lesbare Typografie. Bei längeren Zeilen hilft dagegen etwas mehr Abstand, damit das Auge die nächste Zeile findet.

Warum zählen auch Absatz, Buchstaben und Wortabstand?

WCAG 1.4.12 prüft vier Werte gemeinsam, nicht nur den Zeilenabstand. Wendet ein Nutzer diese Werte mit einer Stilerweiterung an, darf Text weder abgeschnitten werden noch überlappen. Zudem müssen Schaltflächen weiter funktionieren.

• Zeilenabstand: mindestens das 1,5 fache der Schriftgröße.
• Abstand nach Absätzen: mindestens das Doppelte der Schriftgröße.
• Buchstabenabstand: mindestens das 0,12 fache der Schriftgröße.
• Wortabstand: mindestens das 0,16 fache der Schriftgröße.

Am häufigsten scheitern in diesem Test Kästen mit fester Höhe. Eine Karte mit einer in Pixel festgelegten Höhe versteckt zum Beispiel den überstehenden Text, sobald die Abstände wachsen. Menüpunkte, Reiterbeschriftungen und Preiskarten tragen dasselbe Risiko. Daher sollten Kästen mit Text mit ihrem Inhalt wachsen dürfen, statt eine feste Höhe zu bekommen.

Deutlicher Raum zwischen Absätzen erleichtert außerdem das Überfliegen. Der Absatzabstand sollte klar größer wirken als der Zeilenabstand. Sonst sieht der Leser nicht, wo ein neuer Gedanke beginnt. Das Kriterium 1.4.8 der Stufe AAA verlangt ebenso einen Absatzabstand von mindestens dem 1,5 fachen des Zeilenabstands.

Welches Kontrastverhältnis sollte Text erreichen?

Das Kriterium 1.4.3 Kontrast (Minimum) der Stufe AA in WCAG 2.2 verlangt für normalen Text ein Kontrastverhältnis von mindestens 4,5:1 und für großen Text mindestens 3:1. Als groß gilt Text ab 18 Punkt oder fett ab 14 Punkt. Das Kriterium übersetzt das in CSS mit etwa 24 Pixel und 18,5 Pixel.

Zudem sind die Verhältnisse strikte Schwellen ohne Rundung. Ein Farbpaar mit 4,49:1 erfüllt die Anforderung von 4,5:1 also nicht. Folglich kann ein Grau, das dem Designer dunkel genug erscheint, die Messung trotzdem verfehlen.

Deshalb messen wir jedes Farbpaar schon im Entwurf mit unserem Kontrastrechner. Vor allem diese Bereiche sollten Sie nicht auslassen: Text auf Bildern, Links in Markenfarbe auf hellem Grund, gedämpfter Text, den Leser trotzdem lesen müssen, und Platzhalter in Formularen.

Die Rolle des Kontrasts im gesamten visuellen Design beschreibt unser Beitrag Kontrast im Webdesign ausführlicher. Hier geht es nur um die Lesbarkeit des Textes.

Welche Startwerte eignen sich für die Grundeinstellungen?

Die folgende Tabelle fasst die Startwerte zusammen, die wir für Fließtext nutzen, samt ihrer Grundlage. Werte aus offiziellen Kriterien nennen die Quelle. Werte aus der Praxis tragen den Hinweis Startbereich.

Nutzen Sie die Tabelle also als sichere Basis für einen ersten Entwurf, nicht als Regelbuch. Danach folgt die Feinarbeit mit echten Inhalten auf echten Geräten.

Wie verändert sich lesbare Typografie auf dem Handy?

Lesbare Typografie auf dem Handy ist keine verkleinerte Kopie der Desktopregeln. Handybildschirme erzeugen ohnehin kurze Zeilen, deshalb kehrt sich das Problem der Zeilenlänge oft um. Die Zeilen werden zu kurz und tragen nur zwei oder drei Wörter. In diesem Fall hilft es mehr, den seitlichen Innenabstand zu verringern, als die Schrift zu verkleinern.

Wir empfehlen, den mobilen Fließtext bei 16 Pixel oder darüber zu halten. Zudem zoomen manche mobilen Browser die Seite automatisch heran, wenn jemand in ein Formularfeld mit kleiner Schrift tippt. Formularfelder um 16 Pixel verhindern diesen Sprung meist.

Prüfen Sie auf dem Handy außerdem diese Punkte:

• Absätze sollten vier oder fünf Zeilen nicht überschreiten, weil kurze Absätze sich am Handy leichter überfliegen lassen.
• Tabellen sollten seitlich scrollen oder sich in Karten verwandeln.
• Eine fixierte Kopfzeile und eine Leiste unten dürfen nicht die halbe Lesefläche verdecken.
• Bei Seiten, die Menschen draußen öffnen, sollte der Kontrast deutlich über dem Minimum liegen.

Wie sich eine Seite am Handy schlägt, zeigt Ihnen unser Test zur Mobilfreundlichkeit. Den gesamten Gestaltungsansatz erklärt unser Beitrag Was ist Mobile First Design.

Wie führen Sie den Test mit 200 Prozent Vergrößerung durch?

Das Kriterium 1.4.4 Textgröße ändern der Stufe AA in WCAG 2.2 verlangt, dass sich Text ohne assistive Technik auf 200 Prozent vergrößern lässt, ohne dass Inhalte oder Funktionen verloren gehen. Dieser Test zeigt, ob Ihre Wahl bei Schriftgröße und Einheit wirklich trägt.

Wir empfehlen diese Reihenfolge:

1. Öffnen Sie die Seite in einem Desktopbrowser in normaler Größe und notieren Sie die wichtigsten Elemente.
2. Stellen Sie den Browserzoom auf 200 Prozent.
3. Prüfen Sie, ob sich das Menü öffnet, kein Text abgeschnitten ist und Schaltflächen klickbar bleiben.
4. Testen Sie danach die Browsereinstellung, die nur den Text vergrößert, und wiederholen Sie die Prüfung.
5. Füllen Sie die Formulare aus und achten Sie darauf, ob Beschriftungen die Felder überdecken.
6. Halten Sie jedes Problem mit Seitenname und Bildschirmfoto in einer Liste fest.

Nach unserer Erfahrung betreffen die häufigsten Fehler hier Kopfbereiche mit fester Höhe und Text auf Bildern. Breite Inhaltskästen mit horizontalem Scrollen erschweren das Lesen bei starkem Zoom ebenfalls. Somit entdecken Sie mit wenigen Minuten Test viele Probleme, die sonst als Beschwerde zurückkämen.

Warum erschwert Blocksatz das Lesen?

Blocksatz dehnt die Wortabstände, um jede Zeile an beide Ränder zu bringen. Im Druck gleichen Silbentrennung und feine Abstandssteuerung diese Lücken aus. Im Web sind diese Mittel allerdings begrenzt. Das Ergebnis sind ungleiche Abstände und ermüdende weiße Gassen, die durch den Absatz laufen.

Auch das Kriterium 1.4.8 der Stufe AAA verlangt, dass Text nicht gleichzeitig am linken und rechten Rand ausgerichtet ist. Lange deutsche Komposita verschärfen das Problem. Passt ein langes Wort nicht mehr in die Zeile, reißen die Lücken der vorherigen Zeile plötzlich auf. Deshalb gilt für uns linksbündiger Fließtext als Standard.

Zentrierter Text hat zudem ein ähnliches Problem. Lesbare Typografie erlaubt allerdings Ausnahmen: Ein kurzer Slogan oder eine zweizeilige Überschrift darf zentriert stehen. In einem zentrierten Absatz mit mehr als drei Zeilen beginnt dagegen jede Zeile an einer anderen Stelle. Das Auge muss also den Anfang jedes Mal neu suchen. Kurz gesagt: Heben Sie Zentrierung für Akzente auf und halten Sie sie aus dem Fließtext heraus.

Bei Sprachen mit Leserichtung von rechts nach links kehrt sich die Regel um, und Sie richten nach der natürlichen Leserichtung aus. Mehrsprachige Websites sollten diese Einstellung je nach Sprache automatisch wechseln.

Wie stark beeinflusst die Schriftart die Lesbarkeit?

Die Schriftart ist das Fundament, auf dem die Grundeinstellungen stehen. Dieselbe Größe und derselbe Zeilenabstand erzeugen in verschiedenen Schriften eine sehr unterschiedliche Dichte. Eine schmal laufende Schrift bringt zum Beispiel mehr Zeichen in dieselbe Breite. Folglich erreichen Sie die Grenze der Zeilenlänge früher.

Für den Fließtext empfehlen wir, bei der Schrift auf diese Merkmale zu achten:

• Sie enthält alle Zeichen Ihrer Sprachen, also auch Umlaute und das ß, ohne Ausweichen auf eine andere Schrift.
• Kleines l, großes I und die Ziffer 1 lassen sich leicht unterscheiden.
• Normaler und fetter Schnitt unterscheiden sich deutlich.
• Im Fließtext kommen keine dünnen Schnitte zum Einsatz, denn dünne Striche und helle Farben senken gemeinsam die Lesbarkeit.

Das Kombinieren von Schriften erklären wir in unserem Leitfaden Website Typografie: so kombinieren Sie Schriftarten richtig. Auch die Ladezeit zählt. Erscheint Text verspätet oder springt er beim Laden der Schrift, stört das den Leser. Planen Sie daher das Laden der Schriften zusammen mit Ihrer Schriftskala.

Wie unterstützt die Überschriftenhierarchie das Überfliegen?

Leser im Web lesen anfangs selten Zeile für Zeile. Stattdessen überfliegen sie. Überschriften, fette Wendungen und Listen sind die Haltepunkte dabei. Daher braucht eine gut lesbare Seite eine klare Überschriftenstruktur genauso wie fein abgestimmte Absätze.

Konkret folgen wir für die Hierarchie drei Regeln. Erstens sollte der Text unter jeder Überschrift die Frage beantworten, die die Überschrift verspricht. Zweitens überspringen wir keine Ebenen, denn ein Sprung von H2 direkt zu H4 verwirrt Nutzer von Screenreadern und Überflieger gleichermaßen. Schließlich braucht es einen klaren Unterschied in Größe und Stärke zwischen Überschrift und Fließtext.

Der Abstand über einer Überschrift sollte größer sein als der darunter. So haftet die Überschrift optisch an ihrem eigenen Abschnitt und trennt sich vom vorherigen. Dieses Detail geht oft unter, prägt aber stark, wie geordnet eine Seite wirkt.

Wie Leser ihren Blick über eine Seite führen, beschreibt unser Beitrag zum F Pattern im Webdesign im Detail.

Wie hängen Lesbarkeit und SEO zusammen?

Google veröffentlicht keinen Rankingwert für Zeilenlänge oder Zeilenabstand. Eine Aussage wie „Setzen Sie den Zeilenabstand auf 1,6 und Ihre Rankings steigen“ stimmt also nicht. Allerdings erklärt Google Search Central deutlich, dass seine Systeme hilfreiche und verlässliche Inhalte belohnen wollen, die Menschen nützen.

Lesbare Typografie setzt dieses Ziel somit praktisch um. Lesen Besucher bequem, finden sie, was sie suchen, folgen weiterführenden Links und erinnern sich an Ihre Marke. Unlesbarer Text kann dagegen seinen Wert nicht zeigen, egal wie gut der Inhalt ist. Anders gesagt: Lesbarkeit ist kein direktes Signal, sondern eine Voraussetzung dafür, dass guter Inhalt wirkt.

Außerdem zwingt kleine Schrift mobile Leser zum Zoomen und schwächt das Seitenerlebnis. Ebenso lohnt es sich, die sprachliche Seite Ihrer Texte zu messen. Unser Werkzeug Lesbarkeit prüfen zeigt dazu Kennzahlen wie Satzlänge und Absatzstruktur.

Kurz gesagt ergänzen sich Lesbarkeit im Design und Lesbarkeit im Text. Ohne das eine bleibt das andere halb fertig.

Welche Fehler machen Text schwer lesbar?

Im Folgenden finden Sie die Fehler, die uns bei lesbarer Typografie in Webdesignprojekten am häufigsten begegnen. Die meisten stammen aus Entscheidungen, die ein Design auf einem Screenshot gut aussehen lassen.

• Mittelgrauer Fließtext auf hellgrauem Hintergrund.
• Absätze über die volle Breite eines großen Bildschirms.
• Ein dünner Schriftschnitt im Fließtext.
• Weißer Text auf einem Foto ohne dunkle Überlagerung.
• Text, der in Karten mit fester Höhe überläuft und abreißt.
• Mobiler Fließtext mit nur 13 oder 14 Pixel.
• Lange Überschriften und Absätze komplett in Großbuchstaben.
• Links im Fließtext, die sich nur über die Farbe abheben, ohne Unterstreichung.

Gemeinsam ist diesen Fehlern, dass jeder einzeln klein wirkt. Treffen allerdings drei oder vier auf einer Seite zusammen, verlassen Leser die Seite, statt zu lesen. Deshalb empfehlen wir, vor dem Livegang die ganze Liste zu prüfen und nicht nur einen Punkt.

Den größeren Rahmen der Barrierefreiheit beschreibt unser Beitrag Barrierefreie Website nach WCAG und BFSG.

Beispielszenario: wie bringen Sie eine überladene Leistungsseite in Ordnung?

Das folgende Beispiel ist ein Beispielszenario, kein echter Kundenfall. Stellen Sie sich die Leistungsseite eines Dienstleisters vor: Fließtext in 14 Pixel und Hellgrau, Zeilen am Desktop mit 110 Zeichen und ein Zeilenabstand von 1,2. Inhaltlich ist der Text gut, doch der Leser sieht auf dem ersten Bildschirm eine Wand.

Wir würden in dieser Reihenfolge vorgehen:

1. Den Fließtext auf den rem Wert für 17 Pixel anheben.
2. Dem Textcontainer eine Maximalbreite von etwa 68 ch geben.
3. Einen einheitenlosen Zeilenabstand von 1,6 setzen und den Absatzabstand erhöhen.
4. Die Schriftfarbe abdunkeln, sodass der Kontrast deutlich über 4,5:1 liegt.
5. Lange Absätze teilen und Zwischenüberschriften sowie Listen ergänzen.
6. Das Ergebnis mit dem Abstandstest und dem Test bei 200 Prozent bestätigen.

In diesem Szenario wirkt die Seite deutlich einladender, ohne dass sich ein einziges Wort ändert. Natürlich unterscheiden sich die Ergebnisse von Seite zu Seite, und wir versprechen hier keine Erfolgsquote. Dennoch zeigt unsere Erfahrung, dass Texteinstellungen oft die günstigste Designverbesserung sind.

Was gehört auf eine Checkliste für lesbare Typografie?

Vor dem Livegang empfehlen wir, die folgende Liste für jede Vorlage durchzugehen. Wenden Sie sie auf Ihre Hauptvorlagen an, übernehmen neue Seiten dieselben Einstellungen automatisch.

1. Der Fließtext entspricht mindestens 16 Pixel und nutzt rem.
2. Die Zeilenlänge am Desktop liegt bei etwa 60 bis 75 Zeichen, höchstens 80.
3. Der Zeilenabstand ist einheitenlos und beträgt 1,5 oder mehr.
4. Absatzabstände wirken klar größer als der Zeilenabstand.
5. Normaler Text erreicht 4,5:1, großer Text 3:1 oder mehr.
6. Fließtext steht linksbündig, ohne Blocksatz.
7. Überschriftenebenen folgen lückenlos aufeinander, mit klaren Größensprüngen.
8. Links heben sich nicht nur über die Farbe ab.
9. Nach dem Abstandstest nach WCAG 1.4.12 läuft nichts über.
10. Menüs, Formulare und Schaltflächen funktionieren bei 200 Prozent Zoom.
11. Mobile Absätze bleiben kurz, und Tabellen scrollen.
12. Formularfelder und Beschriftungen sind mobil gut lesbar.

Pflegen Sie die Liste als gemeinsames Dokument im Team und aktualisieren Sie sie bei jeder neuen Vorlage. So wird lesbare Typografie zum dauerhaften Standard Ihrer Website statt zu einer einmaligen Korrektur.

Wer sollte diese Werte auf Ihrer Website einrichten?

Texteinstellungen beginnen im Designentwurf, leben aber eigentlich im Code des Themes. Am gesündesten ist es daher, wenn sich Design und Entwicklung auf dieselben Werte einigen. Legen Sie die Werte einmal auf Themeebene fest, trägt jede neue Seite dieselbe Lesbarkeit.

Mit einem fertigen Theme ändern Sie viele Einstellungen zunächst im Adminbereich. Probleme wie Kästen mit fester Höhe, eine in Pixel fixierte Wurzelgröße oder Stile aus Plugins erfordern allerdings meist Eingriffe im Code. Bauen Sie dagegen ein Design neu auf, kostet es deutlich weniger, diese Werte von Anfang an ins Designsystem zu schreiben, als sie später zu korrigieren.

In unserem Webdesign Service legen wir Schriftskala, Zeilenlänge, Zeilenabstand und Kontrastwerte gleich zu Projektbeginn im Designsystem fest. Danach führen wir die Abstands und Zoomtests nach WCAG als Teil unserer Prüfung vor dem Livegang durch.

Ist der Text Ihrer Website schwer lesbar und möchten Sie das dauerhaft lösen, senden Sie uns Ihre aktuellen Seiten. Wir erstellen Ihnen dann ein Angebot mit Umfang und Zeitplan. Anfragen können Sie es über unsere Seite zum Webdesign.