Auf dem Weg in die richtige Richtung

Was ist das erste, was Ihre Besucher lesen, wenn sie auf Ihre Website kommen? Es sollte keine Flash-Animation sein, die ihre Ladezeit ankündigt. Wenn das der Fall ist, müssen Sie Ihre Website aktualisieren - und zwar sofort! Außerdem sollten Sie zuerst an die Schrift denken, denn das ist es, worauf der Leser zusteuert: die Typografie. Wenn Sie zuerst an die Schrift denken und die Hierarchie berücksichtigen, werden die Besucher zuerst Ihre Überschriften wahrnehmen. Die Überschriften sind Ihre Blickfänger. Die Größe ist eine Möglichkeit, die Dominanz der Überschriften zu erhöhen und sie hervorzuheben. Und obwohl größer in der Regel besser ist, können auch Kontrast und Gewicht die Aufmerksamkeit des Lesers auf sich ziehen. Achten Sie auch auf die Details, denn eine Überschrift kann Ihr gesamtes Layout ausmachen oder zerstören.

Überschriftenhierarchie und -funktionalität

Überschriftenelemente haben sechs Ebenen, mit h1 die große Überschrift, die zu h6, die kleinste Rubrik.


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>


Überschriften absteigend von h1 zu h6, eingestellt im Amasis™ eText Schrift.

In HTML werden Überschriften als Elemente auf Blockebene bezeichnet, da sie einen eigenen Platz in einem Block einnehmen. Blockelemente unterscheiden sich von Inline-Elementen. Inline-Elemente können innerhalb von Blockelementen stehen.

Auswählen einer Überschrift in Typecast™ von Monotype können Sie sehen, wie sich ein Element verhält. Die Blockebene h1 Element nimmt einen eigenen Bereich ein, der durch den blau umrandeten Kasten gekennzeichnet ist.

Die Herstellung der Überschrift text strong erzeugt ein Inline-Element innerhalb der h1 Element enthaltenden Block.

Behandeln Sie Ihr h1 über h6 Elemente hierarchisch zu ordnen und sie von groß nach klein, von dunkel nach hell oder von schwer nach dünn zu sortieren.

Bevor Sie sich für eine Schriftgröße und Font entscheiden, erstellen Sie Permutationen Ihrer Überschriften. Diese Beispiele aus der Avenir® Schrift zeigen, wie Größe, Wert und Gewichtung zur Schaffung einer Hierarchie verwendet werden können.

Sie können auch Fonts mischen und Farben verwenden, um Abwechslung zu schaffen, wie unten gezeigt mit Avenir als serifenlose Schrift und der Minion® Pro Schrift als Serifenschrift.

Größenbestimmung von Überschriften

Überschriften sind wie eine ausgestreckte Hand, die den Leser mit einem Händedruck in den Inhalt einführt und ihn auf Ihre Website führt. Aber weil wir heutzutage so viele Nachrichten sehen, müssen Überschriften den Leser visuell fesseln. Außerdem müssen sie mit dem Rest Ihrer Website harmonieren, denn die Überschriften sind der Aufhänger, von dem aus die gesamte Typografie nach unten zur Browserfalte, dem untersten Rand, hin abfällt.
Und obwohl Überschriften die Aufmerksamkeit des Lesers erregen sollen, ist eine größere Schrift nicht immer besser. Betrachten Sie das folgende Layout.

Die Überschrift wirkt pferdeartig angesichts der 5em Font-Größe und unangenehmer Bruch mit WEB auf einer eigenen Linie und einem sie umgebenden klaffenden negativen Raum. Aufgrund der großen Rubrik 1 Element, unser Rubrik 2 Die Regeln und Schriften haben sich geändert. wird an der Falz des Browsers abgeschnitten. Die Verkleinerung auf einen Bildschirm in Handygröße mit Typecast zeigt uns die Probleme auf einem kleinen Bildschirm.

Verkleinerung der Überschrift auf 4em(siehe unten) beginnt, die Dinge aufzuräumen und den negativen Raum zu beseitigen.

Aber das kleinere mobile Layout hat immer noch Probleme mit der Überschrift und dem Textkörper, wo Unterbrechungen klaffenden negativen Raum erzeugen.

Die monumentale Überschrift in Großbuchstaben wird die Aufmerksamkeit des Lesers auf jeden Fall auf sich ziehen. Und eine dünnere Überschrift zusammen mit einem stärkeren Anführungszeichen schafft eine Hierarchie, wie unten gezeigt.

