Beim Design eines Webseiten-Headers oder eines Logos gibt es jede Menge Möglichkeiten sich so richtig kreativ aus­zu­leben. Doch ein aus­ge­wo­genes Webdesign steht und fällt nicht nur mit dem Header, son­dern sollte bis ins Details aus­ge­ar­beitet sein. Vor allem bei Blog-Designs spielt die Gestaltung der Artikel-Elemente eine ent­schei­dende Rolle. Denn beson­ders die Artikel sollten über­sicht­lich gestaltet und ange­nehm lesbar sein. Deshalb habe ich hier einige hilf­reiche Tipps zur Gestaltung von Über­schriften zusammen gestellt.

1. Die Überschriften-Hierarchie

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

Für die bes­sere Strukturierung deines Artikels kann es (vor allem bei län­geren Artikeln) hilf­reich sein, wei­tere Unterüberschriften ein­zu­setzen. Diese sind in der Schriftgröße kleiner als die Artikel-Überschrift. Die Schriftart soll­test du aber für alle Über­schriften beibehalten.

2. Weißräume bewusst einsetzen

Um die Über­schriften deines Artikels her­vor­zu­heben ist nicht nur die Schriftgröße von Bedeutung, son­dern auch der Abstand zwi­schen Über­schrift und dem Artikel-Text (margin und pad­ding).
Diesen Abstand soll­test du so wählen, dass zwar deut­lich wird zu wel­chem Text die Über­schrift gehört, aber gleich­zeitig die Über­schrift nicht »ein­ge­quetscht« wirkt.

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

Und nicht nur die Abstände zwi­schen der Über­schrift und dem übrigen Artikel-Text sind wichtig, son­dern auch der Abstand der ein­zelnen Überschrift-Zeilen (line-height). Beim Testen des rich­tigen Abstandes ver­wende ich immer eine Über­schrift die ein g, und ein Ü ent­hält. So kann ich sicher sein, dass der Abstand auch bei beson­ders über­lap­penden Buchstaben noch aus­rei­chend ist.

3. Serifen oder Serifenlos

Als nächstes soll­test du ent­scheiden, ob du eine Schrift mit Serifen (z.B. Georgia oder Times New Roman) oder eine seri­fen­lose Schriftart (z.B. Arial oder Verdana) für deine Über­schriften ver­wenden möch­test. Um einen Kontrast zwi­schen Über­schrift und Fließtext zu erzeugen, kannst du für deine Über­schriften eine Serifenschrift wählen, und für den Fließtext eine seri­fen­lose Schrift (oder umgekehrt).

Eine Serifen-Schrift bringt meist mehr Charakter mit sich.

Eine seri­fen­lose Schrift wirkt dagegen moderner und ist viel­sei­tiger einzusetzen.

Du kannst dich natür­lich auch nur für einen Schrifttyp im gesamten Layout ent­scheiden. Deine Über­schriften könn­test du dann auch durch fette Schrift (font-weight: bold oder 700) spe­ziell hervorheben.

Eine wei­tere Alternative wäre den Über­schriften den CSS-Wert text-transform:uppercase; zu geben, und so alle Über­schriften in Großbuchstaben zu setzen. Wenn du oft lange Über­schriften für deine Artikel ver­wen­dest, ist ein Text in Großbuchstaben aller­dings nicht unbe­dingt zu emp­fehlen, da dieser schwerer lesbar ist.

4. Verwendung von Farbe

Ein wei­teres Element mit dem du deine Über­schriften her­vor­heben kannst, ist der Einsatz von Farbe. Hierbei soll­test du aller­dings beachten, dass du Farbe auch sehr gut als Link-Style ver­wenden kannst. Daher soll­test du mit Farbe dezent umgehen.

Du könn­test bei­spiels­weise einen dezen­teren Ton deiner Link-Farbe als Farbe der Über­schriften verwenden.

Oder du ver­zich­test im nor­malen Zustand deiner Über­schriften auf Farbe und bringst diese erst beim Hover-Zustand zum Einsatz.

5. Über­schriften als Links

Wie gerade schon erwähnt eignet sich eine Farbe beson­ders gut für die Markierung von Links. Auf der Startseite deines Blogs sind alle Über­schriften Links zum jewei­ligen Artikel. Diese Überschriften-Links kannst du bei Hover ent­weder mit einer Farbe, unter­stri­chen oder mit einer Hintergrundfarbe beson­ders hervorheben.

Hast du dich für eine Link-Farbe ent­schieden, ist es sinn­voll diese Farbe auch bei deinen wei­teren Links wieder zu verwenden.

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

Soweit es für deinen Blog sinn­voll ist, kannst du all diese Zusatz-Elemente ober­halb oder unter­halb deiner Artikel-Überschrift ein­fügen. Du soll­test darauf achten das die Infos über­sicht­lich ange­ordnet sind, und den Fokus nicht von der Über­schrift nehmen.
Viele Webdesigner nutzen diese Meta-Daten auch, um den Artikeln eine indi­vi­du­elle Note zu ver­leihen. Besonders bei der Darstellung des Datums gibt es viele krea­tive Lösungen.

Um nicht zu sehr von den Über­schriften abzu­lenken, kannst du die Meta-Daten (die keine Links sind) auch in einem leich­terem Farb-Ton dar­stellen, z.B. einem hellen Grau.

Findest du diese Tipps hilf­reich oder kennst du wei­tere Tricks, um Blog-Überschriften beson­ders zu gut zu stylen? Über dein Feedback freue ich mich sehr!