Macht dieser Typ mein Design fett aussehen?
Nichts kann ein Design wie eine Typografie ruinieren, die nicht passt. Ob es zu groß (oder zu klein) ist, ist eine falsche Skalierung ein großes Problem.
Es ist ein Problem für mehr Designs, als Sie vielleicht denken. Zu häufig besuchen Sie eine Website, auf der der Typ schön auf einem Desktop-Browser gerendert wird, nur um später von einem Telefon wieder zu besuchen und es schwierig zu lesen. Es passiert ständig.
Das Problem ist, dass der Typ nicht wirklich für jedes Gerät skaliert wurde. Es ist ein absolut vermeidbares Problem, wenn Sie eine typografische Skala für Projekte betrachten.
Was ist eine typografische Skala?
Eine visuelle typografische Skala kapselt die Größen, den Raum und die Proportionen von Typelementen relativ zueinander in einem Projekt ein. Dies umfasst alles vom Haupttext-Stil bis zu Überschriften, Unterüberschriften, Bildunterschriften und jedem anderen Textelement.
Die Skala hilft dabei, Größe und Platzierung der Textelemente in Beziehung zueinander zu bestimmen. Insbesondere für Webdesign entspricht die Skala für den visuellen Typ oft den Tags in Ihrem CSS (wie h1, h2, h3, p usw.).
Eine Typenskala hilft dabei, Harmonie und Rhythmus im Design zu schaffen. Es hält Sie auch von stilistischen Problemen fern, da Textelemente mit CSS-Elementen korrespondieren, so dass jeder Teil des Designs dieselben Elemente und Konsistenz verwendet.
Die Skala sollte auf der Größe des Textkörpers basieren. (Legen Sie immer zuerst eine Schriftart und eine Schriftgröße fest). Dann bauen Sie die Skala um diese Haupttypographie herum. Nicht sicher, wo ich anfangen soll? Google hat ein solide Empfehlung :
- Verwenden Sie eine Grundschriftgröße von 16 CSS-Pixeln. Passen Sie die Größe basierend auf den Eigenschaften der verwendeten Schrift an.
- Verwenden Sie Größen relativ zur Basisgröße, um den typografischen Maßstab zu definieren.
- Text benötigt vertikalen Abstand zwischen Zeichen; Die allgemeine Empfehlung ist, die Standard-Zeilenhöhe des Browsers von 1,2 em zu verwenden.
- Schränken Sie die Anzahl der verwendeten Schriften und den typografischen Maßstab ein.
Schaffen Sie Harmonie und Rhythmus
Eine Typskala hilft den Benutzern nicht nur dabei, sich durch die Kopie zu bewegen, sie erzeugt auch Harmonie und Rhythmus für den Textfluss. Dies ist auf jedem Gerät wichtig.
Also, wo fängst du an?
UX Matters hat einige der besten verfügbaren Forschungsergebnisse auf dem Minimum Textgrößen nach Gerät . Beachten Sie, dass es sich hierbei um Mindestgrößen handelt. Wenn Sie die Textgröße des Textes weiter vergrößern (wie auch der Zeilenabstand), sollten Sie größere Punktgrößen in Betracht ziehen. Steven Hoober empfiehlt, mindestens 40 Prozent größer als die empfohlenen Mindestwerte zu starten. Darüber hinaus können erweiterte Inhaltsstile bis zu 80 Prozent über das Minimum hinausgehen, aber Sie sollten auch bei außergewöhnlich großen Typen vorsichtig sein.
| Gerätetyp | Mindestgröße | 40% Empfehlung (angepasst für einfache Verwendung) | 80% Maximum (angepasst für einfache Verwendung) |
| Kleines Telefon | 4 | 5.6 (6) | 7.2 (7.5) |
| Großes Telefon | 6 | 8.4 (8.5) | 10.8 (11) |
| Phablet | 7 | 9.8 (10) | 12.6 (13) |
| Tablette | 8 | 11.2 (11.5) | 14.4 (14.5) |
| Laptop / Desktop | 10 | 14 (14) | 18 (18) |
Sobald die Textgröße für den Text festgelegt wurde, können Sie festlegen, wie die unterstützenden Textelemente skaliert werden sollen. Es gibt eine schöne Kunst und der Sehtest ist oft ein guter Anfang.
Es gibt fast keine Überschrift, die zu groß ist. Sagen Sie, was Sie sagen und Größe müssen, um die Wörter im Raum zu skalieren. Eine zweizeilige Überschrift fühlt sich größer als eine Zeile an, auch wenn der Text dieselbe Größe hat.
Der einfachste Weg, über die Skalierung für Überschriften und andere größere Testelemente nachzudenken, besteht darin, basierend auf dem Fließtext in Prozent zu arbeiten. Während jeder Designer einen anderen Ausgangspunkt hat, ist 250 Prozent größer als der Fließtext ein guter Ballpark für die Überschrift; 150 Prozent für h2, 75 Prozent für h3 und 50 Prozent für Elemente wie Blockzitate. (Dies ist keine Regel, nur ein Ausgangspunkt.)
Hier sind die Prozentangaben und nicht die Satzgrößen wichtig: Sobald Sie die Größe des Körpertyps eingestellt haben, passen die Prozente die Größen entsprechend an, unabhängig von der Bildschirmgröße. Jedes Typelement ist relativ zum Körpertyp.
Zeichen- und Abstandsrichtlinien
Es gibt einige andere Richtlinien, auf die Designer achten, wenn es um das Tippen auf dem Bildschirm geht. Wenn es um Abstände geht, war es eine Faustregel, Zeichen pro Zeile zu betrachten, um die Lesbarkeit zu gewährleisten.
- Desktop und große Geräte: 60 bis 75 Zeichen pro Zeile
- Telefone und kleine Geräte: 35 bis 40 Zeichen pro Zeile
Beachten Sie, dass die Lesbarkeit auf kleineren Bildschirmen auf weniger Zeichen (größerem Text) basiert.
Dieselbe Idee gilt auch für den Abstand. Wenn die Bildschirmgröße begrenzt ist, benötigen Sie mehr Platz zwischen den Textzeilen, damit Benutzer Inhalte leichter lesen und scannen können. Ziehen Sie bei kleineren Geräten 25 Prozent mehr Zeilenabstand in Betracht als bei der Desktop-Typografie.
Die zusätzliche Größe und der zusätzliche Abstand erleichtern das enge oder knirschende Gefühl, das Benutzer fühlen können, wenn sie versuchen, auf kleineren Geräten zu lesen. Da die Leinwand klein ist, ist der Lesefluss und die Lesbarkeit wichtig, damit die Benutzer scrollen können.
Tipps, um loszulegen
Es gibt viele Möglichkeiten, eine typografische Skala zu erstellen und sicherzustellen, dass der Text Ihr Design nicht fett erscheinen lässt. Wie Sie vorgehen, hängt wahrscheinlich von Ihrem Komfortniveau mit Code und Entwicklung neben dem Design ab.
Die beste Option ist ein responsives Design mit Medienabfragen. Dies ist die Designer-Entwickler-Option, die die höchste Kontrolle über Textspezifikationen bietet. (Weitere Informationen finden Sie oben in den Google-Empfehlungen.)
Eine andere Route besteht darin, verschiedene Versionen zu entwerfen. Obwohl dies ein ziemlich veraltetes Konzept ist, gibt es immer noch Orte, an denen mobile URLs und Desktop-URLs für ihre Websites verwendet werden. Es wird in den meisten Fällen nicht empfohlen, aber für einige Websites, bei denen das Design dramatisch anders ist oder Nutzer unterschiedliche Dinge erleben, kann dies eine Option sein.
Die einfache Möglichkeit ist, mit einem Thema für Ihre Website zu beginnen. Stellen Sie sicher, dass Sie sich für eine reaktionsschnelle Option entscheiden. Wenn Sie ein hochwertiges responsives Theme verwenden, wird das meiste Rätselraten für Sie genommen. Alles, woran Sie wirklich denken müssen, ist die Textgröße. Stellen Sie sicher, dass Sie alles überprüfen, um sicherzustellen, dass die mobilen Schriftgrößen Ihren Standards entsprechen.
3 Werkzeuge zum Erstellen einer Typenskala
Es gibt eine Reihe von Tools, die Ihnen helfen, die genauen Auswirkungen einer visuellen Typografie-Skala zu sehen. Hier sind einige der besten und benutzerfreundlichsten Optionen.
- Geben Sie Maßstab ein : Geben Sie Text ein und spielen Sie mit Optionen wie Größe, Maßstab und Schriftart direkt auf dem Bildschirm; grad das CSS oder bearbeiten Sie den Code direkt aus dem Tool;
- Modulare Skala : Die Skala funktioniert wie eine Regel, um Größen für den Typ zu bestimmen; Laden Sie dann die Ergebnisse als Sass- oder JS-Plugin herunter oder sehen Sie sie auf dem Bildschirm.
- Golden Ratio Typografie-Rechner : Das Tool optimiert Größe, Zeilenhöhe, Breite und Zeichen pro Zeile anhand des Goldenen Schnitts
Fazit
Die richtige typografische Skala hält Ihr Design trim und schlank. Es ist die zusätzliche Harmonie, die Benutzer vielleicht nicht verstehen, aber zur allgemeinen Lesbarkeit und Benutzerfreundlichkeit beiträgt.
Es ist wahrscheinlich, dass die Skala aus ist, wenn das Design "einfach nicht richtig aussieht". Unsachgemäß dimensionierter Typ kann schwer zu lokalisieren sein, ist aber oft ein Ort, an dem man schauen kann, wenn etwas über ein Design aus dem Gleichgewicht ist. Spielen Sie mit ein paar verschiedenen Optionen für die Skalierung, bevor Sie sich auf etwas festlegen, und denken Sie daran, dass der Trend gerade für einen Typ ist, der ein bisschen größer ist als in der Vergangenheit.