Wichtige CSS-Eigenschaften für die Gestaltung von Überschriften

Besonders wenn man eine Webseite mit längeren Texten oder Artikeln gestaltet, ist es wichtig die Überschriften-Tags h1 bis h6 zu gestalten und auch zu nutzen. Die Überschriften bestimmen die Hierarchie des Textes und helfen dabei, einen Text besser zu strukturieren und somit leichter lesbar zu machen. Im folgenden Artikel habe ich daher die wichtigsten CSS-Eigenschaften und Tipps für die Gestaltung von Überschriften im Web zusammen gestellt.

1. Font-family

Die erste Entscheidung bei der Umsetzung von Überschriften ist die Wahl der Schriftart. Du solltest darauf achten, dass die Schrift auch in einer größeren Schriftgröße gut lesbar ist. Auch den Charakter der gewählten Schriftart solltest du beachten. Schließlich sind die Überschriften ein sehr dominanter Teil einer Webseite und du solltest dir genau überlegen, ob der Schriftcharakter eher klassisch, verspielt oder schlicht/modern sein soll.

Immer sehr interessant und auflockernd ist auch der Wechsel zwischen einer Serifenschrift in der Überschrift und einer serifenlosen Schriftart für dein Fließtext, oder umgekehrt.

CSS Tipps Ueberschriften
Der Wechsel zwischen serifen und serifenlosen Schriften schafft interessante Kontraste.

2. Font-size

Bei der Schriftgröße ist es wichtig, sich für eine Größeneinheit em, Pixel oder Prozent zu entscheiden. Die beste Kontrolle über die tatsächlich angezeigte Schriftgröße hat man natürlich mit einer genauen Pixelangabe.

Wenn man das Webdesign etwas flexibler gestalten möchte und auf die Standard-Werte des jeweils genutzten Browsers eingehen will, kommt eher die Einheit em in Frage. 1em ist dabei immer die Standard-Schriftgröße des Browsers (in den meisten Fällen 16 oder 17 Pixel). 0.1em sind dann also 1,6 Pixel. Möchtest du deine Schriftgrößen feiner abstufen, kannst du auch Werte wie 0.75em in deinem Stylesheet angeben.

Flexible Einheiten wie em oder Prozent sind besonders gut geeignet, wenn du deine Webseite auch für unterschiedliche Browsergrößen oder mobile Geräte anpassen möchtest. So hast du zwar nicht die die Garantie, dass deine Schrift immer genau in der von dir gewünschten Pixelgröße angezeigt wird, dafür kannst du aber eher davon ausgehen, dass deine Webseiten-Texte auch in den unterschiedlichsten Geräten und Browsern eine gute Lesbarkeit hat. Indem du dein Webdesign auf möglichst vielen unterschiedlichen Geräten testest, kannst du ein gutes Gefühl für die optimalen font-size Werte im CSS bekommen.

3. Margin und padding

Auch die Abstände z.B. zwischen Fließtext und Überschrift oder zwischen der Überschrift und weiteren Informationen wie Datum und Autoren-Info muss mit Hilfe von margin und padding im Stylesheet definiert werden.

Der margin-Wert bestimmt dabei immer den äußeren Abstand von der Überschrift zum nächsten Element, der padding-Wert den Abstand innerhalb des Überschriften-Elements.

CSS Tipps Ueberschriften
Margin und padding-Werte bestimmen.

Wichtig ist, dass die Zuordnung der Elemente für den Leser auf den ersten Blick ersichtlich ist. Eine Überschrift sollte also immer optisch dem darauf folgenden Text zugeordnet sein.

4. Color

Auch die Farbwahl kann dabei helfen, eine Überschrift deutlich als solche zu markieren. Wählst du z.B. einen dunklen Grauton für deinen Fließtext (100% Schwarz wirkt in den meisten Fällen sehr hart), kannst du für den color-Wert deiner Überschrift den nächst dunkleren Farbwert nutzen.

5. Font-weight

