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 Responsive 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.

Bei Smartphones kommt übrigens hinzu, dass diese immer häufiger ein modernes OLED Display verwenden. OLED ist stromsparend, da schwarze Pixel nicht beleuchtet werden müssen. Daher lohnt evtl. ein Blick auf ein Dark-Theme, wenn der Nutzer über ein mobiles Endgerät auf deine Seite zugreift.

Mit den Media Queries kannst du übrigens abfragen, welche Voreinstellung der Nutzer in seinem Betriebssystem verwendet. So kannst du, wenn der Nutzer bewusst den Darkmode am PC oder am Handy wählt, dein Design entsprechend darauf ausrichten. Das hierfür benötigte Media Query heißt @media screen and (prefers-color-scheme: dark).

Das Gegenteil wäre entsprechend @media screen and (prefers-color-scheme: light). Aber Achtung: Stand heute (Juni 2019) unterstützen lediglich Safari und Firefox dieses Media Query. Google wird in Chrome ab Version 76 prefers-color-scheme ebenfalls unterstützen. Microsoft unterstützt in der auf Chromium basierten Variante (aktuell noch Beta) ihres Browsers Edge das Media Query ebenfalls bereits.

Übrigens: Auf Webmasterparadies.de setze ich diese Variante bereits ein. Dein Browser, sofern er das Feature unterstützt, sollte dir automatisch ein dunkles Farbschema ausgeben, wenn du den Nachtmodus auf deinem Gerät aktiviert hast.

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.


Anzeige:


Schreibe einen Kommentar