Ziehen Sie die Leser mit Einstiegspunkten an

Bei der Gestaltung Ihres Layouts sollten Sie zuerst an die Schrift denken und mit Stil, Größe, Farbe und Gewicht arbeiten, um Einheitlichkeit und Vielfalt zu schaffen. Die Überschrift(en), der Aufmacher und etwaige Anführungszeichen sollten als Einstiegspunkt dienen, wobei die verschiedenen typografischen Ebenen Ihren Lesern eine Vielzahl von visuellen Geschmacksrichtungen bieten.

Einheit und Vielfalt

Um Einheit und Vielfalt zu verstehen, betrachten wir ein Layout, das keine Vielfalt und keine Einstiegspunkte bietet. Wenn Sie auf einer Website wie der folgenden landen, würden Sie sich dann mit dem Inhalt beschäftigen wollen?

Er ist nicht nur unkonventionell, sondern auch unstrukturiert. Man kann den Titel nicht von der Byline unterscheiden, den Fließtext nicht vom Pull-Zitat. Es gibt viel Einheit, das steht fest, aber keine Vielfalt und damit keine Hierarchie.

Das nachstehende überarbeitete Beispiel bringt einige Fortschritte.

Wir haben die Größe verwendet, um einen Titel als Überschrift zu erstellen <h1> Element. Die Überschrift und das Datum sind eine kleine Überschrift <h2>. Der laufende Text folgt als Absatz <p> Element.

Durch die Unterbrechung eines einzelnen, langen Absatzes wird das Leseerlebnis einladender.

Vergleicht man das überarbeitete Design mit dem ursprünglichen Layout, so ist es stärker strukturiert als zu Beginn, und die Größenänderungen sorgen für Abwechslung.

Aufpeppen mit Web-Typografie

In den vorangegangenen Beispielen ist die Times® Schrift eine vollkommen solide, aber neutrale Wahl. Sie können aus einer fast grenzenlosen Palette von Web Fonts wählen, um diese Schrift ansprechender zu gestalten. Im folgenden Beispiel wurde für die Überschrift die Bree™ Serif Schrift und für die Byline und den Fließtext die Neue Helvetica® Schrift verwendet.

Wir haben uns von unserem ursprünglichen Entwurf weit entfernt, aber wir sind noch nicht fertig. Im folgenden Beispiel sind wir von zwei auf drei Absätze umgestiegen, wobei der erste Absatz größer und ansprechender geworden ist, um einen weiteren Einstiegspunkt zu schaffen.

Wir haben jetzt einen großen ersten Absatz, um die Leser anzulocken, und mit der Hilfe von Web Fonts und der Vielfalt an Größe und Gewicht sind wir von "vielleicht werde ich nicht" zu "vielleicht werde ich mir das ansehen" übergegangen - ein guter erster Schritt, um Leser zu locken.

Wenn der Hauptabsatz im vorherigen Beispiel für Ihren Geschmack oder die Vorlieben der Leser zu groß ist, dann machen Sie nur die erste Zeile groß, indem Sie die ::first-line CSS-Pseudo-Element, das unten mit der großen ersten Zeile in größerer Schrift dargestellt ist.

Wir haben jetzt eine große und schwere Überschrift, die zu einer großen ersten Zeile führt, die sich vom Rest des Absatzes abhebt. Diese beiden Ebenen der Typografie schaffen eine Hierarchie und ziehen den Leser durch die unterschiedlichen Größen in ihren Bann.

Die Neue Helvetica-Familie funktioniert in diesen Beispielen, aber mit der Trade Gothic® Next Schrift stehen mehr Zeichen pro Zeile zur Verfügung, und als Bonus hinzugefügt am sieht der rechte Fetzen besser aus.

Mit erhabenen Initialen oder Kapitälchen können Sie den Text noch weiter aufpeppen. Auch für die Kennzeichnung von Absätzen durch Zeilenumbrüche, Einrückungen oder Ausrückungen gibt es Optionen.

Mit Pull Quotes etwas sagen

