Im Umgang mit responsive Design und Mobilen Webseiten bleibt auch ein Aspekt der Gestaltung wie immer von sehr hoher Bedeutung, die Typografie.
Gerade hier muss man viele Besonderheiten noch genauer betrachten als schon beim normalen Webdesign.
Probleme
Bevor man zu der typografischen Gestaltung einer Mobilen Website oder App kommt, stößt man auf einen haufen Probleme mit denen man sich befassen muss, zum Beispiel:
- Ganz andere Lichtverhältnisse
- lange Ladezeiten
- viele verschiedene Bildschirmgrößen und Auflösungen
Lösungen
Die Lösungsansätze zu diesen Problemen sind jedoch klar definiert:
- hoher Kontrast von Farbe zu Untergrund
- Verzicht auf Webfonts
- gute Spationierung (Spacing)
Lesbarkeit
Ein Smartphone oder Tablet Nutzer muss die Informationen die im präsentiert werden auch erfassen können, dazu hat er meist vom Smartphone oder Tablet selbst noch einige
Hilfen wie z.B. den Zoom. Aber wieso sollte man dem User das nutzen dieser Funktion zumuten, wenn man seinen Text auch von Anfang an so gut gestalten kann, dass das nutzen dieser Funktion überflüssig wird.
Man nehme einfach eine größere Schriftgröße bzw. die besser passende Schriftart.
Damit ist es aber noch lange nicht getan, unbedingt zu beachten ist der Abstand zwischen den einzelnen Buchstaben, Wörtern und Zeilen sowie die Länge der jeweiligen Zeilen, denn was bringt es wenn der Nutzer eine lange Zeile liest aber dann nicht automatisch beim Zeilensprung die nächste Zeile erwischt und sich erst wieder in den Text einfinden muss.
Passend zur aktuellen Jahreszeit ist es eines jeden Designers Pflicht den Kontrast auf mobilen Geräten so zu gestalten, dass selbst bei starkem Lichteinfall noch immer eine gewisse Lesbarkeit gegeben ist. Ein gutes Beispiel für hohen Kontrast ist schwarze Schrift auf weißem Grund.
Die Wahl der Schriftart
Um auch die Ladezeiten der Mobilen Seiten so niedrig wie möglich zu halten, sollte man überlegen auf Webfonts zu verzichten.
Desweiteren ist es ratsam eine Serifenlose Schriftart (Bildschirmschrift) zu nutzen, denn je kleiner die Schrift, desto schwerer sind Serifen zu lesen, Serifenlose Schriften sind bei verschiedenen Auflösungen nunmal einfacher zu handhaben.
em oder px
Einer der wichtigsten Punkte ist jedoch die Wahl der Einheit in der die Schriftgröße angegeben wird. Bei den vielen Möglichkeiten, die Mobile Geräte im Bereiche der
Auflösung bieten ist das gar nicht so einfach.
Das iPad 2 zum Beispiel hat eine Pixeldichte (dpi) von 132 dpi und das iPhone 4 eine von 326 dpi.
Aufgrund dieser Unterschiede kann man keine fixen Pixel Angaben bei der Schriftgröße machen, denn auf einem anderen Gerät mit höherer Pixeldichte würde die Schrift kleiner dargestellt als sie es sein sollte.
Es ist sehr ratsam auf die Größenangaben em oder % auszuweichen. Em an sich geht Standardmäßig von einer Schriftgröße von 16px oder 12pt aus, diesen Standardwert kann man aber auch anpassen.
Wenn man die font-size mit 1em definiert, kann man im weiteren Verlauf des Stylesheets sehr einfach die Größe ändern, da sich alle anderen em Einheiten auf die vorher definierte beziehen. 1.2em wären dann 120% der Originalgröße und 0.8em wären 80%, so kann man sicher sein, dass immer eine korrekte Größe angezeigt wird. Anders als bei der Pixel Angabe.
Am Schluss kann ich hierzu noch diese Seite empfehlen: http://pxtoem.com/
Hier kann man sich ganz leicht px in em und andersherum umrechnen lassen und erspart sich damit einiges an Mühe.