Anzeige
Anzeige
News
Artikel merken

Typografie für mobile Geräte – darauf sollten Designer achten

Beim Design für mobile Endgeräte spielt die Typografie eine bedeutende Rolle. Die Schrift einer mobilen Website oder App muss auch auf kleinen Bildschirmen und möglichst auch bei direkter Sonneneinstrahlung gut lesbar sein. Beim Umgang mit Fonts für mobile Anwendungsfälle sollten man daher eine Reihe von Besonderheiten beachten.

Von Sébastien Bonset
4 Min. Lesezeit
Anzeige
Anzeige

Responsive Webdesign ruht auf vier wichtigen Säulen: dem flexiblen Umgang mit Bildern, flexiblen Rastern, Media Queries und dem flexiblen Umgang mit Schriften. Typografie spielt dabei eine besonders tragende Rolle, denn auf mobilen Endgeräten hat man es als Designer 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 Anforderungen an Designer. Die Hauptaspekte für gut lesbare Texte auf mobilen Geräten sind Schriftgröße, Kontrast und Spationierung (Spacing).

Typografie muss lesbar sein

Anzeige
Anzeige

Die oberste Maxime beim Umgang mit Schriften egal für welches Medium lautet Lesbarkeit. Das gilt auch für die Darstellung von Texten auf Smartphones und Tablets. Der Nutzer muss möglichst problemlos Informationen erfassen können. Zwar ist es auf mobilen Geräten möglich, zu zoomen und so den Text zu vergrößern, aber das sollten Designer dem Nutzer niemals zumuten. Stattdessen sollte man eine größere Schriftart wählen, die Nutzer direkt und auf den ersten Blick lesen können.

Instapaper ist ein Beispiel für den gelungenen Umgang mit Typografie in einer App. Ausreichend große Schrift, angenehme Abstände und ein hohe Kontrast führen zu einer guten Lesbarkeit der Texte.

Instapaper ist ein Beispiel für den gelungenen Umgang mit Typografie in einer App. Ausreichend große Schrift, angenehme Abstände und ein hohe Kontrast führen zu einer guten Lesbarkeit der Texte.

Eine größere Schrift allein führt jedoch noch nicht zwangsläufig zu einer besseren Lesbarkeit von Texten. Die Spationierung ist ebenfalls ausschlaggebend. Was bringen große Zeichen, wenn sie nah aneinander gequetscht werden? Designer sollten für mobile Apps und Websites jedoch nicht nur auf ausreichenden Abstand zwischen einzelnen Buchstaben achten, sondern auch die Abstände zwischen Wörtern und Zeilen großzügig bemessen. Zusätzlich sollte man großzügig mit Absätzen umgehen, um die Lesbarkeit für mobile Nutzer zu optimieren.

Anzeige
Anzeige
In Bezug auf Typografie für mobile Websites kommt dem Kontrast große Bedeutung zu. Mit Tools wie Contrast Ratio kann man schnell abschätzen, ob die gewählten Kombinationen ausreichend Kontrast bieten, damit die Schrift auch bei direkter Sonneneinstrahlung auf den Bildschirm noch gut lesbar ist.

In Bezug auf Typografie für mobile Websites kommt dem Kontrast große Bedeutung zu. Mit Tools wie Contrast Ratio kann man schnell abschätzen, ob die gewählten Kombinationen ausreichend Kontrast bieten, damit die Schrift auch bei direkter Sonneneinstrahlung auf den Bildschirm noch gut lesbar ist.

Hoher Kontrast ist auf mobilen Geräten Pflicht, um die Lesbarkeit auch bei ungünstigen Umgebungslichtverhältnissen gewährleisten zu können. Mit einer möglichst dunklen Schrift auf weißem Grund kann man viel erreichen. Mit dem Tool Contrast Ratio kann man schnell abschätzen, wie sich der Kontrast je nach verwendeter Schriftfarbe und Hintergrundfarbe ändert.

Anzeige
Anzeige

Schlanke Fonts

Beim Design für mobile Websites sollte man stets die Performance auf dem Schirm haben. Viele Websites setzen Webfonts ein, die zwar visuell überzeugen, aber auch die Ladezeiten negativ beeinflussen können. Im mobilen Kontext sollte man wenn möglich auf Webfonts verzichten, denn zu lange Wartezeiten beim Laden einer Seite führen beim Nutzer schnell zu Frust. Will man als Designer unbedingt einen Webfont einsetzen, ist es eine Überlegung wert, diese beispielsweise lediglich für Überschriften zu verwenden und den Fließtext in einer Standardschriftart zu halten.

Typografie muss flexibel sein

Im Sinne des Responsive Webdesign gilt es, die verwendeten Schriftarten nicht nur für mobile Geräte zu optimieren, sondern diese möglichst flexibel zu halten, um den unterschiedlichen Bildschirmgrößen Rechnung zu tragen. Um mit dynamischen Fonts auch responsiv umgehen zu können, stehen Designern unterschiedliche Lösungen zur Verfügung.

Anzeige
Anzeige
Beim Responsive Webdesign sollten Designer die Typografie nicht vernachlässigen. Die Schrift sollte auch vom mobilen Nutzer auf den ersten Blick lesbar sein. Designer sollten vermeiden, dass der Nutzer erst zoomen muss, bevor er lesen kann.

Beim Responsive Webdesign sollten Designer die Typografie nicht vernachlässigen. Die Schrift sollte auch vom mobilen Nutzer auf den ersten Blick lesbar sein. Designer sollten vermeiden, dass der Nutzer erst zoomen muss, bevor er lesen kann.

Lange haben Webdesigner auf Pixel als Maßeinheit gesetzt, um die Schriftgröße ihres Fonts auf unterschiedlichen Geräten und in unterschiedlichen Browsern konstant zu halten. Dieser Ansatz birgt beim Responsive Webdesign aber gleich eine Reihe von Nachteilen. Zum einen kann diese Maßeinheit in der Darstellung variieren. Das heißt, dass sie nicht zwangsläufig zu einer konkreten Größe bei der Darstellung führt – besonders wenn man bedenkt, dass die Pixeldichte unterschiedlicher Displays von Gerät zu Gerät variieren kann. Zum anderen haben verschiedene Schriftgrößen keinen Bezug zueinander, wenn man Pixelwerte anwendet.

Geeigneter ist die relative Maßeinheit „em“. Ein em ist das Äquivalent der in der CSS-Regel font-Size definierten Größe in Pixeln. Beträgt die Schriftgröße beispielsweise 16 Pixel, entspricht das einem em. Zwei em wären demnach 32 Pixel. Wendet man die Regel auf das Elternelement an, werden die Werte vererbt, so dass man die Werte nicht für jedes Element setzen muss. Die Schriften stehen auf diese Weise in Bezug zueinander. Daraus ergibt sich allerdings auch der Nachteil, dass Inhaltsmodule plötzlich eine andere Schriftgröße haben können, wenn man diese innerhalb der Seitenstruktur verschiebt. Dieses Problem kann man umgehen, wenn man die Maßeinheit root em oder kurz rem einsetzt. Diese bezieht sich auf die Schriftgröße des Root-Elements – nämlich die Schriftgröße, die der Designer im „body“ definiert. Beim Einsatz von rem ist es unerheblich, welche Schriftgröße in einem eventuellen Elternelement angegeben ist.

Weiterführende Links

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
14 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Benny Lava

Ein R. S. sollte sich seinen Beitrag vor dem Abschicken mal durchlesen. *hust*

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige