CSS Headlines

Das richtige Design für die Überschriften ist im Webdesign sehr wichtig. Mit einer passenden Überschrift kann das Schriftbild des Fließtextes aufgelockert werden, die Texte können strukturiert und das Auge des Betrachters gelenkt werden. Deshalb ist es sehr wichtig, die Überschriften gut auf den Text abzustimmen und dafür zu sorgen, dass Überschriften sofort als solche erkennbar sind.

Leider werden die Überschriften viel zu häufig als Nebensache abgestempelt und deshalb nicht sorgfältig gestaltet. Oft stolpere ich über Internetseiten, in denen die Überschriften gar nicht angepasst sind, also die Überschriften ein nicht zum Text passendes Standard-Design haben. Aber genau so häufig begegnen mir auch Webseiten, auf denen die Überschriften mit zig Div- und Span-Tags umschlossen sind, um diesen dann CSS-Eigenschaften zu geben und die Überschriften »aufzupeppen«. Beide Extreme können die Lesbarkeit des Textes und das Schriftbild sehr negativ beeinflussen, im letzteren Fall leidet auch noch die Semantik, denn die zusätzlichen Tags sind inhaltlich komplett Überflüssig und haben somit im HTML-Quelltext nichts verloren.

Das Überschriften-Design benötigt also viel Fingerspitzen-Gefühl, man muss die Balance zwischen subtilen und auffälligen Überschriften finden, um nicht in eins der Extreme zu verfallen. Im Folgenden möchte ich euch anhand von fünf Beispielen demonstrieren, wie man Überschriften clever nur mit CSS gestalten kann.

Wenn man für Fließtext und Überschriften unterschiedliche Schriften benutzt, müssen diese zueinander passen, das ist ja eigentlich klar. Mittlerweile gibt es bestimmt tausende von Artikeln über dieses Thema, deshalb fasse ich mich hier kurz. Wichtig ist, dass die Schriften nicht zu sehr im Gegensatz zueinander stehen, sie dürfen sich aber auch nicht zu ähnlich sein. Auch hier wird Fingerspitzen-Gefühl gebraucht. Ich habe mich für die Schriften Amaranth, welche ich per @FontFace eingebunden habe, und Lucida Sans entschieden, beides serifenlose Schriften. Lucida Sans ist recht schlicht und ist im Fließtext auch bei kleinen Schriftgrößen gut lesbar, Amaranth ist eher als große, dicke Schrift gut zu gebrauchen, ist Lucida Sans recht ähnlich, wirkt jedoch deutlich »verspielter«. Beide Schrifen passen gut zusammen, wenn man sie richtig kombiniert.

Beim definieren der Abstände zwischen Überschriften und Absätzen muss man auch genau abwägen, nach dem Geset der Nähe sollte eine Überschrift näher an dem Absatz darunter als darüber sein. Wenn man ein bisschen experimentiert, kommt man meist schnell zu einem guten Ergebnis.

body {
  font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
  font-size: 12px;
  line-height: 20px;
  color: #555555;
}
  
h1 {
  font-family: Amaranth, Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  margin: 0px 0px 5px;
}
  
h2 {
  font-size: 13px;
  font-weight: bold;
  margin: 18px 0px 0px;
}
  
p {
  margin: 0px 0px 12px;
}
                

Amaranth und Lucida Sans harmonieren gut und die Abstände sind gut ausbalanciert. Noch ein paar Farben und ein Muster definiert und fertig ist Beispiel 1.

Bisher haben wir uns mit recht alltäglichen Techniken beschäftigt. In diesem Artikel sollen jedoch auch clevere Tricks gezeigt werden, dazu gehört auch der folgende Tipp. Mit dem Pseudo-Element :after kann man leicht eine Linie hinter die Überschrift ziehen:

h2 {
  position: relative;
  margin: 25px 0px 10px;
  padding: 5px 0px;
  font-size: 1.2857em;
  font-weight: normal;
  color: #be540f;
  white-space: nowrap;
  overflow: hidden;
}

h2:after {
  content: " ";
  display: inline-block;
  height: 0.6em;
  width: 100%;
  margin-left: 10px;
  vertical-align: top;
  border-bottom: 1px solid #be540f;
}
                

Wichtig sind hier vor allem die Overflow- und White-Space-Eigenschaft und natürlich das Pseudo-Element. Damit die Striche die gesamte Inhaltsbreite ausfüllen, müssen wir für :after eine Breite von 100 Prozent angeben. Da dies jedoch zusammen mit der Überschrift selbst natürlich mehr als 100 Prozent breit ist, verhindern wir mit overflow: hidden, das die Linie außerhab der eigentlichen Überschrift angezeigt wird. Mit white-space: nowrap verhindern wir, dass die Linie in eine eigene Zeile rutscht.

