Überschriften
Symbolgrafik für Überschrift: Schriftzug H1 über Balken, die einen Absatz symbolisieren.

Visuelle Darstellung von Überschriften

Überschriften sollten visuell den Inhalt gut strukturieren und möglichst gut lesbar sein. Die intuitive und effiziente Wahrnehmung des Inhalts kann auf diese Weise erleichtert werden.

Abgesehen von Kontrastanforderungen beziehen sich die folgenden Empfehlungen weithin auf Überlegungen zur Nutzungsfreundlichkeit (Useability).

Absatzformatierungen

Zur visuellen Differenzierung gegenüber anderen Blockelementen auf einer Webseite stehen folgende Darstellungsmöglichkeiten zur Verfügung:

Vertikale Abstände

Der Abstand zum darüber gelegenen Blockelement ist gewöhnlich signifikant größer als zwischen einfachen Absätzen oder Listenelementen. Auch unterhalb wird der Abstand meist leicht erhöht.

Einrücken und Zentrieren

Der horizontale Abstand wird links gegenüber anderen Blockelementen erhöht.

Bei der Verwendung einer Vergrößerungssoftware kann bei einem größeren linken Abstand vom gewöhnlichen Textbereich eine Überschrift übersehen werden. Wird der gezoomte Bereich lediglich vertikal bewegt kann die Überschrift außerhalb des Zoomfensters bleiben. Für Menschen, die eine Lupenfunktionalität verwenden oder Gesichtsfeldausfälle aufweisen, sollten Elemente weithin linksbündig angeordnet sein.

Überschriftenebenen visuell differenzieren

Gestaltungsmöglichkeiten sollten auch zur Differenzierung von Überschriftenebenen herangezogen werden. Untergeordnete Überschriften werden visuell weniger hervorgehoben.

Aktuell werden Überschriften auf Zweiter Blick folgendermaßen visuell abgestuft:

Ebene 1

Ebene 2

Ebene 3

Ebene 4

Ebene 5
Ebene 6

Schriftgestaltung

Schriftgrößen

Die Schriftgröße stellt einen zentralen Indikator für eine Überschrift dar. Innerhalb eines Seitenbereichs wie dem Hauptinhalt werden darüber hinaus Überschriftenebenen durch abgestufte Schriftgrößen hervorgehoben.

Schriftfarbe und Hintergrund

Die Änderung der Schriftfarbe oder Hintergrundfarbe als visueller Indikator für Überschriften birgt einige Herausforderungen in sich:

Schriftarten

Da Überschriften vor allem auch das diagonale Lesen erleichtern, sollten sie allgemein über eine gut lesbare Schriftart verfügen.

Ungewöhnliche Schriftarten, die als Textgrafik in eine Überschrift eingefügt werden müssen, sollten vermieden werden. Eine Abbildung von Text muss im Wesentlichen Logos vorbehalten bleiben.

Unterstreichung

Überschriften sollten auf Webseiten und digitalen Dokumenten nicht grundsätzlich solid unterstrichen werden. Eine Unterstreichung hat sich als Indikator für Links durchgesetzt und sollte diesen daher vorbehalten bleiben.

Es spricht aber nichts dagegen, Überschriften gepunktet, strichliert oder doppelt zu unterstreichen. Vorausgesetzt ist lediglich, dass derartige Formatierungen auf dem Webauftritt nicht gleichzeitig als Fokusindikator verwendet werden.

CSS zur technischen Realisierung

Die visuelle Darstellung von Überschriften sollte weithin über CSS-Dateien für den gesamten Webauftritt erfolgen. Dies gewährleistet ein einheitliches Erscheinungsbild und die Wiedererkennbarkeit der Semantik.

Gestaltungsmöglichkeiten durch CSS-Anweisungen

Für die bereits angeführten und weitere Gestaltungsmöglichkeiten stehen in CSS typischerweise folgende Anweisungen zur Verfügung (alphabetisch sortiert):

background
Festlegen einer Hintergrundfarbe oder einer Hintergrundgrafik.
Beispiel: background: red
MDN | background
color
Festlegen der Schriftfarbe.
Beispiel: color: green
MDN | color
font-family
Festlegen der Schriftart (mit oder ohne Serifen, …)
Beispiele:
  • font-family: serif
  • font-family: sans-serif
  • font-family: monospace
MDN | font-family
font-size
Festlegen der Schriftgröße.
Beispiele:
  • font-size: 25px
  • font-size: 20px
  • font-size: 16px
MDN | font-size
font-style
Text kursiv formatieren
Beispiel: font-style: italic
MDN | font-style
font-weight
Festlegen der Strichstärke (Fett formatieren).
Beispiel:
  • font-weight: normal
  • font-weight: bold
MDN | font-weight
letter-spacing
Erhöhte Zeichenabstände festlegen.
Beispiel: letter-spacing: 2px
MDN | letter-spacing
margin
Festlegen von Außenabständen einer Überschrift (meist margin-top und margin-bottom)
Beispiel:
  • margin: 0
  • margin: 0
  • margin-top: 1ex
  • margin-bottom: 1ex
  • margin: 0
  • margin: 0
MDN | margin
padding-left
Einrücken von Text innerhalb eines Elements.
Beispiel:
  • padding: 0
  • padding-left: 1em
MDN | padding-left
text-align
Festlegen der horizontalen Ausrichtung des Texts in einem Element (linksbündig / zentriert / rechtsbündig)
Beispiele:
  • text-align: left
  • text-align: center
  • text-align: right
MDN | text-align
text-decoration
Festlegen von Unterstreichungen.
Beispiel: text-decoration: underline
MDN | text-decoration
text-transform
Festlegen der Groß- und Kleinschreibung
Beispiel: text-transform: uppercase
MDN | text-transform

Darstellung für Responsive Design

Am Desktop Bildschirm kann bei der Überschriftengestaltung durchaus geklotzt werden. Auf den kleinen Displays von Smart Phones hingegen empfiehlt sich eine dezente Vergrößerung von Schriften und Abständen.

WCAG Erfolgskriterien

Folgende Erfolgskriterien sind für die visuelle Darstellung von Überschriften von Relevanz:

1.4.3: Kontrast (Minimum)
Überschriften benötigen einen bestimmten Helligkeitskontrast zum Hintergrund, auch wenn sie über eine erhöhte Schriftgröße verfügen.
1.4.6 Kontrast (Erhöht)
Konformitätsstufe AAA
Der Helligkeitskontrast muss in der Regel anspruchsvoller mindestens einem Kontrastverhältnis von 7∶1 entsprechen.
1.4.5: Abbildung von Text
Wo immer möglich, muss Text als solcher verfügbar sein. Eine Abbildung von Text sollte vermieden werden.
1.4.9 Abbildung von Text (Ohne Ausnahme)
Konformitätsstufe AAA
Texte werden lediglich dann in einer Grafik abgebildet, wenn sie rein dekorativ sind oder die Abbildung unverzichtbar ist.