Im obigen Beispiel scheint Großbuchstaben die richtige Wahl zu sein, und weitere Tests mit Fonts und der Schriftgröße könnten uns die gewünschten Ergebnisse liefern. Aber diese Überschrift ist sehr lang, und Großbuchstaben erschweren das Lesen und sorgen für seltsame räumliche Beziehungen. Entfernen wir also die text-transform: Großbuchstaben Eigenschaft aus unserem CSS.

Die gemischte Großschreibung gibt uns ein ganz anderes Aussehen und Gefühl, mit Hügeln und Tälern zwischen Groß- und Kleinbuchstaben, an die wir gewöhnt sind.

Aber wir sind noch nicht am Ziel. Die Ober- und Unterlängen der Kleinbuchstaben in der Überschrift sowie die Großbuchstaben stören sich aufgrund der geringen Zeilenhöhe gegenseitig. Verkleinern der Schriftgröße auf 2em und die Anpassung der Zeilenhöhe verhindert, dass Buchstaben aneinander stoßen. Die Anpassung der Größe und Gewichtung des einleitenden Zitats, des Absatzes und der Zwischenüberschrift führt den Text zusammen.

Weitere Tests und Anpassungen für mobile Geräte werden notwendig sein, um zu sehen, wie das Layout auf einem kleineren Bildschirm funktioniert.

Überschriften & Ziffern

Wenn Ihre Überschrift Zahlen enthält, sehen Sie nach, ob die Font über linierte oder nicht linierte Ziffern verfügt. Die Neue Helvetica® Schriftverwendet für unsere Rubrik 1 in den vorangegangenen Beispielen, hat Linienziffern, die manchmal auch als Linienziffern bezeichnet werden.

Linierte Ziffern richten sich in der Regel an der Kapitellinie und der Grundlinie der Großbuchstaben aus. Die Georgia® Schrift hat nicht-linierende Ziffern, wie in den beiden untersten Beispielen unten zu sehen ist.

Beachten Sie, dass die nichtlinearen Ziffern in Georgia Ober- und Unterlängen haben, wie Kleinbuchstaben, weshalb nichtlineare Ziffern auch als Kleinbuchstaben oder Kleinziffern bezeichnet werden.
Wenn man zu einer Font wie Georgia wechselt, die nicht linierte Ziffern hat, die manchmal auch als Mediävalziffern bezeichnet werden, entstehen mehr Hügel und Täler in der Überschrift. Bei einer Überschrift in Großbuchstaben heben sich die Ziffern jedoch seltsam ab.

Für eine Überschrift in Großbuchstaben mit Ziffern sollten Sie anstelle von Georgia eine Schrift wie die Demos® Next Schrift verwenden. Die Schriftfamilie Demos verfügt nicht nur über linierte Ziffern, die gut zu Überschriften in Großbuchstaben passen, sondern auch über große Kleinbuchstaben, die für einen monumentalen Eindruck sorgen. Außerdem ist sie in verschiedenen Schriftgraden erhältlich.

Experimentieren Sie mit Größe, Zeilenlänge und Farbe, um zu sehen, welches Layout Sie erhalten und wie die Überschrift mit dem Rest des Designs interagiert.

Wohin sich die Leser bewegen

Für die meisten Designer und Nutzer sind auffällige Einführungsanimationen und mit Flash erstellte Countdown-Timer passé. Und auch wenn Ihre Website sehr bildlastig ist, ist die Typografie in einer Zeit, in der wir routinemäßig mit einer Flut von typografischen Botschaften konfrontiert werden, wichtig. Denken Sie zuerst an die Schrift und überlegen Sie, wie die Überschriften Ihre Website funktional und unverwechselbar machen.

Bei der Gestaltung Ihrer Überschriften müssen Sie mit Schriftgröße, -stil, -gewicht und -farbe spielen und dabei berücksichtigen, wie die Überschriften mit der Hierarchie und dem Layout der Website zusammenhängen. Untersuchen Sie, wie sich die Web-Typografie auf das Erscheinungsbild und die Identität Ihrer Website auswirkt, zumal die Überschriften den ersten Kontakt mit Ihren Besuchern herstellen. Sie möchten, dass Ihre Besucher einen guten ersten Eindruck von Ihrer Website bekommen.