So strukturieren Sie eine effektive typografische Hierarchie

Die effektive Organisation von Inhalten innerhalb eines Designs, sodass sie leicht zu verstehen und zu konsumieren sind, ist eine der wichtigsten Aufgaben eines Designers. Und da ein Großteil der Inhalte, mit denen Designer arbeiten, textbasiert ist, ist das Erstellen einer effektiven typografischen Hierarchie eines der wichtigsten Dinge, die ein Designer lernen kann.

Während das Üben und Experimentieren mit dem Erstellen einer effektiven Hierarchie der beste Weg ist, um die Fähigkeit wirklich zu beherrschen, gibt es eine Reihe von Richtlinien, die Designer zuerst lernen sollten, bevor sie sich selbstständig machen. Schließlich ist es unmöglich, die Regeln effektiv zu brechen, ohne vorher zu wissen, was sie sind.

Was ist typografische Hierarchie?

Anfänger unterschätzen manchmal die Notwendigkeit, eine Typografiehierarchie zu verwenden. Doch schauen Sie sich dieses Beispiel an:

Auf beiden Seiten werden die gleichen Informationen übermittelt, aber auf der linken Seite ist nicht zu erkennen, dass es eine Überschrift, eine Unterüberschrift und einen Haupttext gibt. Auf der rechten Seite ist sofort ersichtlich, dass es eine Hierarchie der bereitgestellten Informationen gibt.

Die typografische Hierarchie zeigt dem Leser, auf welche Informationen er sich konzentrieren muss – welche am wichtigsten sind und welche lediglich die Hauptpunkte unterstützen.

Es gibt eine Vielzahl von Dingen, die die typografische Hierarchie im Web ausmachen. Diese schließen ein:

Größe. Größe ist im Allgemeinen das erste, woran sich neue Designer wenden, wenn sie versuchen, eine typografische Hierarchie zu erstellen. Und das aus gutem Grund: Es ist für den Leser sofort und leicht erkennbar. Größer = wichtiger, kleiner = weniger wichtig. Aber Größe kann zu einer Krücke werden, wenn es so viele andere Möglichkeiten gibt, Hierarchien zu schaffen.

Gewicht. Eine Schriftart fetter oder dünner zu machen, ist eine weitere leicht erkennbare Möglichkeit, eine Hierarchie zu erstellen, die auch von Nicht-Designern leicht erkennbar ist.

Farbe. Farbe wird oft als Möglichkeit übersehen, eine Hierarchie zu erstellen, aber es ist eine fantastische Option. Selbst die Verwendung hellerer und dunklerer Schattierungen einer bestimmten Farbe kann eine deutlichere Hierarchie schaffen. Das Schaffen von mehr Kontrast zwischen Schrift und Hintergrund kann auch zur typografischen Hierarchie beitragen.

Kontrast. Neben kontrastierenden Farben ist auch der Kontrast zwischen verschiedenen Schriftgrößen, Gewichten und Stilen der Schlüssel zur Schaffung einer typografischen Hierarchie. Ein Unterschied von nur ein oder zwei Punkten in der Schriftgröße erzeugt keinen ausreichenden Kontrast, um die Hierarchie für die meisten Benutzer deutlich zu machen. Stattdessen sollten Designer leicht unterscheidbare Größen, Gewichte und Stile verwenden, um auf einfache Weise einen Kontrast zwischen Dingen wie Überschriften oder Fließtext zu erzeugen.

Fall. Während die Großschreibung von Fließtext im Allgemeinen aus Gründen der Lesbarkeit keine gute Idee ist, kann die Verwendung von Großbuchstaben in Überschriften oder Unterüberschriften helfen, verschiedene Überschriften oder andere Typen zu unterscheiden.

Position und Ausrichtung. Die Positionierung von Überschriften und Unterüberschriften, zusammen mit anderen Schriften, die ein Designer hervorheben möchte, kann einen großen Einfluss darauf haben, wo die Schrift innerhalb einer Hierarchie liegt. Zentrierungstyp zum Beispiel neigt dazu, ihn hervorzuheben. Das Festlegen von Text außerhalb der regulären Ränder einer Seite kann diesen Typ auch innerhalb der Hierarchie einer Seite hervorheben.

So erstellen Sie eine typografische Hierarchie (und organisieren Ihr Design visuell)

