Eines der wichtigsten Elemente für Personen, die das betrachten, was Sie entwerfen, ist der Typ. Es muss klar und lesbar sein und die Benutzer durch ein Design von den wichtigsten Elementen zu den wenigsten lenken.
Und das erklärt kurz die Typografie-Hierarchie. Um die Kunst des Typs wirklich beherrschen zu können, müssen Sie wissen, wie Sie den Typ im gesamten Design überlagern, um eine maximale Wirkung zu erzielen. Lesen Sie weiter, um zu lernen, wie Sie die Typografiehierarchie beherrschen und in jedem Projekt einen effektiven Typ erstellen können.
Was ist typografische Hierarchie?
Die typografische Hierarchie ist eine andere Form der visuellen Hierarchie, eine Unterhierarchie an sich in einem gesamten Entwurfsprojekt. In der typografischen Hierarchie werden die Buchstaben so dargestellt, dass die wichtigsten Wörter mit der größten Auswirkung angezeigt werden, sodass Benutzer Text nach Schlüsselinformationen durchsuchen können.
Ohne typografische Hierarchie würden alle Buchstaben, jedes Wort und jeder Satz eines Designs gleich aussehen. Können Sie sich vorstellen, etwas zu lesen, wo alles die gleiche Schriftart und Größe und Farbe hat? Wo fängst du an Woher wissen Sie, worauf es ankommt?
Die typografische Hierarchie schafft einen Kontrast zwischen den Elementen. Designer erreichen dies durch die Verwendung von Schriftarten, Größe, Gewicht, Groß- und Kleinbuchstaben, Fett- oder Kursivschrift, Ausrichtung und Farbe. Kombinationen dieser Entwurfswerkzeuge werden verwendet, um einen Typ zu erstellen, der in verschiedene Ebenen fällt.
Grundstufe
Die primäre Ebene der Typografie ist alles vom großen Typ. Es sind Schlagzeilen und Decks - auch bekannt als? Möbel? - das zieht Leser in das Design. Dies ist der größte Typ im Design (es sei denn, Sie verwenden typografische Grafiken).
Sekundäre Ebene
Die sekundäre Ebene der Typografie sind die Nuggets von durchsuchbaren Informationen, die dem Leser helfen, beim Design zu bleiben. Dazu gehören Elemente wie Unterüberschriften, Bildunterschriften, Anführungszeichen, Infografiken und andere kleine Textblöcke, die der primären Textebene Informationen hinzufügen. Das Design dieser Textblöcke ist groß, aber in der Regel viel kleiner als die Beschriftung in der primären Ebene der Typografie.
Tertiärstufe
Die Tertiärstufe der Typografie ist der Haupttext Ihres Designs. Es ist oft einer der kleinsten Typen im Design, es muss jedoch groß genug sein, um von allen potenziellen Benutzern vollständig gelesen werden zu können. Die Schrift sollte in Design, Abstand und Gesamtnutzung einfach und konsistent sein.
Andere Ebenen
Die anderen Ebenen der Typografie umfassen auf Tertiärebene angewandte Effekte für kleine Einflussbereiche. Effekte wie Fettdruck, Kursivschrift, Unterstreichung und Farbe können auf bestimmte Bereiche des Haupttextes aufmerksam machen. Diese Effekte lassen sich am besten auf Text derselben Größe und Schrift anwenden, die im Tertiärbereich verwendet werden. Effekte werden sparsam und für wenige Wörter nacheinander verwendet. Beispiele für andere Ebenen sind unterstrichene Links, fette Wörter für Auswirkung oder Kursivschrift oder Farbe für Hervorhebungen.
Hierarchie in Druckprojekten
Die visuelle Hierarchie in Druckprojekten ist streng visuell. Verwenden Sie Größe, Farbe und andere Effekte, um bestimmte Bits des Typs groß und wichtiger erscheinen zu lassen. Entsprechend müssen Sie nur skalieren, um einen guten Start zu haben.
Wenn Sie sich das Schritt-für-Schritt-Beispiel oben ansehen, können Sie deutlich verschiedene Ebenen der typografischen Hierarchie sehen und wie das Design lesbarer und ansprechender wird. Sie können dieselbe Technik auf jedes Konstruktionsprojekt anwenden, indem Sie die Schlüsselbereiche hervorheben.
Erstelle es
Es gibt verschiedene Möglichkeiten, wie Sie eine Hierarchie erzeugen können. Hier sind einige der häufigsten Techniken:
- Schriftauswahl: Weitere interessante Schriften können größer erscheinen und das Auge schneller ziehen als diejenigen mit weniger visuellen Intrigen. Achten Sie bei der Verwendung von Neuheiten, Skripten oder aufwendigen Schriftarten auf Lesbarkeitsprobleme und stellen Sie sicher, dass der Typ sehr groß ist.
- Größe: Es ist fast selbstverständlich, aber je größer der Typ ist, desto schneller wird der Blick darauf gerichtet. Die Schriftgröße sollte mit der Wichtigkeit beim Lesen des Textes korrelieren.
- Gewicht: Die Dicke der Buchstaben kann dazu führen, dass Text größer (fett, dicke Striche) oder kleiner (dünne oder komprimierte Schriftarten) dargestellt wird.
- Groß- und Kleinbuchstaben: Sie haben gehört, dass das Versenden einer E-Mail in Großbuchstaben so ist, als würde man jemanden anschreien. Das gleiche gilt für alle Caps im Design. Seien Sie vorsichtig beim Gebrauch. Großbuchstaben werden größer dargestellt und treten in den Vordergrund, während Kleinbuchstaben kleiner erscheinen und oft in den Hintergrund treten.
- Fett gedruckt: Fettschrift ist ein guter Schwerpunkt für ein einzelnes Wort oder einen Satz. Es funktioniert besonders gut im Tertiärbereich.
- Kursivschrift: Kursive Schrift kann ein einzelnes Wort oder einen Satz auf weniger dramatische und subtilere Weise hervorheben als Fettdruck. Es funktioniert besonders gut im Tertiärbereich.
- Orientierung: Wenn Sie Buchstaben auf die Seite drehen, auf den Kopf stellen oder eine andere Ausrichtung haben, die horizontal ausgerichtet ist, kann dies sofort ins Auge fallen, da sie anders angeordnet werden als erwartet. Dies kann für kurze Wörter oder Ausdrücke in der primären Textebene gut funktionieren.
- Farbe: Das Hinzufügen von Farbe zu Buchstaben, die normalerweise keine Farbe haben, erzeugt ein spezifisches und unmittelbares Interesse. Dieser Effekt kann auf jeder Ebene des Texts funktionieren, sollte jedoch bewusst gewählt werden, um keine Lesbarkeitsbedenken oder Verwirrung zu verursachen.
- Platzierung: Wo sich Text auf der Zeichenfläche befindet, kann auch eine Hierarchie erstellt werden. Normalerweise lesen Sie von oben nach unten (eine natürliche Hierarchie), dies kann jedoch durch Verwendung einiger der obigen Techniken geändert werden.
Hierarchie in digitalen Projekten
Alle Werkzeuge, die Sie in Druckprojekten verwenden, gelten auch für digitale Projekte, mit einigen Ergänzungen. Die digitale typografische Hierarchie muss auch die Berücksichtigung von HTML bei der Erstellung des Web-Typs berücksichtigen.Diese zusätzliche Denkstufe stellt sicher, dass Ihre visuellen Ebenen auch für andere Benutzer auf dem Bildschirm angezeigt werden.
Erstelle es
Stellen Sie sicher, dass Sie bei der Bearbeitung von Projekten, die online veröffentlicht werden, gängige Konventionen verwenden, einschließlich Kopf-, Text- und Fettformatvorlagen. Jede dieser häufig verwendeten Stildefinitionen liegt im HTML-Bereich im Bereich carrots ().
- Titel (Titel): Definiert den Dokumenttitel für Webcrawler und Benutzer.
- Körper Körper): Definiert den Nachrichtentext in einem Dokument.
- Kopfzeilen (h1 bis h6): Definiert verschiedene Ebenen von Kopfzeilenstilen. H1 ist normalerweise der größte und wichtigste, der sich durch H6 bewegt. Sie müssen nur so viele verwenden, wie Sie möchten.
- Fett (stark): Definiert schwereren, wichtigeren Text.
- Kursiv (em): Definiert Text mit einer Neigung zur Hervorhebung.
Hierarchie und Verwendbarkeit
Bei mobilen Anwendungen müssen Sie die visuelle typografische Hierarchie, die typografische HTML-Hierarchie und die Verwendbarkeit in der Typografiehierarchie berücksichtigen. Text muss nicht nur gut aussehen und funktionieren, sondern auch so gestaltet sein, dass die Benutzer wissen, was mit dem Text zu tun ist, und dass er wie erwartet interagiert.
Diese aktionsbasierte Typografie enthält einige wichtige Dinge für Designer. Der Typ muss groß genug zum Tippen sein, so dass jeder anpassbare Artikel klar definiert ist und die verwendbaren Elemente über eine Art visuelle Definition verfügen (z. B. eine Schaltfläche).
Erstelle es
Wenn Sie eine verwendbare typografische Hierarchie erstellen, müssen Sie die Typelemente, mit denen Benutzer interagieren, von Elementen unterscheiden, die sie nicht verwenden, und voneinander. Wichtige Überlegungen sind:
- Platz: Geben Sie jedem Element, das berührt oder berührt werden soll, ausreichend Platz. Berücksichtigen Sie die Größe des Raums und den Raum, den ein Finger zum Berühren benötigt. Benutzer können schnell frustriert werden, wenn type so nah ist, dass auf das falsche Element geklickt wird.
- Farbe: Erstellen Sie eine Farbpalette für die Benutzerfreundlichkeit. Stellen Sie sicher, dass jedes Wort, das für die Berührung bestimmt ist, eine andere Farbe hat als der Haupttext.
- Schatten: Schlagschatten sind ein allgemeiner Indikator für eine Schaltfläche, die auf irgendeine Weise gedrückt werden kann.
- Grenzen: Erwägen Sie das Hinzufügen von Rahmen zu unabhängigen Elementen, mit denen Benutzer interagieren sollen. Stellen Sie sicher, dass sie vom Hintergrund abgesetzt sind. (Trendy Ghost Buttons sind ein gutes Beispiel dafür, wie im obigen Beispiel der Spacecraft-Website.)
- Animation: Das Verschieben von Text ist zwar schwierig zu verwenden, kann jedoch ein schneller Weg sein, um auf bestimmte Wörter aufmerksam zu machen.
- Richtung: Denken Sie daran, den Benutzern mitzuteilen, was auf dem Bildschirm zu tun ist, vom Tippen auf das Blättern zu den Handlungsaufforderungen.
Fazit
Wahrscheinlich entwerfen Sie mit einer Art typografischer Hierarchie, ohne darüber nachzudenken. Aber wenn man bedenkt, wie sich der Typ im großen Bild ausrichtet, kann dies das Gesamtdesign verbessern.
Verwenden Sie die typografische Hierarchie, um Akzente zu setzen, Einfluss zu nehmen und Handlungsaufforderungen zu erstellen, auf die Benutzer schnell reagieren können. Denken Sie daran, über Lesbarkeit, Lesbarkeit und Gesamtverständnis nachzudenken, wenn Sie eine Entscheidung über Schrift, Größe und Auswirkungen treffen. Ihre Leser (oder Benutzer) werden es Ihnen danken.