Je nach Schriftart kommt es eventuell auch in Frage, die Überschriften in fett zu setzen. Eine Überschrift mit dem font-weight: bold; kommt meiner Ansicht nach meist eher für eine serifenlose Schrift in Frage. Eine fette Überschrift kann aber auch oft dazu beitragen, dass sich die Überschrift fürs Auge deutlicher hervorhebt, was zur Struktur des Textes beiträgt. Ich mache dabei gerne den „Augen-Zukneif“-Test: Dabei zoome ich den Text am Bildschirm kleiner und kneife meine Augen leicht zusammen, so dass ich den Text nur noch leicht verschwommen sehe. Wenn die Überschriften und die Text-Hierarchie auch in diesem „verschwommenen“ Zustand noch gut zu erkennen sind, liege ich meist richtig.

6. Line-height

Eine weitere wichtige CSS-Eigenschaft ist auch der line-height Wert. Dieser bestimmt den Zeilenabstand von einer Schriftgrundlinie zur nächsten. Line-height ist also besonders für längere Überschriften von zwei oder mehr Zeilen wichtig.

CSS Tipps Ueberschriften
Der Line-height Wert bestimmt den Abstand von einer Grundlinie zur nächsten.

Du solltest darauf achten, dass der Zeilenabstand auch bei Buchstaben wie g oder ß noch groß genug gesetzt ist, damit sich auch diese überhängenden Buchstaben nicht berühren oder sogar überschneiden. Die line-height Eigenschaft in CSS benötigt keine Einheit (Vielen Dank für diesen Hinweis von Klaus in seinem Kommentar). Der Faktor 1.4 line-height bedeutet einfach, dass der Zeilenabstand 1,4 mal so groß ist, wie die Schriftgröße. Der gewählte Wert sollte also auf keinen Fall kleiner gewählt sein als die font-size selbst, da sich die Schriftzeilen sonst überlappen. Wichtig ist, dass ein angenehm lesbarer Textfluss entsteht, und die Überschrift weder gequetscht noch auseinandergezogen wirkt.

Tipp: Eine sehr detaillierte Slideshow zum Thema CSS line-height kannst du dir auf dem Maxdesign-Blog anschauen.

7. Text-transform

Bei der CSS-Eigenschaft text-transform kannst du zwischen lowercase (alles wird klein geschrieben), uppercase (Großschreibung), capitalize (der Wortanfang wird groß geschrieben) und inherit (der text-transform Wert des Eltern-Divs wird übernommen) auswählen. Uppercase kann, vor allem bei kurzen Überschriften in serifenloser Schrift, sehr schick aussehen. Bei längeren Überschriften können Großbuchstaben aber auch schnell schlecht lesbar werden.

8. Letter-spacing

Je nach Schriftart kann es sein, dass du den einzelnen Buchstaben noch etwas mehr Abstand zwischen einander geben musst. Dies erreichst du mit der CSS-Eigenschaft letter-spacing. Als Einheit kannst du Pixel oder em wählen, Prozentwerte sind nicht möglich.

CSS Tipps Ueberschriften

9. Word-spacing

Manchmal kann es auch sein, dass es nötig ist, einen größeren oder kleineren Abstand zwischen den einzelnen Wörtern der Überschrift zu bestimmen. Auch hier kommt es wieder darauf an, welche Schriftart du wählst. Mit der CSS-Eigenschaft word-spacing in den Einheiten px oder em kannst du den Anstand bestimmen. Wie bei letter-spacing sind auch hier negative Werte erlaubt.

10. Text-shadow

Seit es mit der CSS3-Eigenschaft text-shadow ganz einfach geworden ist, einem Text einen leichten Schatten zu geben, ist dieser Stil immer beliebter geworden. Text-shadow hat 4 Werte, z.B. text-shadow: 0px 2px 3px #555; Der erste Wert bestimmt den Versatz des Schattens nach rechts, der zweite den Versatz des Schattens nach unten. Der dritte Wert steht für den Grad der Unschärfe (blur) und der letzte Wert ist der Farbwert des Schattens. Wichtig ist auch hier wieder auf eine gute Lesbarkeit der Schrift zu achten und es mit dem Schatteneffekt nicht zu übertreiben. Weitere Infos zur text-shadow Eigenschaft findest du auch noch im Artikel „Hilfreiche CSS-Tipps zur Gestaltung von Text (Teil 2)“.

11. Überschriften als Link

Auch bei der Umsetzung von Überschriften als Links (wie z.B. auf der Startseite eines Blogs üblich) gibt es jede Menge kreative Möglichkeiten. Du kannst den Link bei Hover mit text-decoration: underline; unterstreichen, eine eigene Link-Farbe wählen oder eine leichte Hintergrund-Farbe bei Hover wählen.