Designer haben viele Optionen, wenn es darum geht, eine typografische Hierarchie zu erstellen. Aber nur zu wissen, was zum Erstellen einer Hierarchie gehört, hilft Designern nicht unbedingt dabei, eine effektive Hierarchie zu erstellen.

Eines der ersten Dinge, die zu berücksichtigen sind, ist, wie viele Hierarchieebenen ein Design haben sollte. Als allgemeine Regel sollte jedes Design drei Hierarchieebenen umfassen: Überschrift, Unterüberschrift und Fließtext. Von dort aus ist es Sache des Designers, zusätzliche Ebenen zu berücksichtigen, die möglicherweise erforderlich sind. Dazu können Bildunterschriften, zusätzliche Unterüberschriften, Zitate und Metainformationen (für Dinge wie Autoren oder Datumsangaben zu einem Artikel) gehören.

Von dort aus ist es wichtig, herauszufinden, wie man zwischen den verschiedenen Teilen der Hierarchie unterscheidet. Es sollte selbstverständlich sein, aber Überschriften sollten auffälliger sein als Unterüberschriften, die auffälliger sein sollten als Fließtext. Bildunterschriften sollten im Allgemeinen weniger auffällig sein als Fließtext, und Anführungszeichen sollten sich irgendwo zwischen Fließtext und Unterüberschriften befinden.

Geben Sie Größe ein

Es gibt traditionelle typografische Skalen, um Designern den Einstieg zu erleichtern. Dies ist jedoch nur ein Ausgangspunkt, und Designer sollten sich frei fühlen, mit verschiedenen Gewichten und Stilen zu experimentieren und dabei von diesen traditionellen Skalen abzuweichen. Die meisten basieren ihre Skalierung auf der Größe des Fließtextes und erweitern sich von dort aus.

Die klassische typografische Skala aus The Elements of Typographic Style ist den meisten Designern vertraut, da sie in der Regel die Standardwerte sind, die die meisten Textverarbeitungsprogramme bei der Auswahl von Schriftgrößen anbieten. Die Skala ist:

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60 und 72.

Es gibt weitere Beispiele für typografische Maßstäbe, die verschiedenen mathematischen Gleichungen zur Berechnung zunehmender Größen folgen.

Designer neigen dazu, standardmäßig eine Textgröße von 12 Punkt zu verwenden, aber eine Erhöhung auf 14 oder 16 (oder sogar bis zu 24) kann je nach verwendeter Schriftart zu einer besseren Lesbarkeit führen. Die persönliche Website von Jeffrey Zeldman verwendet beispielsweise eine 24-Pixel-Schriftgröße für den Fließtext, während Vogue.com eine 19-Pixel-Fließtextgröße verwendet.

Vor der endgültigen Festlegung des tatsächlichen Maßstabs sollten Designer jedoch sicherstellen, dass die im Design verwendeten Schriftarten fertiggestellt sind. Unterschiedliche Schriftarten können erheblich größer oder kleiner erscheinen, selbst wenn sie technisch gesehen die „gleiche“ Größe haben.

Auswählen von aufeinander abgestimmten Schriftarten

Was ein „professionelles“ Design oft von dilettantischeren Bemühungen unterscheidet, ist die Kombination verschiedener Schriftarten. Das effektive Kombinieren von Schriftarten ist teils Bauchgefühl und teils Wissenschaft, aber es gibt einige Richtlinien, die Designer befolgen können, um Schriftarten aus verschiedenen Familien zu kombinieren.

Erstens ist das Mischen von Serifen mit Sans Serifs wesentlich einfacher als das Kombinieren von zwei Serifen oder zwei Sans Serifen. Aber es ist nicht so einfach, einfach irgendeine Serife und irgendeine Sans-Serif zu nehmen und sie in einem Design zusammenzuwerfen.

Berücksichtigen Sie den Kontext, in dem die Schriftarten verwendet werden. Wenn das Design beispielsweise leicht und lustig sein soll, stellen Sie sicher, dass die Schriftarten zu dieser Stimmung passen. Wenn das Design seriöser ist, dann sollten die Schriften das widerspiegeln. Mit anderen Worten, die Stimmung der kombinierten Schriften sollte übereinstimmen.

Auch Designer sollten den Kontrast zu ihrem Vorteil nutzen. Das Kombinieren von dünnen und dicken Schriften funktioniert oft besser als das Kombinieren von zwei sehr ähnlichen Schriften.

