Bei der Gestaltung für mobile Devices nimmt die Typografie eine wichtige Rolle ein. Zum einen hat man es als Designer auf mobilen Endgeräten mit vielen unterschiedlichen Bildschirmgrößen zu tun, die in der Regel verhältnismäßig klein ausfallen. Längere Ladezeiten und schwierige Lichtverhältnisse bei der Nutzung von Smartphones stellen zusätzliche Herausforderungen dar.
Die Schrift einer App oder mobilen Website sollte jedoch auf kleinen Displays, aber auch bei direkter Sonneneinstrahlung gut lesbar sein. Durch einfache Anpassungen der Techniken, welche wir bereits für das Web verwenden, kann die Lesbarkeit auf mobilen Geräten verbessert werden.

Beim Umgang mit Fonts für mobile Anwendungsfälle sollte man daher eine Reihe von Besonderheiten beachten. Die wichtigsten Faktoren für gut lesbare Texte auf mobilen Geräten sind das Zusammenspiel von Schriftgröße, Kontrast und Spacing. Heutzutage ist jedoch auch die Flexibilität der Schrift sehr wichtig.

 

Schriftgröße und Leserlichkeit

Die Leserlichkeit ist beim Umgang mit Schriften das oberste Gebot. Dies gilt für alle Medien. Der Nutzer muss also dazu im Stande sein, Informationen möglichst problemlos zu erfassen. Zwar besteht die Möglichkeit, auf mobilen Geräten zu zoomen und somit den Text zu vergrößern, dies ist jedoch kaum der Sinn und Zweck und sollte dem Nutzer somit auch nicht zugemutet werden. Smartphones und Tablets werden von den Usern oft anders und unter anderen Bedingungen genutzt als Computer oder Laptops. Darum sollte eine Schriftgröße gewählt werden, die auf den ersten Blick leserlich ist. Diese sollte zudem größer sein, als auf einer typischen Website. Gestaltet man für mobile Geräte, sollten außerdem einfache Schriftarten gewählt werden, welche angenehm für das Auge sind, etwa serifenlose Schriften wie Helvetica.

Hilfreich ist es, die Schriftgröße auf die maximale Zeichenanzahl pro Zeile abzustimmen. Für das Web wird oft mit einer durchschnittlichen Zeichenanzahl von 60-75 Zeichen gerechnet, für mobile Geräte reduziert sich diese Zahl auf etwa 30-50 Zeichen inklusive Leerzeichen. Zu lange Zeilen sind anstrengend für das Auge, zu kurze Zeilen stören den natürlichen Lesefluss. Auch kann das Absatzformat die Lesequalität beeinflussen, aus diesem Grund sollten Textblöcke linksbündig dargestellt werden, da dies dem natürlichen Lesefluss entspricht, und keine zu großen “Lücken” aufweisen.

 

Kontrast

Wie bereits erwähnt, werden mobile Geräte oft unter ungünstigen Lichtverhältnissen genutzt. Die Nutzung des Smartphones im Freien unterscheidet sich daher oft grundlegend von der Nutzung eines Computers im Büro. Deshalb sollte immer auf ausreichend Kontrast zwischen Text und Hintergrund geachtet werden. Eine möglichst dunkle Schrift auf hellem Hintergrund kann hier schon ein ausgewogenes Kontrastverhältnis gewährleisten. Verschiedenste Tools zur Überprüfung des Kontrasts können hier sehr hilfreich sein, z.B. das Contrast Ratio Tool

 

Spacing

Je kleiner das Display, umso wichtiger ist es, Buchstaben und Text Raum zum Atmen zu geben. Dabei ist es egal, wie groß die gewählte Schriftart ist, es wird dennoch problematisch sein, wenn die Buchstaben zusammengequetscht sind. Hier ist nicht nur der Abstand zwischen einzelnen Buchstaben ausschlaggebend, auch zwischen Wörtern und Zeilen. Nutzt man Paragraphen oder Textblöcke, sollten margins und paddings genutzt werden, um diese klar voneinander zu trennen.

 

Flexibilität

Die Idee hinter flexibler oder responsiver Typografie ist, dass diese auf Basis der jeweiligen Bildschirmgröße optimiert und angepasst wird. Lange Zeit wurden Pixel als Maßeinheit eingesetzt, um die Schriftgröße auf unterschiedlichen Geräten konstant zu halten. Dies hat jedoch den Nachteil, dass diese Maßeinheit nicht auf jedem Bildschirm konstant dargestellt wird, zumal auch die Pixeldichte unterschiedlicher Displays variieren kann. Sinnvoller ist es daher, die relative Maßeinheit „em“ zu verwenden. Beträgt die Schriftgröße z.B. 16px, dann entspricht das 1em. 2em wären demnach 32px. Wendet man diese Regel auf das Elternelement an, stehen Schriften auf diese Weise in Bezug zueinander und die Werte können vererbt werden. Verschiebt man jedoch Elemente innerhalb der Seitenstruktur, kann dies zu einer ungewollten Veränderung der Schriftgröße führen. Es empfiehlt sich daher die Verwendung von „root em“ oder „rem“. Diese Maßeinheit bezieht sich immer auf das Root-Element, nämlich die Schriftgröße, welche im „body“ definiert wurde.

 

Schrift und Performance

Bei der Gestaltung von mobilen Websites oder Apps sollte man nie die Performance außer Acht lassen. Viele Websites nutzen Webfonts. Diese können zwar auf allen Geräten dargestellt werden und überzeugen visuell, beeinflussen jedoch die Ladezeit der Website negativ.  Für mobile Geräte sollte daher wenn möglich auf den Einsatz von Webfonts verzichtet werden, denn in der heutigen Zeit muss alles schnell gehen. Dauert das Laden einer Seite zu lange, kann das beim Nutzer rasch Frustration auslösen. Will man jedoch dennoch Webfonts nutzen, sollten diese z.B. nur für Überschriften verwendet werden. Für Fließtext o.Ä sollte demnach auf vorhandene Systemschriften zurückgegriffen werden.