Gestaltest du deine Webseite auch fürs iPad oder andere Geräte mit Touchscreens solltest du darauf achten, dass dort kein Hover unterstützt wird. Bei Apple-Produkten wird standardmäßig eine leicht graue Hintergrund-Fläche mit abgerundeten Ecken angezeigt, sobald du auf einen Link klickst. Möchtest du diesen Wert individuell anpassen, kannst du über die CSS-Eigenschaft -webkit-tap-highlight-color deine eigene Farbe bestimmen.
(weitere Infos unter Safari Developer Library: Highlighting Elements).

Welche weiteren Tipps zum Thema Überschriften-Gestaltung fallen dir noch ein? Welche CSS-Eigenschaft fehlen deiner Meinung nach in der Auflistung noch? Über dein Feedback und weitere Tipps freue ich mich sehr!

20 Kommentare

  1. Also ich arbeite immer mit PX Angaben bei Schriften. Die Browser können damit ja auch sauber umgehen und skalieren das ordentlich. Werde wohl auch dabei bleiben :)

      • Da weiß ich nicht so recht. Ich nutze em, auch wenn es in modernen Browsern eigentlich nicht mehr benötigt wird ;-)

        • Das umrechnen ist mir zu viel arbeit :)
          In Photoshop nutze ich aus PX und es muss nicht erst irgendwas umgerechnet werden sondern ich kann die Werte einfach übernehmen.

    • Bei Kundenprojekten, bei denen auf Barrierefreiheit großer Wert gelegt wird, lege ich einmal global fürs Body-Tag die font-size in px fest, alles andere wird dann in em definiert.
      Damit skaliert beim Zoomen nicht nur der Text, sondern auch die Container mit.
      Da aber die meisten Browser standardmäßig eh die komplette Seite skalieren und nicht nur den Text (kann z.B. im FF unter „Ansicht > Zoom > Nur Text zoomen“ erzwungen werden) macht es meiner Meinung nach zunehmend weniger Sinn mit em zu arbeiten. ;-)

  2. sehr guter Beitrag! Danke Ellen.
    @ david: wie wir alle (du sicherlich auch) gelernt haben (lernen mussten), ist der Hintergrund der Nutzung von relativen Angaben der Usability zuzuordnen ist. Natürlich besteht die technische Möglichkeit der Browser, auch andere Angaben umzusetzten, jedoch sollten wir niemals die verschiedenen Einschränkungen unserer User „unterschätzen“ und auch auf diese beim Designen eingehen!

  3. @alle:
    Vielen herzlichen Dank für euer nettes Feedback zum Artikel und besonders zu euren Einschätzungen/Erfahrungen zu den Einheiten der Schriftgrößen. Ich finde es klasse, dass zu diesem Thema hier eine kleine Diskussion stattfindet, und ich würde die Frage px, em oder % nächste Woche gerne noch einmal in einem eigenen kleinen Artikel aufgreifen.

    Wir selbst haben bisher eigentlich auch am liebsten das Pixelmaß genutzt. Bei unserem Elmastudio-Redesign sind wir jetzt auf em umgestiegen. Das hat eigentlich recht gut geklappt und es war auch keine allzu großes Gerechne nötig ;-) Die font-size im body-tag haben wir dann auf 100% gesetzt.

    Viele Grüße,
    Ellen

  4. Moin zusammen,

    ich muss mich doch immer wieder wundern. das auch sehr viele Profis Pixel als Maßeinheit für die Schriftgröße verwenden.
    Über die oben hinterlassene Kommentare kann ich leider nur verständnislos den Kopf schütteln, weil sie teilweise sachlich leider nicht richtig sind.

    Das liegt vielleicht auch daran das bekannte Profis in der Hinsicht (in meinen Augen!) absolut unsägliches von sich gegeben haben, wie z.B. der Artikel von Gerrit van Aaken:
    http://praegnanz.de/weblog/warum-ich-pixel-fuer-css-schriftgrade-verwende

    Der Internet Explorer kann selbst in der Version 8 den Text nicht skalieren (nicht Seitenzoom!!), wenn Pixel für die Schriftgröße verwendet wird!
    Das läßt sich ganz easy durch einen kleinen Testcase feststellen.

    Ältere verwenden meiner Erfahrung nach fast immer den Textzoom, weil niemand Lust hat beim Lesen der Texte horizontal zu scrollen.

    @Ellen
    Dein Argument das man die beste Kontrolle über die Schriftgröße mit der Maßeinheit Pixel hat ist in meinen Augen leider falsch, weil die Pixel bei jeder Bildschirmauflösung/Bildschirmgröße eine andere Größe haben.
    Oder wie Peter Müller in seinem Buch „Little Boxes“ so schön geschrieben hat: „Das Web ist nicht aus Papier“. ;)
    Sogenannte pixelgenaue Darstellung ist wg der unzählig möglichen Bildschirmgrößen/Auflösungen, Browser, betriebssysteme etc. vollkommen unmöglich.
    Aus Gründen der Barrierefreiheit (wg. dann fehlendem Textzoom im IE) sollte man Pixel imho für die Schriftgröße nicht empfehlen.

    Zu line-height möchte ich noch anmerken das es nur ein Faktor ist und deshalb keine Maßeinheit benötigt. ;)

    Gruß
    Klaus

    • Ich werde bei PX bleiben, das schon mal vorweg.

      Warum kann ich denn kein Design Pixelgenau machen?
      Wenn alle anderen Sachen (grafiken, div’s etc.) auch Pixelwerte haben und meine Schriften auch dann ist das für mich schon möglich.

      Naja und das er Internet Explorer einiges nicht kann ist ja weltweit bekannt.
      Sollten sie mal was ändern daran im Hause Microsoft.

      • Hi,

        warum das nicht so geht, wie der Webdesigner sich das vorstellt habe ich begründet.
        Du kannst für dich auf deinem Bildschirm mit deinen Einstellungen selbstverständlich pixelgenau arbeiten, aber wer hat schon deinen Bildschirm mit deinen Einstellungen??

        Das die mal im Hause MS was ändern sollen, hilft den Besuchern, die mit dem IE unterwegs sind und nach einem arbeitsreichen Tag etwas surfen wollen und sich den Text vergrößern, weil das Lesen sonst zu anstrengend ist leider nicht.
        Ich versteh nicht so genau warum du diesen Besuchern den Komfort der vergrößerten Schrift trotzdem verweigern willst?
        Wenn sie dir egal sind und du das deshalb nicht möchtest, ist das natürlich deine Angelegenheit. ;)

        • Naja vielleicht hat der Benutzer auch teilweise etwas die Pflicht mit der Zeit zu gehen? Außerdem ergibt die Aussage für mich keinen Sinn das es im IE nicht funktioniert. Seitenzoom geht und somit kann man, wenn man möchte die Seite größer Darstellen. OK, der Textzoom an sich geht nicht aber das ist ja dann nicht mein Problem wenn ich ehrlich bin denn das liegt dann beim Benutzer der wohl den falschen Browser nutzt. Komisch das das Problem hier wieder beim IE liegt. Andere Browser können es ja auch.

          Und die letzten 30 Tage waren knapp 20000 Besucher auf meiner Seite und knapp 2000 davon haben den IE genutzt. Die Anzahl der potentiellen Leute die das nutzen wollten und es nicht geht ist also relativ gering (bei meiner Seite).

          Und ich baue eine Webseite auf so wie ich denke das sie aussehen sollte. Und komischerweise tut sie das auf so ziemlich jedem Bildschirm wo ich sie bisher sehen konnte. Was soll denn auch auf Bildschirmen so groß anders sein? Selbst wenn du eine andere pixeldichte hast sieht die Seite letztendlich genauso aus nur eben kleiner oder größer.

          Ach ja, ganz davon abgesehen halte ich reines Textzoomen für eh schwachsinnig da es mehr zerschießt bzw. mehr unzugänglicher macht als der – wie ich finde – bessere Seitenzoom wo wirklich alles „fast“ sauber groß gemacht wird.

          Aber vielleicht ist alles auch nur eine Glaubensfrage

          • das ist vielleicht das Problem, du gehst zu sehr von dir und deinem Umfeld aus. ;)
            Du hast keinen Einfluß darauf, welchen Browser deine Besucher nutzen und ob sie Textzoom oder Seitenzoom hernehmen möchten.
            Mir liegt es jedenfalls fern meinen Besuchern da Vorschriften machen zu wollen.

            Persönlich nutze ich zum Lesen nur den Textzoom und ich kenne auch niemand der es nicht tut, weil wie ich schon erwähnte, man bei kleineren Bildschirmen und Seitenzoom einfach zu schnell horizontal scrollen muss und die Zeilenlaufweite sonst anwächst.

            Eine Seite sollte drei Textzoomstufen aushalten, sonst ist sie imho nicht flexibel genug.

            Du kannst ja für dich und deine persönlichen Seiten den IE-Nutzern den Textzoom verweigern, das ist deine Angelegenheit.

            Bei mir sind alle willkommen, egal welcher Browser, welches Endgerät sie nutzen oder welchen Einschränkungen sie unterliegen.
            Ich finde es wichtig alles so flexibel in Szene gesetzt zu haben, das möglichst alle meine Besucher gut zurechtkommen. ;)

  5. Vielleicht bin ich da ein wenig festgefahren, mag sein.
    Aber warum kann ich nicht als Betreiber meiner Seite einen gewissen Rahmen vorgeben?

    Und so wie du keinen kennst der Seitenzoom nutzt kenne ich keinen der Textzoom nutzt.

    Aber wie gesagt es kommt auch immer auf die Zielgruppe der Seite an. Bei mir und auch bei allen Seiten die ich bisher gemacht habe kam bisher noch keine Beschwerde.

    • Selbstverständlich kannst du jeden beliebigen Rahmen vorgeben, solange die Seiten nicht für Unternehmen gemacht werden.
      Kein Unternehmer würde sich potentielle Kunden entgehen lassen, wenn es irgendwie vermeidbar wäre.

      • Die Zielgruppe ist das Problem.
        David mag recht haben, das es nur wenige gibt, die den IE nutzen. Allerdings hat Klaus (wie ich finde) recht. Macht die Seite einfach dynamischer. Stellt die Schriftgröße auf 66.6% und dann entspricht 1em = 10px. Dann ist das Rechnen super einfach und man kann sein Theme schnell umändern.
        Es gibt so vieles auf das man achten müsste/muss: Screenreader, Vorleseprogramme für Blinde, etc.
        Beispiel:
        Bei einer Seite für einen Tischtennis-Verein, braucht man auch nicht auf Blinde zu achten, da diese den Sport nicht betreiben können. ;-)
        Wie dem auch sei, jeder kann es machen wie er will. Ich bleibe bei em.

        MfG Andre

        • @Andre
          > Schriftgröße auf 66.6%
          Das gibt keine 10px, das war 62.5%. Aber auch das sollte man nicht wirklich tun. Kurzer und guter Artikel dazu:
          http://toscho.de/2009/mythos-font-size-62dot5-prozent/

          > Tischtennis und Blinde
          Vielleicht wollen ja ein paar Sehbehinderte die Ergebnisse wissen oder ich habe gestern noch gespielt und dann einen Auto-Unfall mit nachfolgender Sehbehinderung und und und … „Design for our future self“ heißt das Motto ;-)

          Peter

          • Gut, 62.5% ist natürlich richtig. Ich selbst habe allerdings immer 75%.
            Habe es in einem Webdesignbuch gelesen und nutze es deshalb auch.
            Dein Tipp ist recht gut. Und das umrechnen ist wirklich nicht schwer, sehe man sich doch mal Ellens neuen Artikel an.
            Gibt es wirklich solche Probleme mit den Browsern und der Prozentangabe?
            Bezieht sich das nicht alles auf die Normalschriftgröße?

            Und das mit dem Tischtennis ist nur ein Beispiel.
            Aber achtest du immer auf alles? Na gut, kann sein, aber es klappt ja nicht immer :D

  6. Ich möchte via Worldpress ein Buch schreiben.

    Meine Fragen:

    Wie kriege ich einen Einzug pro Absatz hin? Schreibe ich das direkt in den Blog (HTML) rein?
    Wie kann ich die genaue Breite eines Blogs in cm definieren? (Jeder Blogkommentar entspricht einer Buchszene)

    Entspricht ein Zeilenabstand im HTML dem gleichen Zeilenabstand wie auf Papier resp. kann ich das einstellen?

    PS: ich finde deine Themes super und auch die Veröffentlichungen. Verstehe momentan leider mehr als Bahnhof, aber weniger als Flughafen.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *