9 Tipps für eine bessere typografische Hierarchie
Jedes Projekt erfordert ein System und eine Hierarchie für Textelemente. Denken Sie nur an all die kleinen Textteile, die in einem Design verwendet werden - Überschriften, Textkopien, Navigationselemente, rechtliche Informationen, Bildunterschriften usw.
Aber wie erstellen Sie diese Hierarchie, damit jedes Textelement reibungslos zum nächsten fließt? Heute führen wir Sie Schritt für Schritt durch den Aufbau eines Systems der Typografie-Hierarchie, das für fast jedes Designprojekt verwendet werden kann. (Und wir kombinieren die Tipps mit wunderschönen Beispielen großartiger Typografie, um Ihnen dabei zu helfen, ein bisschen Inspiration zu sammeln.)
Entdecken Sie Envato-Elemente
1. Beginnen Sie mit Comfortable Body Copy
Während Sie vielleicht mit einer coolen Schlagzeilenbehandlung beginnen möchten, befindet sich der Startpunkt tatsächlich in der Mitte. Stellen Sie zuerst eine komfortable Schriftart, Größe und Abstand für die Hauptteilkopie ein.
Dies sollte sinnvoll sein, da dies den größten Teil des Textes im Design ausmacht. Unabhängig davon, ob Sie eine Website oder eine Broschüre erstellen, ist dieses Konzept dasselbe. Laut dem Baymard Institute liegt die ideale Lesbarkeit für Textkopien zwischen 50 und 60 Zeichen pro Zeile (oder Spalte). Mithilfe dieser Richtlinie können Sie eine Skala für lesbaren Text festlegen, die verschiedene Arten von Schriftarten berücksichtigt (z. B. regulär oder komprimiert oder Platte).
2. Erstellen Sie eine Waage
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 Verwendungszwecke für Text in Ihrem Projekt.
- Körper Kopie
- Schlagzeilen
- Unterüberschriften
- Bildunterschriften
- Block Zitate
- Navigationselemente
- Fußzeileninformationen
- Rechtliche Kopie oder Haftungsausschluss
Erstellen Sie nun eine Skala, die Schriftart, Größenbereich und Verwendung für jedes dieser Elemente vorgibt. (Und bauen Sie es in Ihr CSS für Websites oder Stildateien für Arbeitsdokumente ein.) Es gibt verschiedene Möglichkeiten, die Skalierung zu erstellen, aber der Prozentsatz der Größe kann ein guter Ausgangspunkt sein. Sie können auch eine Skala erstellen, die auf der Mathematik hinter einem Grundlinienraster oder visuell basiert.
Hier ist eine einfache Skala, um zu beginnen:
- Größe der Körperkopie
- Überschriften sind Körperkopiengröße mal 220%
- Unterü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 von oben nach unten, 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 lesen.
Das heißt nicht, dass Sie diese Regel nicht ab und zu mit etwas Designfinesse brechen können, aber es sollte immer der Ausgangspunkt für die Entwicklung einer typografischen Hierarchie sein. (Wer wird wirklich zum Ende einer Webseite scrollen, um die Überschrift zu erhalten, und dann zurück zum Anfang, um mit dem Lesen zu beginnen?)
4. Regeln für den Weltraum festlegen
Genauso wichtig wie die Größe der Beschriftung ist der Abstand zwischen und um sie herum. Zu den Faktoren für die Bestimmung des Raums gehören die Führung (oder Linienhöhe), Einrückungen (oder nicht), Umhüllungen und Rinnen sowie die Ausrichtung.
Berücksichtigen Sie Abstandsproportionen, die die für die Textgröße verwendete Skala widerspiegeln. Auch hier ist die Größe der Leinwand sehr wichtig. Größere Leinwände sind mit engerem Abstand lesbar als kleine Leinwände. (Aus diesem Grund haben viele Projekte viel lockerere Abstandsspezifikationen für Geräte wie Mobiltelefone und strengere Regeln für Desktops.)
Genau wie bei Schriftgrößen sollten Abstandsregeln für das gesamte Design-Framework im Voraus festgelegt werden. Gleichmäßiger, sauberer Abstand ist eines der kleinen Dinge, die ein Design machen oder brechen können.
5. Legen Sie Regeln für Fett und Kursiv fest
Fett und kursiv sind zwar keine unterschiedlichen Schriftelemente oder Größen, die Verwendung ist jedoch wichtig. (Stellen Sie sich einfach vor, wie das Design aussehen wird, wenn jedes andere Wort fett ist.)
Aus diesem Grund sind Richtlinien für Fettdruck und Kursivschrift besonders wichtig. Anstatt Größe oder Raum zu betrachten, ist die Überlegung viel kontextbezogener. Verwendungsspezifikationen können besagen, dass nur so viele Wörter oder Phrasen (oder bestimmte Wörter oder Phrasen) diese Behandlung haben können. Es ist ein häufiger Fehler, Fett und Kursiv zu verwenden. Wenn es Zweifel gibt, benutze es nicht.
6. Erstellen Sie ein "Z"
Das übliche Lesemuster hat die Form eines Z. Unabhängig davon, ob Sie eine Sprache entwerfen, die von links nach rechts oder von rechts nach links liest (drehen Sie das Z), lesen Benutzer von einer Ecke über die Linie bis zum Ende und dann zurück zu die Startecke und über die Linie in einem sich wiederholenden Muster.
Verwenden Sie diesen natürlichen Ablauf, 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 der erste Punkt, an dem 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. Das visuelle Gewicht ist ebenso wichtig und kann sich auf die Art und Weise auswirken, wie Sie eine typografische Skala erstellen.
Schriften sehen größer aus, wenn:
- Sie enthalten dicke Strichgewichte
- Dazu gehören Schnörkel oder Verzierungen
- Sie sind breit
- Sie sind neuartige Basisschriften
- 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 Strichbreiten
- Es gibt wenig Kontrast zum Hintergrund
- Sie werden mit Kleinbuchstaben verwendet
8. Akzente setzen
Es gibt bestimmte Wörter, die Sie hervorheben möchten und die etwas außerhalb der normalen typografischen Skala liegen. Durch Hinzufügen eines Akzents zur Beschriftung kann sie hervorgehoben werden, ohne dass die tatsächliche Größe oder Schriftart angepasst werden muss.
Gemeinsame Akzente sind:
- Farbe
- Unterstreichen
- Markieren
- Text in einer Schaltfläche oder Form
- Einfache Animation
- Ändern Sie den Fall von einem anderen Typ derselben Größe
Das Schöne an jedem Akzent innerhalb einer Typhierarchie ist, dass er sofort Aufmerksamkeit erregt. Diese Elemente sollten sparsam für die größte Wirkung und für Schlüsselelemente im Design verwendet werden.
9. Verwenden Sie den "Sehtest"
Schließlich hat jede Regel eine Ausnahme (oder zwei). Hier kommt der „Sehtest“ ins Spiel. Schauen Sie sich einfach die Skala auf dem Bildschirm an. Wie sieht der Text für Sie aus und fühlt er sich an? Gibt es einen logischen Ablauf? Es ist leicht zu lesen?
Wenn es sich in irgendeiner Weise schlecht anfühlt, sollten Sie Anpassungen an der Waage vornehmen. Abhängig von der verwendeten Schriftart und anderen Elementen im Design - von Bildern über Farben bis hin zu Kontrasten - 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 festzustellen, welche Version die beste Antwort erhält. Design ist eine visuelle Kunst, die den „Sehtest“ zu einer ungenauen, aber ziemlich zuverlässigen Option macht.
Fazit
Sobald Sie eine typografische Hierarchie für ein Projekt festgelegt haben, können Sie es am besten dokumentieren. Richten Sie die Skalierung mit CSS für Websites ein oder erstellen Sie Stildateien, wenn Sie an gedruckten Projekten arbeiten.
Geben Sie für größere Designs oder Markenzeichen den Maßstab und die Spezifikationen schriftlich in einen Styleguide ein. Das Erstellen einer Typhierarchie erfordert ein wenig Arbeit am Back-End, macht den Projektabschluss jedoch schneller, einfacher und konsistenter, wenn Sie mit nachfolgenden Projekten fortfahren.