Wir haben hinzugefügt am etwas Abwechslung in das Layout gebracht, aber wir sind noch nicht am Ziel, und dies ist die perfekte Gelegenheit für ein kleines Extra: ein herausgezogenes Zitat. Ein herausgezogenes Zitat ist eine Phrase, ein Satz oder ein Zitat, das aus dem Text herausgezogen und hervorgehoben wird. Setzen Sie ein Anführungszeichen in einem anderen Font, Stil, Farbe oder Größe. Oftmals erscheinen die Anführungszeichen größer als der Fließtext.

Wir verwenden das Centaur® Schrift in kursiver Schrift für das unten stehende Zitat.

Erstellen Sie eine Klasse für Ihr Pull-Zitat oder verwenden Sie die HTML <blockquote>
Element, wie in diesem CSS und HTML zu sehen.

blockquote {
font-size: 1.9em;
line-height: 1.5em;
font-family: "Centaur W02 Italic";
margin: 0px 50px 30.4px 50px;
}

<blockquote>Web typography can make a site stand out from the herd, attract new visitors, and keep visitors coming back.</blockquote>

Unser ursprüngliches Pull-Zitat oben hat einen unordentlichen rechten Lappen, also haben wir die Größe in der Nächste Iteration geändert. Um das Pull-Zitat noch mehr hervorzuheben, haben wir typografische Möbel mit Rand-oben und Rand-unten.

blockquote {
font-size: 1.95em;
line-height: 1.4em;
font-family: "Centaur W02 Italic";
margin: 10px 85px 30.4px 85px;
border-bottom: 1px;
border-top: 9px;
border-left: 0px;
border-right: 0px;
border-style: solid;
padding: 10px 0px 20px 0px;
}

Warum hier aufhören? Wir Ändern haben die Überschrift in der Bree Serif Thin Schrift vergrößert und einige der einleitenden Wörter werden zu einem Absatzanfang in Trade Gothic Next Bold.

Um eine noch stärkere Unterscheidung zwischen Überschrift und Anführungszeichen zu erreichen, ist die Überschrift von Nächste etwa 1,7 Mal so groß wie das Anführungszeichen.

Das überarbeitete Layout auf der rechten Seite mit einer dominanteren Überschrift trägt dazu bei, dass ein deutlicher Unterschied zwischen der Überschrift und dem Pull-Zitat entsteht, wodurch die Überschrift hervorsticht.

Im endgültigen Layout unten haben wir die Stärke des oberen Randes auf 4 Pixel reduziert, und mit dieser geringeren Stärke ist er nicht so störend wie der frühere und schwerere 9-Pixel-Rand.

Um mehr Möglichkeiten zu schaffen, könnten Sie mit der Platzierung des Anführungszeichens experimentieren und es unterhalb der Browserfalte oder sogar direkt unter der Überschrift platzieren, so dass es fast wie eine Zwischenüberschrift wirkt. Vielleicht können Sie auch die gesamte Schrift verwenden und den oberen und unteren Rand des Anführungszeichens weglassen. Sie können auch mit der Groß- und Kleinschreibung experimentieren, z. B. mit Großbuchstaben, um die fettgedruckten Wörter des ersten Absatzes noch mehr hervorzuheben (siehe "Aufwertung der Web-Typografie mit Großbuchstaben"). Gehen Sie sparsam mit der Vielfalt um, denn zu viel kann die Einheit und Hierarchie beeinträchtigen.

Zurückkommen für mehr

Typografische Vielfalt sollte nicht nur aufmerksamkeitsstarke Einstiegspunkte bieten, sondern auch hierarchisch und funktional sein, wobei sich Überschrift, Zwischenüberschriften, Anführungszeichen und Fließtext deutlich unterscheiden sollten. Verwenden Sie Größe, Gewicht und Stil sowie verschiedene Fonts als Zutaten für die Gestaltung Ihrer Einstiegspunkte. Machen Sie es dem Leser visuell schmackhaft, damit er sich auf den Inhalt einlässt und hoffentlich regelmäßig wiederkommt, um sich einen Nachschlag zu holen.