Schriftgröße für lange Artikel auf (kleinen) Smartphones?

Martinus33

Lt. Commander
Registriert
Juni 2011
Beiträge
1.721
Hallo,
wenn ich mir meine neu erstellten langen und gut strukturierten Artikelseiten (pro Seite 2000-3500 Worte, 30 bis 50 Absätze, Bilder, Überschriften ect.) desktop anschaue, dann kann man das sicher gut lesen. Desktop kann man angemessene Zeilen- und Absatzlängen mit genug Zeilenhöhe, serifenloser Schriftart und einer ausreichenden Schriftgröße (14/15 bei einer großen Schriftart, 16 bei einer normal großen Schriftart) kombinieren. Der durchschnittliche Absatz hat bei mir 4 - 6 Zeilen zu je ca. 80 - 90 Zeichen.

Doch beim kleinsten MQ für Smartphones von ca. 320 bis 420 CSS-Pixel Breite stoße ich da an Grenzen und kann nicht wirklich gut lesbaren Fließtext machen. Im Web wird überall auf gut lesbaren 16px Schriftgröße beharrt (oder 14/15, wenn gut lesbare, große Schriftart) und ich frage mich, ob von denen jemals einer eine textreiche Website mit langem Fließtext auf jeder Seite wirklich erstellt hat.

Angesichts des geringen Platzes muss man die Schriftart kleiner machen und die Zeilen kürzer. Doch selbst mit nur minimalem freien Rand links und rechts werden dann die desktop 4 - 6 Zeilen langen Absätze 9 - 12 Zeilen lang. Oft haben die Zeilen am rechten Rand Lücken, weil ein etwas längeres Wort dort nicht mehr hinpasst und dann in die nächste Zeile umbricht. Was nicht schön aussieht und wieder die Zeilenanzahl erhöht. Blocksatz ist genauso hässlich und ändert am Umbrechen nichts.
Das ist das Szenario mit einer großen Schriftart bei Schriftgröße 12 (Verdana). 13 macht es noch schlimmer, 11 ist dann schon sehr klein. Schriftgrößen 14 - 16 sind unmöglich.

Ich nutze Smartphones selbst kaum, aber ich frage mich, wie die User damit umgehen. Kommen da alle damit zu recht, indem sie ständig zoomen? Ich persönlich würde lange Texte auf dem Smartphone überhaupt nicht lesen, sondern nur auf Tablets/desktop, aber ich bin eine andere Generation.
 
Zuletzt bearbeitet:
Du kannst für unterschiedliche Bildschirmbreiten im CSS unterschiedliche Schriftgrössen definieren (mit Media Queries). Beziehungsweise Schriftgrössen eh direkt von der Bildschimrgrösse abhängig machen mit CSS clamp()
 
  • Gefällt mir
Reaktionen: Tornhoof
Media queries/MQs und unterschiedliche Schriftgrößen mache ich ja schon:
Martinus33 schrieb:
Doch beim kleinsten MQ für Smartphones von ca. 320 bis 420 CSS-Pixel Breite stoße ich da an Grenzen und kann nicht wirklich gut lesbaren Fließtext machen.

Trotzdem wird es so wie im 3. Absatz beschrieben:
Martinus33 schrieb:
Angesichts des geringen Platzes muss man die Schriftart kleiner machen und die Zeilen kürzer. Doch selbst mit nur minimalem freien Rand links und rechts werden dann die desktop 4 - 6 Zeilen langen Absätze 9 - 12 Zeilen lang. Oft haben die Zeilen am rechten Rand Lücken, weil ein etwas längeres Wort dort nicht mehr hinpasst und dann in die nächste Zeile umbricht. Was nicht schön aussieht und wieder die Zeilenanzahl erhöht. Blocksatz ist genauso hässlich und ändert am Umbrechen nichts.
Das ist das Szenario mit einer großen Schriftart bei Schriftgröße 12 (Verdana). 13 macht es noch schlimmer, 11 ist dann schon sehr klein. Schriftgrößen 14 - 16 sind unmöglich.
 
Ich lese gerne und viel am Smartphone allerdings liegt das an meinem Browser.
Opera für Android ist der einzige mir bekannte Browser welcher die zeilen korrekt umbricht und man nicht hin und her scrollen muss.
Ich kann stufenlos den Text vergrößern

Hier 2 Beispielbilder

Screenshot_20260103-195241.pngScreenshot_20260103-195251.png
 
testwurst200 schrieb:
Ich lese gerne und viel am Smartphone allerdings liegt das an meinem Browser.
Opera für Android ist der einzige mir bekannte Browser welcher die zeilen korrekt umbricht und man nicht hin und her scrollen muss.
Ich kann stufenlos den Text vergrößern

Ich kenn mich wie gesagt mit den praktischen Möglichkeiten der Smartphones zum besseren Lesen nicht aus, aber ich vermute mal, das Zoomen und eine Schriftvergrößerung zumindest in Stufen erlauben alle.

Die Frage ist halt, inwiefern das das Lesen "gut" macht. Für dich mit Opera offenbar schon. Aber stell dir jetzt mal vor, der erste Absatz im linken Bild (mit der kleineren Schrift) wäre so ein typischer - in meinen Augen - am Smartphone nicht mehr gut lesbarer, 12-zeiliger Absatz auf meinen Seiten. Und stell dir weiter vor, der Absatz hätte noch mehr so Löcher am rechten Rand wie unten in der 9. Zeile, teilweise noch größere sogar, so ähnlich wie beim rechten Bild. Und wenn dann noch die Worte in Schriftgröße 12 einer größeren Schriftart oder 14 einer normal großen Schriftart schon etwas klein wären....
So in etwa ist die Situation mit meinem kleinsten Media Query für Smartphones von ca. 320 bis 420 Pixel.

Ich Vergleich dazu ist das Lesen des gleichen Absatzes desktop geradezu ein Augenschmaus: größere Schriftgröße, ein Absatz mit nur 5 Zeilen in angemessener Länge von ca. 80-90 Zeichen. Klar sitzt man auch weiter weg und so, aber dennoch...
 
Martinus33 schrieb:
Ich kenn mich wie gesagt mit den praktischen Möglichkeiten der Smartphones zum besseren Lesen nicht aus, aber ich vermute mal, das Zoomen und eine Schriftvergrößerung zumindest in Stufen erlauben alle.

Nein tun sie nicht und deshalb liebe ich den Opera.
Hier noch ein Beispiel vom google Chrome
Screenshot_20260104-095439.png

Für mich muss es lediglich lesbar sein und ein Schönheitspreis ist für mich irrelevant :d
Für dich hat es anscheinend mehr Bedeutung.
 
Zurück
Oben