Mobile ist jetzt groß. Aber oft ist die Typografie klein. Wenn es darum geht, großartige Schrift auf kleinen Bildschirmen zu erstellen, gibt es viele Herausforderungen.
Wie können Sie also Reaktionsfähigkeit, mobiles Design und Typografie optimal nutzen? Der erste Schritt besteht darin, den Typ wirklich zu verstehen, und der zweite besteht darin, darüber nachzudenken, wie Menschen lesen. Setzen Sie die beiden zusammen, und Sie werden im Handumdrehen einen großartigen mobilen Typ erstellen können. Eine Fähigkeit, die jeder Designer im digitalen Zeitalter beherrschen muss.
Mobile und Responsive Typografie-Grundlagen
Im Gegensatz zu Typen, die für Print- und sogar für viele Desktop-Webdesign-Projekte entwickelt wurden, wird die mobile und responsive Typografie häufig nicht mit dem herkömmlichen Punktesystem gemessen. Anstatt eine Schrift zu wählen und sie bei? 14 Punkten mit 15 Punkten zu verwenden? mobile und responsive type wird mit pixel, ems oder rems entworfen. Diese flexiblen Einheiten basieren auf Prozenten und können Designern dabei helfen, den Typ für mehrere Geräte einfacher zu erstellen.
Zwei der wichtigsten Überlegungen bei der Gestaltung des Typs für mobile Geräte sind Größe und Platz. Der Typ muss groß genug sein, um leicht lesbar zu sein, und es sollte genügend Platz zwischen den Zeilen vorhanden sein, damit sich der Text auf engstem Raum nicht eng anfühlt.
Es gibt keine Zauberformel für die zu verwendende Größe oder den Abstand. Typischerweise sollte der mobile Typ jedoch etwas größer sein als auf Desktops und mehr Zeilenabstand enthalten. Während viele argumentieren, dass die optimale Anzahl von Zeichen pro Zeile für die Druck- und Desktop-Gestaltung 60 bis 75 Zeichen beträgt, sollte diese Anzahl für Handys halbiert werden.
Wie die Leute lesen
Der Schlüssel zu jeder Art von Typografie auf jedem Gerät ist Lesbarkeit. Wenn der Benutzer es nicht lesen kann, funktioniert das Design nicht.
Dies ist besonders wichtig auf mobilen Geräten. Und es gibt so viele mobile Optionen, es ist praktisch unmöglich zu wissen, wie Ihre Beschriftung auf jedem Gerät dargestellt wird. So arbeiten Sie wirklich daran, Ihren Typ für die gängigsten Bildschirmbreiten des Geräts zu verfeinern.
Denken Sie darüber nach, wie Menschen lesen, wenn Sie Ihr mobiles Design planen. Möglicherweise müssen Sie die Beziehungen zwischen verschiedenen Typelementen wie Kopfzeile und Haupttext anpassen. (Die Website des Chattanooga Renaissance Fund leistet oben einen tollen Job.) Jede Art von Größe, die zu groß ist, kann schnell auf dem Bildschirm fressen und die Leser ablenken. Ein zu kleiner Typ kann übersehen werden oder unwichtig erscheinen.
Betrachten Sie auch die Ausrichtung. Im Allgemeinen lesen die Leute von links nach rechts. Halten Sie den Ausrichtungsstil vor allem auf kleinen Geräten für maximale Lesbarkeit einfach.
Es geht um die Breite
Der Schlüsselfaktor beim Design des Typs für mobile Geräte, Apps oder Tablets ist die Bildschirmbreite. Denken Sie daran, dass zwei Breiten zu berücksichtigen sind: vertikal (wie die meisten Menschen ihr Telefon halten) und horizontal.
Zu großer Text führt zu vielen Unterbrechungen des Typs und bei Verwendung von Silbentrennung zu vielen Trennstrichen. (Es sollte beachtet werden, dass nur wenige Webdesigner Bindestriche verwenden; dies ist ein selten im Text gefundener Text.) Häufige Unterbrechungen im Textfluss können dazu führen, dass der Leser zu oft stoppt und die Nachricht abgehackt und schwieriger wird begreifen.
Zu kleiner Text kann zu einer Belastung des Lesers führen und die Fokussierung auf den Text erschweren. Es kann auch schwierig sein, den Anfang und das Ende von Textzeilen zu finden, wenn zu viele Buchstaben auf einmal vorhanden sind.
Design im Weltraum
Bei kleinen Bildschirmen spielt der Platz eine wichtige Rolle. Denken Sie an die Elemente, auf die Ihre Benutzer stoßen können - niedriger Kontrast auf dem Bildschirm aufgrund von Beleuchtung, Auffüllen, sodass der Bildschirm nicht an den Rand des Bildschirms stößt (oder eine locker sitzende Telefonhülle), oder der Benutzer kann den Bildschirm an einem Ort scrollen, ohne versehentlich auf ein Symbol zu klicken Verknüpfung.
Durch das Hinzufügen eines kleinen Abstands zum Text - sowohl zwischen den Zeilen als auch am Rand - helfen Sie Benutzern, mit den Wörtern besser zu interagieren. Ein guter Abstand verbessert auch die Lesbarkeit, insbesondere unter ungünstigen Bedingungen. Wie bei anderen Techniken ist der richtige Abstand wichtig, und ein Übermaß an Leerraum kann den Inhaltsbereich auf dem Bildschirm beeinträchtigen oder sogar die Lesbarkeit beeinträchtigen.
Ein guter Startpunkt liegt im Bereich von 10 bis 20 Prozent. Spielen Sie mit den Zahlen als Richtlinie, wie viel Platz zwischen den Zeilen hinzugefügt werden muss. Sie können auch die Verwendung von Absatzabständen in Betracht ziehen, da Diagramme auf kleineren Bildschirmen länger aussehen. Dieser zusätzliche Raum gibt den Lesern die Wahrnehmung, dass Text nicht zu dicht ist und sich leichter lesen lässt.
Halten Sie Schriften einfach
Es gibt einen Grund, warum Sie auf mobilen Websites und in Apps so viele serifenlose Schriften sehen. Sie sind im Allgemeinen gut lesbar.
Bei der Auswahl von Schriftarten für Textblöcke im mobilen Design - denken Sie an etwas anderes als ein Logo oder ein typografisches Kunstelement - gehen Sie mit etwas Einfachem, einem Standardgewicht und einer ziemlich einheitlichen Strichstärke einher. Vermeiden Sie neue Schriftarten, komprimierte Stile und Buchstaben mit dünnen Strichen.
Mehrere Designer entscheiden sich für die Verwendung eines zweiten Satzes von Schriftarten für mobile Websites gegenüber der Desktopversion, die möglicherweise eine umfangreichere Typenpalette enthält. Obwohl dieses Konzept vor- und nachteilig ist, kann es eine Lösung sein, wenn Sie Ihr Herz auf eine bestimmte Schriftart für das Desktop-Design legen.
Seien Sie auch vorsichtig bei Typ-Tricks. Effekte wie Schatten oder Abschrägungen können bei größeren Größen großartig aussehen, können jedoch nachlassen oder die Lesbarkeit auf einem Bildschirm beeinträchtigen, der nur wenige Zentimeter breit ist. Vergessen Sie die Tricks, wenn Sie am Typenplan für Ihre mobile Website arbeiten.
Mobile Proportionen und Skala
Obwohl es keine perfekte Lösung gibt, hat Jason Pamental von H + W Design eine der besten Möglichkeiten. Er beschrieb seine moderne Maßskala für den Typecast-Blog mit CSS und einer vollständigen Zahlenskala.
Die Idee ist, dass jedes andere Textstück eines Webdesigns für ein optimiertes Webdesign-Erlebnis separat betrachtet und skaliert werden muss. Oft skalieren wir (gemeinsam als Designer) alles auf einmal.Grundlegend zeigt, warum dies nicht die beste Idee ist, anhand eines einfachen Beispiels, bei dem die Kopfzeile fast den gesamten Bildschirm einnimmt.
Kein Gespräch über mobile Web-Typografie wäre vollständig, ohne über Pamental's Stück nachzudenken. Lesen Sie es sich selbst durch und sehen Sie, wie sich seine Ideen in Ihrer Arbeit niederschlagen können.
Betrachten Sie die Funktionalität
Beim Entwerfen von mobiler Typografie ist noch zu bedenken, wie es tatsächlich funktioniert. Während einige Typen auf Desktop-Websites zum Klicken und Verknüpfen entwickelt werden, ist die mobile Typografie oft noch viel mehr. Bei manchen Texten können Benutzer einen Anruf tätigen, andere Typen enthalten einen Link, bei anderen Texten können Benutzer ein Produkt kaufen, oder Text in einer App kann Teil eines Spiels sein.
Entwerfen Sie diesen Typ so, dass Benutzer genau wissen, was er tun soll. Und machen Sie es so groß, dass Benutzer diese Aktion problemlos ausführen können. Aktive Textfelder müssen groß genug sein, um auf andere Textaktionen zu tippen und sie zu trennen, sodass jeweils nur eine Sache passiert. Jede andere Konfiguration wird Benutzer wahrscheinlich verwirren und frustrieren.
Fazit
Wie bei jedem Konstruktionsprojekt sind Richtlinien und Tipps nur ein Anlaufpunkt. Mobile Typografie ist einer der Bereiche, in die Designer erst richtig eintauchen und Trends sich entwickeln werden.
Stellen Sie sicher, dass Sie die oben genannten Ideen mit Ihren eigenen kombinieren, um optimale Ergebnisse zu erzielen. (Und wenn Sie weitere Tipps haben, würden wir sie gerne hören.) Der erste Ratschlag ist zu testen, zu testen und zu testen. Je mehr Geräte Sie Textstile verwenden, desto besser werden Sie wissen, wie es für Benutzer aussieht und funktioniert.
Bildquelle: Phil Roeder. Hinweis zu Bildern: Die Bilder in diesem Beitrag werden in der Desktopansicht und auch auf einem iPhone 5S angezeigt.