Bei der Umsetzung eines Responsive Webdesigns ist neben dem flexiblem Grid, die Optimierung von Schriften wie Schriftart und Schriftgröße für die unterschiedlichen Geräte und Displays eine wichtige Aufgabe. Im Zusammenhang bei der Optimierung von Schriften sind einige Punkte zu beachten.

Optimierung von Schriften für Responsive Webdesign

 

Lesbarkeit der Schrift auf verschiedenen Geräten

Es gibt große Unterschiede zu der Lesbarkeit einer Schrift auf einem PC, einem Tablet oder einem Smartphone. Was auf einem PC gut lesbar ist, muss nicht unbedingt auf einem Tablet oder Smartphone gut lesbar sein.

Auf mobilen Geräten wie Tablets oder Smartphones steht einem viel weniger Platz als auf einem PC zur Verfügung. Weiterhin kann die Lesbarkeit auf mobilen Geräten stark eingeschränkt sein, wenn man sich im Freien aufhält und das Display stark spiegelt. Zusätzlich kommt hinzu, dass die Konzentration beim Lesen auf einem mobilen Gerät nicht so hoch ist wie auf einem PC mit einem großen Display. Mit einem guten Responsive Webdesign können Sie auf diese Verhältnis und Umstände reagieren.

 

Relative Schriftgrößen für Responsive Webdesign

Beim Reponsive Webdesign sollte die Einheit Pixel ersetzt werden, da die Schriftgröße genauso flexibel sein muss wie das Layout.

Schriftgrößen in Pixel haben keinen Bezug zueinander. Bei unterschiedlichen Geräten und Display-Größen bedeutet das, dass man die Werte für die Schriftgrößen einzeln für alle Display-Größen anpassen müsste.

Daher sollte man bei den Schriftgrößen anstatt mit Pixel mit relativen Schriftgrößen mit der Einheit em arbeiten.

Um das zu realisieren, muss als Erstes die Schriftgröße im body geändert werden. Die Schriftgröße im body wird als Prozentwert angegeben. Die Standardschriftgröße in einem Browser beträgt in der Regel 16px. Der Pixelwert kann dann mit folgender Formel in einen Prozentwert umgerechnet werden:

Zielgröße / Standardgröße x 100 = gesuchter Prozentwert

 

Falls Sie z. B. für Ihre Website eine Standard Schriftgröße von 15px wünschen, können Sie den Prozentwert wie folgt ausrechnen:

15 / 16 x 100 = 93.75%

Sie können dann den ausgerechneten Prozentwert für den body in Ihre CSS Datei schreiben:

body {font-size: 93.75%;} /* 15px */

Jetzt haben Sie eine relative Schriftgröße für ein Responsive Webdesign und können die weiteren Angaben für die Schriftgröße auf diesen Wert beziehen. D. h., 1em würde in diesem Fall den 15px im body entsprechen.

Nun können Sie mit der Formel

Zielgröße / Standardgröße = relative Schriftgröße

 

die weiteren Schriftgrößen, z. B. für Überschriften, ausrechnen. Bei der Standardgröße in der Formel gehen wir von unserem festgesetzten Wert 15px aus.

Wenn Sie also eine Überschrift von h2 mit 30px haben möchten, rechnen Sie die relative Schriftgröße wie folgt aus:

30 ÷ 15 = 2

Sie können dann die ausgerechnete relative Schriftgröße für das h2 in Ihre CSS Datei übernehmen:

h2 {font-size: 2em;} /* 30px, 30/15 = 2 */

Mit diesem Verfahren können Sie nun alle Schriftgrößen für Ihre Website anlegen.

Jetzt stehen alle Schriftgrößen in Relation zu der Standard Schriftgröße im body. Sie können nun die Schriftgröße für die mobilen Geräte einfach anpassen, indem Sie den Prozentwert im body ändern.

 

Schriftfarbe und Kontrast

Da das Lesen auf mobilen Geräten wie Tablets und Smartphones nicht immer optimal ist, weil es spiegelt oder die Umgebung zu hell oder zu dunkel ist, sollte man mit einem hohen Kontrast zwischen Hintergrund und Schriftfarbe beim Responsive Webdesign arbeiten. So wird die Lesbarkeit verbessert.

 

Mit Weißräumen arbeiten

Um die Lesbarkeit einer Website zu steigern, sollten Sie auch mit Weißräumen arbeiten. Weißräume zwischen Texten und Elementen erhöht die Übersichtlichkeit und strukturiert den Inhalt besser. Der Besucher auf der Website kann sich viel besser auf das Wesentliche konzentrieren und wird nicht von unnötigen Elementen abgelenkt oder hat Schwierigkeit beim Lesen eines Textes, weil die Buchstaben am Rand des PC, Tablets oder Smartphones sind.

 

Haben Sie Fragen oder Probleme bei der Optimierung von Schriften für Responsive Webdesign? Gerne helfen wir Ihnen weiter. Kontaktieren Sie uns einfach.