Lesbarkeitoptimierung für Mobile und Desktop

Wie du Schriftgröße, Zeilenlänge und Abstände so wählst, dass deine Texte überall gut lesbar sind. Konkrete Richtwerte inklusive.

8 Min Anfänger März 2026

Website-Layout auf Laptop und Smartphone nebeneinander, verschiedene Schriftgrößen erkennbar

Du kennst das: Eine Website sieht am Desktop großartig aus, doch auf dem Smartphone wird sie zur Herausforderung. Der Text ist zu klein, die Zeilen sind zu lang, oder die Abstände stimmen einfach nicht. Lesbarkeit ist kein Zufall — es’s ein Handwerk mit klaren Regeln.

Das Gute: Du brauchst keine komplizierten Berechnungen oder teure Tools. Mit wenigen konkreten Richtwerten optimierst du deine Texte für beide Plattformen. In diesem Guide zeigen wir dir, welche Schriftgrößen funktionieren, wie lange Zeilen sein dürfen und welche Abstände deine Leser tatsächlich brauchen.

                  Das Wichtigste zuerst
                
                    Basis-Schriftgröße am Desktop: 16px, auf Smartphone: 14-15px
                  
                    Zeilenlänge: 50-75 Zeichen (Desktop), 30-40 Zeichen (Mobile)
                  
                    Zeilenabstand: mindestens 1,5x die Schriftgröße

Schriftgrößen: Die Grundlage

Die Schriftgröße ist dein erstes Werkzeug. Zu klein, und deine Leser werden frustriert. Zu groß, und der Text wirkt ungelenk. Es gibt einen süßen Punkt — und der liegt näher zusammen, als du vielleicht denkst.

Auf dem Desktop sind 16px Basis-Schriftgröße der Standard geworden. Das ist groß genug, um bequem zu lesen, ohne aufdringlich zu wirken. Überschriften sollten deutlich größer sein — H2 arbeitet gut bei 28-32px, H3 bei 24-28px. Diese Größen schaffen Hierarchie, ohne zu schreien.

Am Smartphone ist weniger mehr. Hier funktioniert 14-15px besser als 16px. Das klingt marginal, aber dein Smartphone-Leser sitzt näher dran, und der kleinere Bildschirm braucht kompaktere Typen. Überschriften skalieren ebenfalls: H2 passt bei 22-24px, H3 bei 18-20px.

Vergleich von Schriftgrößen auf Desktop- und Mobile-Geräten, Text in verschiedenen Größen

Demonstrierung von verschiedenen Zeilenlängen mit Text in verschiedenen Spaltenbreiten

Zeilenlänge: Das Geheimnis der Lesbarkeit

Hier passiert die Magie. Eine Zeile, die zu lang ist, ermüdet das Auge. Dein Blick verliert die Position, und dein Leser springt in die falsche Zeile. Das ist frustrierend und führt dazu, dass Menschen deine Seite verlassen.

Die goldene Regel: 50-75 Zeichen pro Zeile am Desktop . Das sind ungefähr 8-12 Wörter pro Zeile (in Deutsch etwas weniger wegen längerer Wörter). Im Code entspricht das einer max-width von etwa 600-700px für deinen Textblock. Nicht mehr. Am Smartphone ist die Sache klarer: 30-40 Zeichen passen auf eine Zeile. Das ist automatisch erfüllt, wenn dein Text voll Breite nimmt — weil Smartphones schmäler sind.

Ein praktisches Beispiel: Wenn dein Grundtext 16px ist und du eine Schriftart mit durchschnittlicher Breite wählst, erreichst du 60-70 Zeichen bei etwa 620px Breite. Das ist dein Ziel für Desktop-Artikel.

Abstände und Zeilenabstand

Niemand möchte in kompaktem Text ersticken. Der Abstand zwischen den Zeilen — der sogenannte Line-Height — ist dein zweites Werkzeug zur Verbesserung der Lesbarkeit.

Die Faustregel: Line-Height von mindestens 1,5x der Schriftgröße . Das heißt bei 16px solltest du mindestens 24px Zeilenabstand haben. Für längere Texte (wie Blog-Artikel) funktioniert sogar 1,6 oder 1,7 besser. Dein Auge dankt es dir — die Zeilen sind klar getrennt, und dein Gehirn kann schneller folgen.

Auch der Leerraum drumherum zählt. Absätze sollten mindestens 1,5x bis 2x deiner Grundschriftgröße Abstand haben. Also bei 16px: mindestens 24px Margin zwischen Absätzen. Zu dicht gedrängt wirkt einengend. Zu viel Platz wirkt zersplittert. Hier brauchst du Fingerspitzengefühl.

Visueller Vergleich von verschiedenen Zeilenabständen und Absatzabständen, Text mit variabler Verdichtung

Responsive Typografie in der Praxis

Jetzt wird’s konkret. Wie setzt du diese Regeln um, ohne für jedes Gerät manuelle Größen zu definieren?

Verwende CSS Clamp

