Kommentare 5

Typo-Tipps für Webdesigner (Teil 1): Styling der Überschriften

Beim Design eines Webseiten-Headers oder eines Logos gibt es jede Menge Möglichkeiten sich so richtig kreativ auszuleben. Doch ein ausgewogenes Webdesign steht und fällt nicht nur mit dem Header, sondern sollte bis ins Details ausgearbeitet sein. Vor allem bei Blog-Designs spielt die Gestaltung der Artikel-Elemente eine entscheidende Rolle. Denn besonders die Artikel sollten übersichtlich gestaltet und angenehm lesbar sein. Deshalb habe ich hier einige hilfreiche Tipps zur Gestaltung von Überschriften zusammen gestellt.

1. Die Überschriften-Hierarchie

Typo-Tipps Ueberschriften gestalten

Genau wie in Zeitschriften-Layouts gibt es auch auf Blogs eine Hierarchie für die Überschriften. Die erste Überschrift (mit dem HTML-Tag h1) wird dabei für die Blog-Überschrift (bzw. für dein Logo) verwendet. Sie sollte also auf jeder Seite nur einmal vorkommen. Die zweite Überschrift in der Hierarchie (mit dem HTML-Tag h2) kannst du dann für deine Artikel-Überschriften einsetzen.

Für die bessere Strukturierung deines Artikels kann es (vor allem bei längeren Artikeln) hilfreich sein, weitere Unterüberschriften einzusetzen. Diese sind in der Schriftgröße kleiner als die Artikel-Überschrift. Die Schriftart solltest du aber für alle Überschriften beibehalten.

Typo-Tipps Ueberschriften gestalten

2. Weißräume bewusst einsetzen

Typo-Tipps Ueberschriften gestalten

Um die Überschriften deines Artikels hervorzuheben ist nicht nur die Schriftgröße von Bedeutung, sondern auch der Abstand zwischen Überschrift und dem Artikel-Text (margin und padding).
Diesen Abstand solltest du so wählen, dass zwar deutlich wird zu welchem Text die Überschrift gehört, aber gleichzeitig die Überschrift nicht »eingequetscht« wirkt.

Vor allem bei Web-Texten musst du beachten, dass der Leser deinen Text erst mit dem Auge abscannt, bevor er an einer Textstelle intensiver zu lesen beginnt. Daher ist es wichtig, dass die Überschriften lesbar, und deutlich als solche zu erkennen sind.

Und nicht nur die Abstände zwischen der Überschrift und dem übrigen Artikel-Text sind wichtig, sondern auch der Abstand der einzelnen Überschrift-Zeilen (line-height). Beim Testen des richtigen Abstandes verwende ich immer eine Überschrift die ein g, und ein Ü enthält. So kann ich sicher sein, dass der Abstand auch bei besonders überlappenden Buchstaben noch ausreichend ist.
Typo-Tipps Ueberschriften gestalten

3. Serifen oder Serifenlos

Als nächstes solltest du entscheiden, ob du eine Schrift mit Serifen (z.B. Georgia oder Times New Roman) oder eine serifenlose Schriftart (z.B. Arial oder Verdana) für deine Überschriften verwenden möchtest. Um einen Kontrast zwischen Überschrift und Fließtext zu erzeugen, kannst du für deine Überschriften eine Serifenschrift wählen, und für den Fließtext eine serifenlose Schrift (oder umgekehrt).

Eine Serifen-Schrift bringt meist mehr Charakter mit sich.

Typo-Tipps Ueberschriften gestalten

Eine serifenlose Schrift wirkt dagegen moderner und ist vielseitiger einzusetzen.

Typo-Tipps Ueberschriften gestalten

Du kannst dich natürlich auch nur für einen Schrifttyp im gesamten Layout entscheiden. Deine Überschriften könntest du dann auch durch fette Schrift (font-weight: bold oder 700) speziell hervorheben.

