Jedes Projekt erfordert ein System und eine Hierarchie für Textelemente. Denken Sie nur an all die kleinen Textstücke, die in einem Design verwendet werden - Überschriften, Textkörper, Navigationselemente, rechtliche Informationen, Bildunterschriften usw.
Aber wie erstellen Sie diese Hierarchie, damit jedes Textelement reibungslos zum nächsten übergeht? Heute führen wir Sie Schritt für Schritt durch den Aufbau eines Systems mit Typografiehierarchie, das für nahezu jedes Designprojekt verwendet werden kann. (Und wir kombinieren die Tipps mit schönen Beispielen für großartige Typografie, um Ihnen ein wenig Inspiration zu bieten.)
1. Beginnen Sie mit Comfortable Body Copy
Während Sie mit einer coolen Schlagzeilenbehandlung beginnen möchten, ist der Startplatz tatsächlich in der Mitte. Legen Sie zunächst eine komfortable Schrift, Größe und Abstand für die Hauptteilkopie fest.
Dies sollte sinnvoll sein, da dies der Großteil des Textes im Design ist. Unabhängig davon, ob Sie eine Website oder eine Broschüre erstellen, ist dieses Konzept dasselbe. Nach Angaben des Baymard Institute beträgt die ideale Lesbarkeit für die Textkopie zwischen 50 und 60 Zeichen pro Zeile (oder Spalte). Diese Richtlinie hilft Ihnen beim Festlegen einer Skala für lesbaren Text, die verschiedene Arten von Schriftbildern berücksichtigt (z. B. reguläre versus kompakt versus Slab).
2. Bauen Sie eine Waage auf
Sobald Sie wissen, wie die Textkopie aussehen wird, können Sie eine Skalierung für alle anderen Textelemente im Design festlegen. Es kann leicht sein, bestimmte Textblöcke zu übersehen; Erstellen Sie eine Liste aller verschiedenen Verwendungen für Text in Ihrem Projekt.
- Körper Kopie
- Schlagzeilen
- Zwischenüberschriften
- Bildunterschriften
- Block Zitate
- Navigationselemente
- Fußzeileninformationen
- Legale Kopie oder Ausschlussklauseln
Erstellen Sie nun eine Skala, die die Schriftart, den Größenbereich und die Verwendung für jedes dieser Elemente bestimmt. (Und bauen Sie es in Ihr CSS für Websites oder für Stildateien für Arbeitsdokumente ein.) Es gibt verschiedene Möglichkeiten, die Skala zu erstellen, aber der Prozentsatz der Größe kann ein guter Ausgangspunkt sein. Sie können auch eine Skala basierend auf der Mathematik hinter einem Grundlinienraster oder visuell festlegen.
Hier ist eine einfache Skala zum Starten:
- Körperkopiengröße
- Schlagzeilen sind Körperkopiengröße mal 220%
- Zwischenüberschriften sind Körperkopiengröße mal 150%
- Navigationselemente haben eine Körperkopiengröße von 80%.
- Fußzeile / legale Kopie ist Körpergröße mal 80%
3. Denken Sie am größten bis zum kleinsten, von oben nach unten
Diese Regel ist ziemlich einfach: Der größte und wichtigste Text sollte oben stehen und die Größe sollte sich verringern, wenn Sie die Seite oder den Bildschirm nachlesen.
Das bedeutet nicht, dass Sie diese Regel nicht gelegentlich mit etwas Designfinesse brechen können, aber sie sollte immer der Ausgangspunkt für die Entwicklung typografischer Hierarchien sein. (Wer wird wirklich zum Ende einer Webseite für die Überschrift scrollen und dann zurück zum Anfang, um mit dem Lesen zu beginnen?)
4. Regeln für den Weltraum festlegen
Ebenso wichtig wie die Schriftgröße ist der Abstand zwischen und um sie herum. Zu den Faktoren für die Bestimmung des Raums gehören die Höhe (oder Linienhöhe), Einzüge (oder nicht), Umwicklungen und Rinnen sowie die Ausrichtung.
Berücksichtigen Sie die Proportionen der Abstände, die der für die Textgröße verwendeten Skala entsprechen. Die Größe der Leinwand ist auch hier sehr wichtig. Größere Leinwände können mit geringerem Abstand gelesen werden als kleine Leinwände. (Aus diesem Grund haben viele Projekte viel genauere Abstände für Geräte wie Mobiltelefone und strengere Regeln für Desktops.)
Wie bei Schriftgrößen sollten Abstandsregeln für das gesamte Design-Framework vorab festgelegt werden. Konsequenter, sauberer Abstand ist eines der kleinen Dinge, die einen Entwurf machen oder brechen können.
5. Legen Sie Regeln für Fett und Kursiv fest
Fett- und Kursivschrift unterscheiden sich nicht in Typelementen oder Größen. Die Verwendung ist jedoch wichtig. (Stellen Sie sich einfach vor, wie das Design aussehen wird, wenn jedes andere Wort fett ist.)
Daher sind Richtlinien für Fett- und Kursivschrift besonders wichtig. Anstatt die Größe oder den Raum zu betrachten, ist die Betrachtung jedoch viel kontextbezogener. Nutzungsspezifikationen können angeben, dass nur so viele Wörter oder Ausdrücke (oder bestimmte Wörter oder Ausdrücke) diese Behandlung erhalten können. Es ist ein häufiger Fehler, Fett und Kursiv zu überfordern. Wenn es Zweifel gibt, verwenden Sie es nicht.
6. Erstellen Sie ein? Z?
Das übliche Lesemuster hat die Form eines Z. Egal, ob Sie für eine Sprache entwerfen, die von links nach rechts oder von rechts nach links liest (drehen Sie das Z), die Benutzer lesen von einer Ecke über die Zeile bis zum Ende und dann zurück zu die Startecke und über die Linie in einem sich wiederholenden Muster.
Verwenden Sie diesen natürlichen Fluss, wenn Sie Textelemente auf dem Bildschirm platzieren. Diese Z-Form ist der Grund, warum die meisten Marken ihr Logo in der oberen linken Ecke platzieren. Es ist die erste Stelle, an der das Auge beim Lesen landet.
7. Betrachten Sie das visuelle Gewicht
Die Größe ist nicht der einzige Faktor, wenn es darum geht, wie groß ein Textelement auf dem Bildschirm aussieht. Die visuelle Gewichtung ist ebenso wichtig und kann sich auf die Erstellung einer typografischen Skala auswirken.
Schriften werden größer aussehen, wenn:
- Sie enthalten dicke Schlaggewichte
- Dazu gehören Schnörkel oder Verzierungen
- Sie sind breit
- Sie sind neuartige Basisschriftarten
- Sie haben größere x-Höhen
- Sie werden als alle Kappen verwendet
Schriften sehen kleiner aus, wenn:
- Sie sind verdichtet
- Sie umfassen leichte oder dünne Hubbreiten
- Es gibt wenig Kontrast zum Hintergrund
- Sie werden mit Kleinbuchstaben verwendet
8. Akzente schaffen
Es gibt bestimmte Wörter, die Sie hervorheben möchten, die etwas außerhalb der normalen typografischen Skala liegen. Durch das Hinzufügen eines Akzents zu Buchstaben kann es hervorgehoben werden, ohne dass die tatsächliche Größe oder Schriftart geändert werden muss.
Häufige Akzente sind:
- Farbe
- Unterstreichen
- Markieren
- Text in einer Schaltfläche oder Form
- Einfache Animation
- Ändern Sie den Fall von einem anderen Typ gleicher Größe
Das Schöne an jedem Akzent innerhalb einer Typhierarchie ist, dass es sofort Aufmerksamkeit erregt. Diese Elemente sollten sparsam für die meisten Auswirkungen und für Schlüsselelemente im Design verwendet werden.
9. Verwenden Sie den? Eye Test?
Schließlich hat jede Regel eine Ausnahme (oder zwei). Dort ist der? Sehtest? kommt herein. Schauen Sie sich die Skala auf dem Bildschirm an. Wie sieht der Text aus und fühlt sich für dich an? Gibt es einen logischen Fluss? Es ist leicht zu lesen?
Wenn es sich irgendwie anfühlt, sollten Sie Änderungen an der Skala vornehmen. Abhängig von der verwendeten Schriftart und anderen Elementen im Design - von Bildern über Farben bis hin zu Kontrast - muss der Maßstab von Ihrer Seite angepasst werden. Es ist nur ein Ausgangspunkt, wenn Sie nicht sicher sind, was Sie tun möchten.
Und fragen Sie auch nach anderen Augen. Erstellen Sie eine oder zwei Versionen mit unterschiedlichen Hierarchien, um zu sehen, welche Version die beste Antwort erhält. Design ist eine visuelle Kunst, die den "Sehtest" macht. eine ungenaue aber ziemlich zuverlässige Option.
Fazit
Wenn Sie eine typografische Hierarchie für ein Projekt festgelegt haben, können Sie dies am besten dokumentieren. Legen Sie die Skala mit CSS für Websites fest oder erstellen Sie Stildateien, wenn Sie an gedruckten Projekten arbeiten.
Wenn Sie größere Designs oder Markenzeichen erstellen möchten, legen Sie den Maßstab und die Spezifikationen schriftlich in einem Style Guide fest. Das Erstellen einer Typhierarchie erfordert etwas Nacharbeit im Backend, macht die Projektabwicklung jedoch schneller, einfacher und ganz zu schweigen davon, je weiter Sie mit den nachfolgenden Projekten voranschreiten.