Mit clamp() skaliert deine Schriftgröße automatisch. Beispiel: font-size: clamp(14px, 2vw, 16px) bedeutet: Minimum 14px, Maximum 16px, dazwischen skaliert mit der Viewport-Breite. So passt sich dein Text flüssig an — ohne Media Queries.

Zeilenlänge mit max-width kontrollieren

Setze max-width: 65ch auf deinen Artikel-Container. ch ist eine Einheit, die auf die Zeichenbreite basiert — perfekt für Lesbarkeit. Damit hast du automatisch die richtige Zeilenlänge, egal wie groß der Bildschirm ist.

Line-Height als Multiplikator setzen

Verwende line-height: 1.6 statt fester Pixel-Werte. So skaliert der Zeilenabstand automatisch mit deiner Schriftgröße — elegant und wartbar. Für Überschriften kannst du auf 1,2 oder 1,3 reduzieren.

Mobile-First ist nicht nur Dogma

Beginne mit Schriftgrößen für Smartphone (14-15px) und skaliere dann für größere Geräte hoch. Das ist einfacher, als es umgekehrt zu machen. So stelle ich sicher, dass auch Mobile-Nutzer nicht vernachlässigt werden.

                CSS-Beispiel zum Kopieren
              

.article-text {
    max-width: 65ch;
    margin: 0 auto;
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.6;
}

h2 {
    font-size: clamp(22px, 5vw, 32px);
    line-height: 1.3;
    margin: 2em 0 0.5em 0;
}

p {
    margin-bottom: 1.5em;
}

Seite-an-Seite Vergleich einer optimierten Website auf Desktop und Mobile, gutes Lesbarkeitsverhalten

Desktop vs. Mobile — Konkrete Richtwerte

Hier sind die Zahlen, die du direkt umsetzen kannst. Kein Rätselraten, kein Experimentieren — einfach ausprobieren und anpassen.

Eigenschaft

Desktop

Smartphone

Basis-Schriftgröße

16px

14–15px

32–36px

24–28px

28–32px

22–24px

Zeilenabstand (line-height)

1.6–1.7

1.6–1.8

Zeilenlänge (Zeichen)

50–75 Zeichen

30–40 Zeichen

Absatzabstand

24–32px

16–20px

Diese Werte sind nicht in Stein gemeißelt. Deine Schriftart, deine Zielgruppe und dein Design können Abweichungen rechtfertigen. Aber sie’re ein solider Startpunkt, von dem aus du dich vorarbeiten kannst.

Ein wichtiger Punkt: Kontrast

Selbst wenn deine Schriftgröße perfekt ist, bedeutet das nichts, wenn die Farbe nicht zu sehen ist. Schlechter Kontrast macht deine Texte unsichtbar.

WCAG-Standard einhalten

Für größere Texte (18px+): Mindestens 3:1 Kontrastverhältnis. Für normale Texte: 4.5:1. Das bedeutet, dunkler Text auf hellem Hintergrund (oder umgekehrt) sollte diese Ratio erreichen. Tools wie WebAIM Contrast Checker helfen dir, das zu prüfen.

Praktisch gesprochen

Das heißt: Graue Schrift auf grauem Hintergrund ist out. Dunkles Grau auf Weiß: perfekt. Helles Grau auf Weiß: problematisch. Wenn du dir nicht sicher bist, probiere es aus — zeige deine Seite einem Freund und frage, ob der Text leicht zu lesen ist.

Fazit: Lesbarkeit ist Respekt vor deinem Leser

Gute Lesbarkeit ist unsichtbar. Dein Leser bemerkt sie nicht — er genießt sie einfach. Schlechte Lesbarkeit dagegen springt ins Auge (im wahrsten Sinne), und Menschen verlassen deine Seite.

Die Werkzeuge, die du brauchst, sind einfach: Richtige Schriftgrößen, passende Zeilenlänge, ausreichend Abstand, starker Kontrast. Das sind keine Geheimnisse — es’s handwerkliches Wissen, das jeder Designer beherrschen sollte.

Fang mit den Richtwerten an, die wir dir gegeben haben. Teste auf echten Geräten. Und vertrau auf dein Auge — wenn es sich richtig anfühlt, ist es wahrscheinlich auch richtig.

Nächster Schritt: Farbpaletten meistern

Gute Typografie ist nur die halbe Miete. Erfahre, wie du Farben einsetzt, um Hierarchie zu schaffen und Aufmerksamkeit zu lenken.

Mehr über Farbpaletten erfahren

Gut lesbare Website auf verschiedenen Geräten mit optimierter Typografie, zufriedene Leserfahrung

Hinweis

Dieser Artikel enthält Richtlinien und Best Practices für Web-Typografie. Die genannten Werte sind Empfehlungen basierend auf etablierten Standards wie WCAG und Best Practices der Branche. Deine konkreten Anforderungen können je nach Zielgruppe, Schriftart und Design-Kontext variieren. Teste deine Implementierung immer auf echten Geräten und mit echten Nutzern, um die beste Lesbarkeit für deine spezifische Situation zu erreichen.