Bei der Gestaltung eines responsive Webdesigns ist die Optimierung der Schriftgrößen für unter­schied­liche Geräte eine wich­tige und nicht zu unter­schät­zende Aufgabe. Am besten ist es natür­lich, wenn man die Lesbarkeit der aus­ge­wählten Schriften und Schriftgrößen auf mög­lichst vielen Geräten live testet. Dennoch kann man schon vor der ersten Design-Testphase einige Dinge beachten.

Lesbarkeit auf mobilen Geräten

Auf mobilen Geräten (Smartphones und Tablets) ist nicht viel Platz für das Webdesign zur Verfügung. Außerdem ist die Konzentration wäh­rend der Nutzung eines mobilen Gerätes meist nicht so hoch und die Bedingungen even­tuell nicht per­fekt. Es kann zum Beispiel sein das der Bildschirm spie­gelt, weil man sich gerade draußen auf­hält oder das es recht dunkel im Raum ist, z.B. wenn man abends auf der Couch mit seinem Tablet im Web surft. Auf diese meist nicht per­fekten Gegebenheiten sollte ein responsive Design mög­lichst vor­be­reitet sein.

Schriftgrößen anlegen

Die Schriftgröße kann also ruhig etwas größer ange­legt werden, als man es vom Design einer reinen Desktop-Webseite gewohnt ist.

Der Blog des Webdesigners Max Voltar ist meiner Ansicht nach ein gelun­genes Beispiel für eine opti­mierte Schriftgröße auf mobilen Geräten. Die Smartphone-Ansicht seines Webdesigns zeigt die Fließtext-Schrift bei 100% an, auf einem Tablet (z.B. auf dem iPad) im Hochformat werden es dann 125% und auf auf einem Tablet im Querformat (und allen Bildschirmen ab 1024px) 150%.

Schriftfarbe und Kontrast zum Hintergrund

Auch die Schriftfarbe sollte nicht zu blass gewählt und der Kontrast zum Hintergrund nicht zu gering sein. Denn wie bereits oben erwähnt, werden Smartphones und Tablets meist nicht unter per­fekten Bedingungen (spie­geln, zu helle oder du dunkle Umgebung) genutzt. Ein hoher Kontrast zwi­schen Hintergrund und Schriftfarbe ist daher gerade bei Webdesigns für mobile Geräte extrem hilf­reich, um die Lesbarkeit zu verbessern.

geringer Farbkontrast / hoher Farbkontrast

Mit Weißräumen arbeiten

Auch wenn auf mobilen Geräten sehr viel weniger Platz zur Verfügung steht, als in der Desktop-Version eines Webdesigns, sollte mög­lichst groß­zügig mit Weißraum unge­gangen werden. Denn durch Leerräume zwi­schen den Texten und ein­zelnen Webseiten-Elementen kann man Inhalte viel besser struk­tu­rieren. Diese Über­sicht­lich­keit hilft dann auch wieder die Lesbarkeit zu ver­bes­sern. Das Auge kann sich besser auf einen Text kon­zen­trieren und wird nicht durch unnö­tige Elemente abgelängt.

Eine tolles Beispiel für ein responsive Webdesign mit stimmig gestal­teten Weißräumen ist die Webseite Information Architects. Hier wurde z.B. man auf dem iPad eine ange­nehme Leseansicht geschaffen, im Querformat des iPads wird die Schriftgröße sogar noch ver­grö­ßert und rechts und links ent­stehen groß­zügig, bemes­sende Abstände.

Die Webseite von Information Architects in der iPad Ansicht.

Auf diese Weise wirkt das Webdesign luftig und der Leser kann sich ganz bequem auf das Lesen des Tetes konzentrieren.

Flexible Einheiten em oder Prozent, statt px

Da es bei mobilen Geräten unter­schied­liche Pixeldichten gibt (auf dem iPad 132ppi und auf dem iPhone 4 326ppi, im Gegensatz zu 72dpi auf Standard-Desktop Monitoren), sollte man statt fester Pixeleinheiten für Schrift lieber die fle­xi­bleren Schrifteinheiten em oder % im Stylesheet verwenden.

So kann man sicher gehen, dass bei 100% oder 1em die Standard-Schriftgröße des jewei­ligen Gerätes genommen wird und nicht ein even­tuell viel zu kleines oder zu großes Pixelmaß.

Hast du wei­tere Tipps und Anregungen für die Optimierung von Schriften in responsive Webdesigns? Über dein Feedback und deine Ergänzungen zum Artikel freue ich mich sehr!