Eine weitere Alternative wäre den Überschriften den CSS-Wert text-transform:uppercase; zu geben, und so alle Überschriften in Großbuchstaben zu setzen. Wenn du oft lange Überschriften für deine Artikel verwendest, ist ein Text in Großbuchstaben allerdings nicht unbedingt zu empfehlen, da dieser schwerer lesbar ist.

Typo-Tipps Ueberschriften gestalten

4. Verwendung von Farbe

Ein weiteres Element mit dem du deine Überschriften hervorheben kannst, ist der Einsatz von Farbe. Hierbei solltest du allerdings beachten, dass du Farbe auch sehr gut als Link-Style verwenden kannst. Daher solltest du mit Farbe dezent umgehen.

Du könntest beispielsweise einen dezenteren Ton deiner Link-Farbe als Farbe der Überschriften verwenden.

Oder du verzichtest im normalen Zustand deiner Überschriften auf Farbe und bringst diese erst beim Hover-Zustand zum Einsatz.

Typo-Tipps Ueberschriften gestalten

5. Überschriften als Links

Typo-Tipps Ueberschriften gestalten

Wie gerade schon erwähnt eignet sich eine Farbe besonders gut für die Markierung von Links. Auf der Startseite deines Blogs sind alle Überschriften Links zum jeweiligen Artikel. Diese Überschriften-Links kannst du bei Hover entweder mit einer Farbe, unterstrichen oder mit einer Hintergrundfarbe besonders hervorheben.

Hast du dich für eine Link-Farbe entschieden, ist es sinnvoll diese Farbe auch bei deinen weiteren Links wieder zu verwenden.

6. Datum, Kategorie, Schlagwörter und Autor des Artikels

Soweit es für deinen Blog sinnvoll ist, kannst du all diese Zusatz-Elemente oberhalb oder unterhalb deiner Artikel-Überschrift einfügen. Du solltest darauf achten das die Infos übersichtlich angeordnet sind, und den Fokus nicht von der Überschrift nehmen.
Viele Webdesigner nutzen diese Meta-Daten auch, um den Artikeln eine individuelle Note zu verleihen. Besonders bei der Darstellung des Datums gibt es viele kreative Lösungen.

Typo-Tipps Ueberschriften gestalten

Um nicht zu sehr von den Überschriften abzulenken, kannst du die Meta-Daten (die keine Links sind) auch in einem leichterem Farb-Ton darstellen, z.B. einem hellen Grau.

Findest du diese Tipps hilfreich oder kennst du weitere Tricks, um Blog-Überschriften besonders zu gut zu stylen? Über dein Feedback freue ich mich sehr!

5 Kommentare

  1. Hallo Ellen,
    vielen Dank für diesen sehr hilfreichen Artikel.

    Ich finde es total wichtig, dass die Überschriften sehr gut abgestimmt sind. Das macht ein sehr großen Unterschied.

    Du zeigst wie wichtig es ist Typografie wirklich als sehr wichtiges Stilmittel zu nutzen.

    Bin jetzt schon sehr gespannt auf den nächsten Teil :)
    Lieben Gruß
    Manuel

  2. Der Artikel ist zwar schon etwas älter aber bin jetzt erst drauf gestoßen. Echt ein paar gute Tipps! Werde ich für meinen kommenden Blog sofort umsetzten, besonders Punkt “6. Datum, Kategorie, Schlagwörter und Autor des Artikels” gefällt mir, also die Aufteilung (im Bild)

    Gruß
    Vincent

  3. @Dominique:

    Bei Font-size ist am besten, was für Deinen Wrokflow am besten ist.
    Das ist bei jedem anders.
    Es definiert nur Deinen persönlichen Stil.

    Das Ergeniss ist, was letztendlich entscheident ist.

    Du solltest allerdings die Auswirkungen aller Maßeinheiten kennen die möglich sind, für den Fall das Du mal an Scripten arbeitest, die jemand anders entwickelt hat.

    Die besten Erklärungen zu den unterschiedlichen Maßeinheiten gibt es bei “Self-HTML”.

Schreibe eine Antwort