Bei einem Warenkorb oder einem Formular ist es oft wünschenswert, wenn der Nutzer die Reihenfolge der einzelnen Punkte durchgeht. Deshalb macht hier eventuell eine Nummerierung Sinn. Mit reinem CSS kann man diese Nummerierung ganz leicht erstellen. Wiederum benutzen wir das Pseudo-Element :after, doch diesmal stellt der Content einen Zähler dar, somit bekommt jede Überschrift eine neue Nummer.

h2:after {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  left: -20px;
  height: 32px;
  padding: 0px 20px 0px;
  font-size: 2.5em;
}
                

Den Counter haben wir vorher im Body-Element entsprechend auf 1 gesetzt. Die Nummer ist immer von einer gestreckten Form umgeben, diese erstellen wir mit dem Pseudo-Element :before:

h2:before {
  content: " ";
  position: absolute;
  left: -20px;
  width: 11px;
  height: 32px;
  padding: 0px 20px 0px;
  background: #bbe616;
  font-size: 2.5em;
  -moz-transform: skew(-25deg, 0deg);
  -webkit-transform: skew(-25deg, 0deg);
  -o-transform: skew(-25deg, 0deg);
  -ie-transform: skew(-25deg, 0deg);
  -ms-transform: skew(-25deg, 0deg);
  transform: skew(-25deg, 0deg);
}
                

Die Haupt-Überschriften versehen wir mit zwei versetzten Unterstrichen, dazu bemächtigen wir uns unter Anderem auch wieder dem Pseudo-Element :after:

h1 {
  display: inline-block;
  position: relative;
  margin: 20px 0px 0px;
  padding: 0px 20px 5px 0px;
  font-family: TitilliumMedium;
  font-weight: normal;
  font-size: 1.7143em;
  letter-spacing: -0.075em;
  color: #1b2d43;
  border-bottom: 1px solid #bbe616;
}

h1:before {
  content: "» ";
  font-family: Museo;
  font-weight: bold;
  letter-spacing: 0px;
  color: #bbe616;
}

h1:after {
  content: " ";
  position: absolute;
  left: -18px;
  right: 40px;
  bottom: 3px;
  height: 0px;
  border-bottom: 1px solid #bbe616;
}
                

Nach dem dritten Beispiel und dem doppelten Unterstrich habe ich noch weiter mit Linien experimentiert und eine weitere interessante Möglichkeit gefunden, Rahmen und Transformationen zu kombinieren.

h1:before {
  content: " ";
  position: absolute;
  top: 13px;
  left: -10px;
  display: block;
  width: 6px;
  height: 30px;
  margin: 0px 5px;
  border-right: 1px solid #64b06a;
  border-left: 1px solid #aad7ad;
  -moz-transform: skewX(45deg) skewY(-50deg);
  -webkit-transform: skewX(45deg) skewY(-50deg);
  -o-transform: skewX(45deg) skewY(-50deg);
  -ie-transform: skewX(45deg) skewY(-50deg);
  -ms-transform: skewX(45deg) skewY(-50deg);
  transform: skewX(45deg) skewY(-50deg);
}
                

Mit :before und :after kann man natürlich, neben dekorativen Strichen, auch beliebigen Text einfügen. In Kombination mit etwas CSS-Skalierung können damit interessante Effekte erzeugt werden:

h1 {
  color: #df6a41;
  font-size: 3em;
  font-family: ComfortaaBold;
  font-weight: normal;
  text-transform: uppercase;
}

h1:after {
  content: "»";
  color: #e3e3e3;
  vertical-align: 6px;
  -moz-transform: scale(1, 1.7);
  -webkit-transform: scale(1, 1.7);
  -o-transform: scale(1, 1.7);
  -ie-transform: scale(1, 1.7);
  -ms-transform: scale(1, 1.7);
  transform: scale(1, 1.7);
}

h2 {
  margin: 20px 0px 5px;
}

h2:before {
  content: ".oO( ";
  color: #c9c9c8;
}

h2:after {
  content: " )";
  color: #c9c9c8;
}
                

Mit einer Hand voll Zeichen, die zu den Überschriften hinzugefügt werden, wird das Gesamtbild deutlich aufgelockert, denn obwohl alles noch immer nur Text ist, wirkt es nicht wie reiner Text. Mit solchen Effekten kann man viel herumexperimentieren, bis man den Stil findet, den man für die jeweilige Seite sucht.