Warum niemand deine Texte auf dem Handy liest
Um 8 Uhr beginne ich mit den Basics. Google empfiehlt mindestens 16 Pixel Schriftgröße für Body-Text auf mobilen Geräten. Meine Seite nutzt 13 Pixel. Kein Wunder, dass Leute zoomen müssen. Ich stelle die base font-size auf 18 Pixel und die line-height auf 1.6. Sofort lesbarer.
Dann schaue ich mir die Zeilenlänge an. Auf Desktop habe ich 920 Pixel Container-Breite, das sind etwa 120 Zeichen pro Zeile. Viel zu viel für ein Handy. Optimal sind 50 bis 75 Zeichen. Ich setze max-width für Textblöcke auf 100 Prozent der Viewport-Breite mit padding links und rechts. Jetzt umbrechen die Zeilen natürlich.
Gegen 11 Uhr fällt mir auf, dass meine Überschriften auf mobil riesig sind. H1 mit 48 Pixel sieht auf Desktop gut aus, auf einem iPhone nimmt es drei Zeilen ein. Ich nutze CSS clamp(), damit Überschriften responsive skalieren: zwischen 24 und 48 Pixel je nach Bildschirmgröße.
Mittags teste ich die Lesbarkeit meiner Link-Texte. Viele sind nur ein Wort lang und damit schwer zu treffen. Ich erweitere klickbare Bereiche mit padding und erhöhe den Kontrast. Hellblaue Links auf weißem Grund sind auf Handy-Displays in der Sonne praktisch unsichtbar.
Nachmittags breche ich lange Absätze auf. Alles über fünf Zeilen auf mobil wird geteilt. Ich füge mehr Zwischenüberschriften ein, nutze Aufzählungen statt Fließtext wo es passt. Listen sind auf kleinen Screens viel leichter zu scannen.
Um 17 Uhr teste ich auf fünf verschiedenen Geräten mit unterschiedlichen Bildschirmgrößen. Von iPhone SE bis Samsung Galaxy mit großem Display. Die Texte funktionieren überall. Lesbarkeit auf mobil ist reine Typografie-Arbeit, aber sie macht den kompletten Unterschied zwischen Absprung und Verweildauer.