7 einfache Regeln für die mobile Typografie
Sie haben wahrscheinlich gehört, dass gute Typografie unsichtbar ist, aber es ist genauer zu sagen, dass gute Typografie den Akt des Lesens mühelos macht.
Wenn das Auge entlang einer Textzeile reist, geschieht dies in Sprüngen, Sakkaden genannt; Sie lesen keine Buchstaben oder sogar Wörter, Sie lesen Schnappschüsse von Wortteilen und Ihr Gehirn füllt aus, was es zu finden erwartet. Wenn das Gehirn überrascht ist, sendet es die Augen zurück, um zu überprüfen, ob seine Annahme richtig war. Eine gute Typografie minimiert die Arbeit, die Ihre Augen leisten müssen, indem Sie eine glatte Strömung entlang der Linie erzeugen.
Mobile Geräte haben für jeden Typografen inhärente Herausforderungen: Der Platz ist begrenzt und das Umgebungslicht ist oft schlecht. Durch einfache Anpassungen der Techniken, die wir bereits für das Web verwenden, können wir die Lesbarkeit auf mobilen Geräten verbessern.
1. Gib dir Raum
Entgegen der landläufigen Meinung geht es bei Typografie nicht um die Anordnung von kleinen, krausen Linien auf einem Bildschirm; Bei der Typografie geht es im Wesentlichen um den Raum in und um sie herum.
Die Typographie ist weniger den Buchstabenformen selbst geschuldet als dem Raum, den sie einrahmen
Um das zu verstehen, hilft es zu verstehen, woher die Schriften kommen: Das Loch in der Mitte eines 'o' (und eines 'b', 'c', 'p' usw.) wird als "Zähler" bezeichnet. Bei Schriften Für die Verwendung in den Original-Druckpressen wurden sie aus Metall geschnitzt. Diese Theken wurden mit einem Metallstempel hergestellt, der geschnitzt und dann in einen Teller getrieben wurde. Die Designer des ersten Typs arbeiteten tatsächlich mit den Formen, die nicht gedruckt wurden. Die Typographie ist weniger den Buchstabenformen selbst geschuldet als dem Raum, den sie einrahmen.
Wenn wir über Hierarchie sprechen, meinen wir gewöhnlich
durch zu
und möglicherweise weiter
. Aber es gibt eine zusätzliche Hierarchie, die den Fluss einer Zeile oder eines Absatzes beeinflusst, und das ist die räumliche Hierarchie: Der Abstand zwischen den Buchstaben ist kleiner als der Abstand zwischen den Wörtern, der Abstand zwischen den Wörtern ist kleiner als der Abstand zwischen den Zeilen.
Für eine optimale Lesbarkeit auf mobilen Geräten, achten Sie besonders auf räumliche Hierarchie, die gestaltartige Gruppierung von Zeichen in Wörter, Zeilen und Absätze ist umso wichtiger bei natürlichem Licht.
2. Holen Sie sich die Maßnahme
Maß ist die Länge einer Textzeile. Oder, genauer gesagt, ist es die ideale Länge für eine Textzeile, da es selten ist, dass jede Zeile genau passt.
Das allgemein akzeptierte, ideale Maß für ein angenehmes Lesen ist etwa 65 Zeichen. Die physische Länge der Messung hängt vom Design der Schriftart, der Verfolgung (siehe unten) und dem genauen Text ab, den Sie verwenden. Die ersten 65 Zeichen dieses Artikels, gesetzt in PT Serif, sind 26,875 m breit, in Open Sans, 28,4375 m, in Ubuntu, 27,3125 m; Wenn ich Kursivschrift, Kapitälchen oder ein Dutzend anderer typografischer Details hinzugefügt hätte, würde das weiter variieren.
Es ist selten, dass 65 Zeichen bis zum Rand eines Desktop-Browsers reichen, aber auf den meisten mobilen Geräten reichen 65 Zeichen (wenn sie groß genug angezeigt werden, um lesbar zu sein) über die Grenzen des Browsers hinaus. Folglich müssen Sie bei mobilen Geräten Ihre Maßnahme reduzieren.
Es gibt keinen allgemein akzeptierten Standard für die Messung auf einem mobilen Bildschirm, aber üblicherweise haben schmale Textspalten in Zeitungen oder Zeitschriften 39 Zeichen. Da diese ideale Maßnahme über Jahrhunderte hinweg getestet wurde, eignet sie sich gut für die mobile Typografie.
3. Lockern Sie und ziehen Sie die Führung fest
Leading ist der Abstand zwischen den Zeilen, und wenn er zu fest eingestellt ist, springt die Sakkade vom Ende einer Zeile zum Anfang der nächsten, der schwer zu folgen ist. Wenn sie zu locker eingestellt sind, beginnen sich die Lücken zwischen den Wörtern aufzureihen, wodurch Flüsse entstehen, die normalerweise als Flüsse bezeichnet werden und den reibungslosen Fluss der Linie unterbrechen.
l-r: ideal führend, zu eng, zu locker.
Der übliche Standard für Leading ist etwa 1,4em, aber meiner Erfahrung nach zu eng für Bildschirme: Eine der Haupteigenschaften einer Schriftart, die gut auf dem Bildschirm funktioniert, sind große Zähler, und große Zähler erfordern ein wenig mehr, um die räumliche Hierarchie beizubehalten .
Wenn Sie diese Regel umkehren, erfordert eine kürzere Maßnahme weniger Vorlauf. Auch wenn Sie Ihr Leading wahrscheinlich ein wenig lockerer für Desktop-Stile machen, denken Sie daran, es für mobile Bildschirme zu straffen.
4. Finde den Sweet Spot
Alle Schriften haben mindestens einen Sweet Spot; eine Kombination aus der Größe, mit der sie am besten auf dem Bildschirm reproduzieren, und dem Punkt, an dem das im Browser angewendete Anti-Aliasing das Design der Schrift so wenig wie möglich verzerrt.
Der Sweet Spot ist normalerweise der Punkt, an dem die meisten Striche mit dem Pixelraster übereinstimmen - Pixelfonts, wenn Sie sich an diese erinnern, funktionieren nur, wenn sie an ihren Sweet Spot angepasst sind.
Wenn Sie eine Schriftart auf den Sweet Spot setzen, entsteht ein größerer Kontrast. Der Kontrast ist besonders wichtig beim Design für mobile Geräte, da das Blendlicht außerhalb des schwach beleuchteten Gerätelabors störend wirken kann.
Sie werden feststellen, dass geringfügige Anpassungen von "Leading" dazu führen, dass ganze Pixel gepusht und gezogen werden. Meiner Meinung nach, Kontrast Trümpfe für mobile Bildschirme führen, so wenn Sie Kompromisse führen müssen, um Zeilen auf ganzen Pixeln zu halten, tun Sie dies.
Der Standardansatz für Konstrukteure ist das Layouten mit einem Grundlinienraster, aber für Mobilgeräte müssen wir stattdessen die x-Höhe verwenden (die x-Höhe ist buchstäblich die Höhe des Kleinbuchstabens "x"). Wir wissen aus Lesbarkeitsstudien, dass das Gehirn den oberen Teil der Wörter erkennt, nicht den unteren. Um also einen größeren Sakkadenfluss zu erreichen, müssen wir sicherstellen, dass die Spitze unserer Zeichen am nächsten zu Pixeln ausgerichtet ist.
5. Verliere deinen Lappen nicht
Ein Lappen ist der Rand eines Textblocks. Das meiste von dem, was Sie lesen, ist links ausgerichtet (zumindest für lateinische Sprachen), was zu einer unregelmäßigen rechten Kante führt.
Wenn deine Augen von einem Ende einer Linie zur nächsten springen, ist das Gehirn besser in der Lage, den Winkel und die Entfernung des nächsten Sprungs zu beurteilen, wenn alle Sprünge konsistent sind - denke daran, dass es über Trittsteine läuft, es ist eine Menge schneller, wenn sie gleichmäßig verteilt sind. Aus diesem Grund sollte der linke Rand Ihres Textes flach sein, wobei jede Zeile an derselben Stelle beginnt (das genaue Gegenteil gilt für Sprachen, die von rechts nach links gelesen werden).
Daher sollten Sie nie mehr als zwei oder drei Textzeilen zentrieren.
Oft ist Text gerechtfertigt, was bedeutet, dass die Wörter auf der Linie gleichmäßig verteilt sind, so dass es auf beiden Seiten keinen Lappen gibt. (Ich vermute, dass begründeter Text in Mode ist, weil das Responsive Design Designern das Denken in Blöcken gelehrt hat.) Rechtfertiger Text führt zu inkonsistenten Leerstellen und führt im schlimmsten Fall zu einigen Wörtern in einer Zeile, die ernsthaft irritieren. Das Problem mit begründetem Text wird durch ein kürzeres Maß noch verschlimmert, so dass begründeter Text auf dem Handy nicht lesbar sein kann.
l-r: linksbündig, zentriert, ausgerichtet.
Wenn Ihnen die Ordentlichkeit wichtig ist, dann trennen Sie den Text mit einem Bindestrich, um den Lappen weicher zu machen, aber rechtfertigen Sie niemals Text auf dem Handy.
Ragged Right Text hat einen zusätzlichen Vorteil auf mobilen: Text wird oft in ablenkenden Situationen gelesen und Leser oft Blick von Text weg - um einen Stationsnamen zu überprüfen, oder einen Anruf zu beantworten. Ein Lappen erzeugt eine zufällige Form in der rechten Spalte, die dem Auge hilft, seine letzte Position zu verlagern, mit minimalem Wiederlesen.
6. Reduzieren Sie den Kontrast
Während wir den Kontrast zwischen Text und Hintergrund fördern möchten, wollen wir ihn zwischen verschiedenen Ebenen des Typs reduzieren.
Auf Mobilgeräten ist wesentlich weniger Text sichtbar und der Kontrast wird daher übertrieben
Der Grund dafür ist, dass unsere Gehirne die Wichtigkeit basierend auf dem Kontext beurteilen. Ihre Überschriften können zwei oder sogar drei mal so groß sein wie der Text Ihres Körpers auf dem Desktop, und das funktioniert, weil mehr Text auf dem Bildschirm erscheint. Auf Mobilgeräten ist wesentlich weniger Text sichtbar und der Kontrast wird daher übertrieben.
Die meisten Designer verwenden eine bestimmte Fibonacci-Sequenz, um den Text zu formatieren. Bei mobilen Geräten müssen die Verhältnisse erhöht werden, um den Kontrast der Schriftgrößen zu verringern. Wenn Sie beispielsweise den Goldenen Schnitt verwenden, um die Größe zu erhöhen, multiplizieren Sie mit 1,618. Nehmen Sie für Mobilgeräte den kleineren Anteil und multiplizieren Sie stattdessen mit 1.382.
Desktop-Bildschirme tolerieren extremere typografische Skalen als mobile Bildschirme.
7. Passen Sie die Verfolgung maßstabsgerecht an
Wenn wir unsere Schriftgrößen für Mobilgeräte anpassen, müssen wir uns der notwendigen Änderungen im Tracking bewusst sein .
(Lassen Sie mich das vorbringen, indem Sie sagen, dass Sie Kerning nicht anpassen sollten. Kerning ist der Abstand von zwei Buchstabenpaaren, so dass der Abstand zwischen ihnen optisch konsistent mit dem Abstand zwischen den anderen Zeichen ist. Kerning wurde der Schriftart hinzugefügt, als es gebaut wurde , und es hat wahrscheinlich Monate gedauert. Wenn Sie eine professionell erstellte Schriftart ausgewählt haben, dann ist es korrekt ausgeführt worden, und wenn Sie glauben, dass es nicht richtig gemacht wurde, finden Sie eine andere Schriftart.)
Tracking ist kein Kerning. Tracking ist der Buchstabenabstand, der auf alle Zeichen in der Schriftart angewendet wird. Normalerweise sollten Sie Tracking auch nicht anpassen.
Die Ausnahmen von dieser Regel gelten für großen Text, z. B. Überschriften und kleinen Text, z. B. Fußnoten. Größerer Text erfordert weniger Tracking und kleiner Text erfordert mehr Tracking. Ersteres ist auf Gruppierung zurückzuführen, letzteres soll dem Kontrast dienen. Wenn Sie Änderungen an Überschriften vorgenommen haben oder wenn Sie eine Displayschriftart verwenden, die normalerweise eine engere Verfolgung aufweist, müssen Sie möglicherweise die Verfolgung ein wenig lockern, wenn Sie sie verkleinern.
Zusammenfassung
Typografie ist ein Handwerk, mit dem Designer ein Leben lang leben, denn jeder Text, jede Schrift und jede Technologie bringt neue Herausforderungen mit sich. Es gibt keine festen Regeln, die immer in jeder Situation funktionieren.
Wenn Sie nach Lesbarkeit streben, müssen Sie drei Prinzipien beachten: einen reibungslosen Ablauf entlang von Linien, eine klare räumliche Hierarchie und einen angemessenen Kontrast. Dies gilt insbesondere für das mobile Web.
Es gibt keine Regel, die nicht mit eigenen Augen außer Kraft gesetzt werden kann, aber die Richtlinien hier dienen als idealer Ausgangspunkt für schön gestaltete Texte auf mobilen Geräten.