Suchen Sie nach Schriftarten mit ähnlichen x-Höhen (dem Abstand zwischen der Grundlinie und der Mittellinie der Kleinbuchstaben in einer Schriftart). Dies hilft, Konflikte zwischen Schriftarten zu vermeiden. Andere Dinge, die helfen, Konflikte zu vermeiden, sind ähnliche Kerning- und Zeichenformen. Schriften mit sehr runden Buchstabenformen sollten nicht mit eher eckigen Schriften kombiniert werden.

Während Richtlinien beim Erstellen von Schriftkombinationen hilfreich sein können, ersetzt nichts das Experimentieren und Üben. Designer sollten Zeit damit verbringen, mit Schriftarten zu experimentieren und sie so oft wie möglich zu kombinieren. Das Finden einiger alternativer Schriftkombinationen, die in einer Vielzahl von Kontexten funktionieren können, ist auch hilfreich für Projekte, bei denen das verfügbare Budget und die verfügbaren Ressourcen nicht viel Trial-and-Error zulassen.

Mit diesen Richtlinien können Designer dem vierstufigen Prozess folgen, den die Webtypografie-Quelle Better Web Type zum Erstellen effektiver Kombinationen vorgibt:

1. Finden Sie eine Ankerschrift für Ihren Haupttext
2. Finden Sie ein paar sekundäre Schriftarten für mögliche Kombinationen
3. Werten Sie die Kombinationen aus
4. Schriftkombinationen eliminieren/wählen

Weitere Überlegungen

Das Experimentieren mit verschiedenen Stilen und Gewichten nach der Auswahl der endgültigen Schriftarten kann zusätzliche Hierarchieebenen schaffen, ohne übergroße Hauptüberschriften erstellen zu müssen. Schriftarten ungefähr gleich groß zu halten, aber die wichtigere Überschrift fett zu machen, während die weniger wichtige kursiv zu machen, schafft eine klare visuelle Hierarchie.

Das gleiche kann mit Farbe gemacht werden. Eine Unterüberschrift in einer Akzentfarbe wird mehr hervorstechen als eine Unterüberschrift, die die gleiche Farbe wie der Fließtext hat. Designer sollten in ihren Unterüberschriften mit Farbe spielen, um wichtigeren Text hervorzuheben, ohne sich ausschließlich auf die Schriftgröße zu verlassen.

Abstände können auch verwendet werden, um wichtige Überschriften und Unterüberschriften voneinander abzuheben. Wenn Sie mehr Platz um Überschriften herum schaffen, damit sie sich vom begleitenden Fließtext abheben, werden sie noch markanter. Im Gegensatz dazu werden Unterüberschriften, die den gleichen Abstand wie der Fließtext haben, weniger wichtig gemacht.

Auch Abstände zwischen den Zeichen können verwendet werden, um eine Hierarchie zu erstellen. Durch Abstandszeichen kann eine bestimmte Zeile hervorgehoben werden. Dies ist besonders effektiv, wenn es mit der Großschreibung dieser Buchstaben kombiniert wird. Designer sollten jedoch darauf achten, dies nicht zu übertreiben, da es bei Überbeanspruchung auch amateurhaft aussehen kann.

Fazit

Experimentieren und Üben sind die besten Wege, um die typografische Hierarchie zu meistern, aber das Erlernen dieser Richtlinien hilft Designern, auf dem richtigen Fuß zu beginnen. Zu lernen, wie Größe, Farbe, Abstand, Gewicht und andere Faktoren zu einer effektiven Hierarchie beitragen, ist der erste Schritt.

Sobald diese Grundlagen im Kopf (und in der Praxis) eines Designers etabliert sind, können sie intuitiver visuelle Hierarchien erstellen, die den „Regeln“ je nach Bedarf folgen oder sie brechen, um einzigartige Designs zu schaffen, die für Benutzer inspirierend und ansprechend sind.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Designing for Readability – A Guide to Web Typography (mit Infografik)
• Die Nuancen der Schriftklassifizierung verstehen
• Design Foundations – Ein Leitfaden zur visuellen Hierarchie (mit Infografik)
• Schriftstile für Web- und Printdesign
• Steigern Sie Ihre UX mit einer klaren visuellen Hierarchie