Responsive Webdesign Teil 3: Schrift optimieren

Im dritten Teil der Reihe „Responsive Webdesign“ geht es um die Optimierung von Schriften für das Responsive Webdesign. Daher gebe ich dir in diesem Artikel einige Stichpunkte mit an die Hand, mit denen du deine Schrift optimieren kannst. Das verbessert dein Responsive Webdesign.

 

Schrift optimieren im Responsive Webdesign

Bei der Wahl von Schriftart und Schriftgröße sind im Responsive Webdesign einige Dinge zu beachten. Denn was am PC-Monitor gut aussehen kann, muss nicht zwangsläufig auch auf einem Smartphone oder einem Tablet lesbar sein.

Die Lesbarkeit von Schrift auf mobilen Geräten ist nicht immer Vorteilhaft. So kann es beispielsweise sein, dass das Display stark spiegelt. Bei Smartphones kommt zusätzlich hinzu, dass die Geräte unterschiedliche Abmessungen haben können. Somit wird der Inhalt mal größer, mal kleiner dargestellt. Dementsprechend passt auch mal mehr oder mal weniger Inhalt auf eine Seite.

Ein gutes Responsive Webdesign ist natürlich auf diese Widrigkeiten ausgelegt und kann diesen zumindest einigermaßen entgegenwirken. Nachfolgend gebe ich dir dazu ein paar Tipps, die dir bei deinem Responsive Design helfen können.

 

Schriftgröße und Abstand zwischen den Zeilen

Die Schriftgröße ist meist das Wichtigste, was es zu beachten gilt. Während man auf einem normalen PC-Monitor noch relativ gut lesen kann, ist dies bei Smartphones nicht mehr so einfach möglich. Die Displays vergleichsweise sehr klein. Daher ist es wichtig, möglichst die Größe der Schrift etwas großzügiger zu bemessen.

Dies ist zu erreichen, indem man den Schriftarten keine feste Größe zuordnet, sondern eine flexible Einheit verwendet. Dies kann entweder eine prozentuale Angabe sein, oder die Einheit em, die sich ebenfalls dynamisch anpassen lässt.

Ähnliches gilt natürlich auch für den Abstand zwischen den Zeilen. Diesen solltest du für mobile Geräte ebenfalls etwas höher wählen, da sich so die Lesbarkeit verbessert.

 

Kontrast und Schriftfarbe

Wie schon in der Einleitung erwähnt, sind die Lese-Bedingungen bei mobilen Geräten nicht immer optimal. Um diese zu verbessern, solltest du daher im Responisve Webdesign einen möglichst hohen Kontrast zwischen Schriftfarbe und Hintergrund wählen. So stellt man sicher, dass auch bei nicht optimalen Bedingungen die Schrift lesbar bleibt.

Dies gilt aber ganz genau so auch für ein „normales“ Webdesign. Der Kontrast ist gehört mitunter zu den wichtigsten Dingen, die du beim Schriftbild beachten solltest. Insbesondere dann, wenn es auf deiner Website auch längere Texte zu lesen gibt. Ist der Kontrast nicht hoch genug, kann man den Text nicht mehr gut lesen. Daher ist er ein sehr wichtiger Baustein, mit dem du deine Schrift optimieren kannst.

 

Mit Weißräumen arbeiten

Weißräume, beispielsweise am linken und am rechten Rand der Seite, lockern die Gestaltung des Responsive Webdesigns auf. Es erhöht die Lesbarkeit, wenn sich die Buchstaben nicht ganz so nah an den Rand drängen müssen.

Das gleiche gilt aber auch für Absätze oder den Raum zwischen diversen Elementen deiner Website. Die einzelnen Elemente sollten nicht zu nah beieinander sein. Lasse lieber einen kleinen Freiraum zwischen ihnen. Gerade auf kleinen Bildschirmen kann die Seite sonst sehr überladen wirken.

 

 

Du hast nun die Grundlagen des Responsive Webdesigns gelernt. Ebenfalls hast du schon einige Media Queries eingerichtet. Genau so hast du nun deine Schrift optimiert. Somit kannst du nun dein Responsive Webdesign testen. Einige Tools stelle ich dir im eben verlinkten, vierten Teil dieser Reihe vor.


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.