Schrift-Optimierung im responsive Webdesign

Bei der Gestaltung eines responsive Webdesigns ist die Optimierung der Schriftgrößen für unterschiedliche Geräte eine wichtige und nicht zu unterschätzende Aufgabe. Am besten ist es natürlich, wenn man die Lesbarkeit der ausgewählten Schriften und Schriftgrößen auf möglichst 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ährend der Nutzung eines mobilen Gerätes meist nicht so hoch und die Bedingungen eventuell nicht perfekt. Es kann zum Beispiel sein das der Bildschirm spiegelt, weil man sich gerade draußen aufhä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 perfekten Gegebenheiten sollte ein responsive Design möglichst vorbereitet sein.

Schriftgrößen anlegen

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

Der Blog des Webdesigners Max Voltar ist meiner Ansicht nach ein gelungenes Beispiel für eine optimierte 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%.

Schrift Optimierung responsive Webdesign

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 perfekten Bedingungen (spiegeln, zu helle oder du dunkle Umgebung) genutzt. Ein hoher Kontrast zwischen Hintergrund und Schriftfarbe ist daher gerade bei Webdesigns für mobile Geräte extrem hilfreich, um die Lesbarkeit zu verbessern.

Schrift Optimierung responsive Webdesign
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öglichst großzügig mit Weißraum ungegangen werden. Denn durch Leerräume zwischen den Texten und einzelnen Webseiten-Elementen kann man Inhalte viel besser strukturieren. Diese Übersichtlichkeit hilft dann auch wieder die Lesbarkeit zu verbessern. Das Auge kann sich besser auf einen Text konzentrieren und wird nicht durch unnötige Elemente abgelängt.

Eine tolles Beispiel für ein responsive Webdesign mit stimmig gestalteten Weißräumen ist die Webseite Information Architects. Hier wurde z.B. man auf dem iPad eine angenehme Leseansicht geschaffen, im Querformat des iPads wird die Schriftgröße sogar noch vergrößert und rechts und links entstehen großzügig, bemessende Abstände.

Schrift Optimierung responsive Webdesign
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 unterschiedliche 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 flexibleren Schrifteinheiten em oder % im Stylesheet verwenden.

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

Hast du weitere 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!

17 Kommentare

  1. Klasse Beitrag. Ich habe nämlich in den nächsten Tagen vor meinen Blog auch anzupassen. Und nicht nur dieser Post sondern auch die anderen von euch die sich mit dem Responsive Web-Design beschäftigen sind Klasse und helfen jedermann weiter. Ihr seit sozusagen meine Hilfe-Quelle für das Thema :-) Danke dafür.

  2. Vielen Dank! Was ich noch nicht ganz auf die Reihe kriege: Fluide Layouts mit em als Einheit haben sich dann wohl erledigt, oder? Dann wäre man ja für die einzelnen Auflösungen nur noch am umrechnen! YAML macht das noch mit em, glaube ich…

    • @Caspar, @Felix,

      wenn man keinen festen Standard-Wert für em definiert (z.B. bei body) funktioniert em meines Wissens eigentlich auch für fluid Layouts. Denn als 1em wird dann keine feste Schriftgröße verwendet, sondern immer der jeweilige Standardwert des Browsers. Bei den meisten Browsern sind das ca. 16px.

      Viele Grüße,
      Ellen

  3. Vielen Dank für Deinen Beitrag, Ellen! Größere Schrift ist sehr wichtig. Deine Beiträge zu „Mobile Webdesign“ sind sehr lesenswert!!

    Grüße
    Vincent

  4. Hi Ellen
    welche Schriftgrößen habt Ihr eigentlich bei euren bisherigen Themes für den Fließtext verwendet und wird diese Schriftgröße auch in Zukunft beibehalten?

    • Wir haben bei unseren Themes verschiedene Schriftarten verwendet und daher auch ganz verschiedene Schriftgrößen im Einsatz. Welche Schriftgröße für Fließtexte geeignet ist, hängt auf jeden Fall immer vom Gerät und von den Farbkontrasten ab. Tendenziell gehen wir aber derzeit in Richtung größere Schriften für unsere Designs, wenn man das überhaupt so allgemein sagen kann…

      Viele Grüße,
      Ellen

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *