Eine Eyebrow ist im Webdesign eine kurze Textzeile oberhalb einer Überschrift. Sie ordnet den folgenden Inhalt ein, zum Beispiel durch eine Rubrik, ein Thema oder eine Zielgruppe. Die Eyebrow ist meist kleiner und unauffälliger gestaltet als die eigentliche Überschrift. Auf Deutsch wird sie häufig als Dachzeile bezeichnet.

Was bedeutet Eyebrow?

Das englische Wort „Eyebrow“ bedeutet „Augenbraue“. Im Webdesign beschreibt es bildlich die Position einer kurzen Zeile über der Headline. Je nach Designsystem oder redaktionellem Umfeld begegnen Ihnen dafür auch die Begriffe „Overline“ oder „Kicker“. Diese Bezeichnungen werden nicht überall einheitlich verwendet.

Die Aufgaben sind klar verteilt: Die Eyebrow liefert den Kontext, die Überschrift vermittelt die Hauptaussage. Das Cedar Design System von REI verwendet Eyebrows beispielsweise zur Einordnung von Inhalten in Themen und Kategorien.

Beispiel: Eyebrow, Überschrift und Untertitel

Auf einer Leistungsseite könnte die Kombination so aussehen:

WEBDESIGN FÜR HANDWERKSBETRIEBE

Eine Website, die Ihre Arbeit zeigt

Präsentieren Sie Leistungen und Referenzen und machen Sie es Interessenten leicht, Kontakt aufzunehmen.

Eyebrow: „Webdesign für Handwerksbetriebe“ nennt das Thema und die Zielgruppe.
Überschrift: „Eine Website, die Ihre Arbeit zeigt“ trägt die zentrale Aussage.
Untertitel: Der ergänzende Text unter der Überschrift erläutert das Angebot.

Eine Eyebrow steht also über der Überschrift, ein Untertitel üblicherweise darunter. Beide sind optional. Ein Badge wie „Neu“ oder „Bestseller“ kennzeichnet dagegen meist einen Status oder eine Eigenschaft und kann auch unabhängig von einer Überschrift erscheinen.

Wo werden Eyebrows eingesetzt?

In der Hero Section: Eine Dachzeile nennt die Leistung oder die angesprochene Zielgruppe.
In Ratgebern und Blogs: Die Rubrik „Website-Pflege“ steht über einer konkreten Artikelüberschrift.
Bei Referenzen: „WooCommerce-Projekt“ ordnet eine vorgestellte Kundenarbeit ein.
In Inhaltskarten und Teasern: Kategorien helfen dabei, unterschiedliche Inhalte beim Überfliegen zuzuordnen.

Wie gestaltet man eine gute Eyebrow?

Eine Eyebrow sollte eine zusätzliche Information liefern. „Unsere Leistungen“ über „Unsere Leistungen im Überblick“ wiederholt weitgehend dieselbe Aussage. „Wartung und Support“ über „Damit Ihre Website zuverlässig läuft“ ergänzt dagegen einen konkreten Kontext.

Kurz formulieren: Wenige verständliche Wörter reichen häufig aus. Eine feste Wortzahl gibt es nicht.
Visuell unterordnen: Die Hauptüberschrift sollte deutlich mehr Gewicht haben.
Lesbar bleiben: Kleine Schrift und sehr blasse Farben erschweren das Lesen. Für normalen Text sieht WCAG auf Stufe AA mindestens 4,5:1 Kontrast vor.
Mobil prüfen: Auch auf schmalen Bildschirmen muss die Zeile lesbar bleiben und bei Bedarf umbrechen dürfen. Mehr dazu unter Responsive Design.
Gezielt einsetzen: Nicht jede Überschrift braucht eine Dachzeile. Ohne zusätzlichen Informationswert kann sie entfallen.

Großbuchstaben und etwas mehr Buchstabenabstand sind mögliche Stilmittel, aber keine Pflicht. Entscheidend sind eine erkennbare Rangfolge der Texte und gute Lesbarkeit. Die Anforderungen an den Textkontrast erläutert das W3C zu WCAG 1.4.3.

Eyebrow in HTML und barrierefreies Webdesign

„Eyebrow“ bezeichnet eine gestalterische Funktion und keine eigene HTML-Überschriftenebene. Eine ergänzende Dachzeile kann als Absatz vor der eigentlichen Überschrift stehen. Das Element hgroup kann beide zusammenfassen:

<hgroup>
  <p class="eyebrow">Webdesign</p>
  <h1>Ihre Leistungen im Fokus</h1>
</hgroup>

Im Beispiel ist nur die Hauptüberschrift eine h1. Die Klasse eyebrow lässt sich mit CSS gestalten. hgroup ist eine mögliche Gruppierung, keine Voraussetzung für eine Eyebrow. Der HTML-Standard beschreibt die Verbindung einer Überschrift mit zugehörigen Absätzen.

Verwenden Sie nicht allein wegen der kleinen Schrift eine h5 oder h6: Überschriftenebenen bilden die inhaltliche Gliederung ab. Die Hauptüberschrift sollte auch für sich verständlich sein, weil Nutzer mit Screenreadern gezielt zwischen Überschriften navigieren können. Gehört die Dachzeile zwingend zum Titel, kann sie als gestaltetes span innerhalb der Überschrift eingebunden werden. Das GOV.UK Design System zeigt beide Varianten.

Häufige Fragen zu Eyebrows

Brauche ich eine Eyebrow, wenn die Seite bereits eine Breadcrumb-Navigation hat?

Prüfen Sie, ob beide dieselbe Information liefern. Zeigt die Breadcrumb bereits „Leistungen → Webdesign“, bringt „Webdesign“ direkt über der Überschrift oft wenig zusätzlichen Nutzen. Eine Eyebrow wie „Für Handwerksbetriebe“ kann dagegen die Zielgruppe ergänzen. Die Breadcrumb zeigt den Weg durch die Website, die Eyebrow ordnet den konkreten Inhalt ein. Ergänzt sie keinen hilfreichen Kontext, können Sie sie weglassen.

Wie füge ich eine Eyebrow in WordPress ein?

Fügen Sie im WordPress-Blockeditor einen Absatz-Block direkt vor der betreffenden Überschrift ein. Schreiben Sie die Dachzeile hinein und passen Sie in den Blockeinstellungen Schriftgröße und Farbe an die Gestaltung Ihrer Website an. Die verfügbaren Optionen hängen vom Theme ab; die WordPress-Dokumentation zum Absatz-Block beschreibt die Einstellungen. Für diese einfache Umsetzung benötigen Sie kein zusätzliches Plugin.

Arbeiten Sie mit einem Page Builder, verwenden Sie ein Textelement oberhalb der Überschrift und prüfen Sie dessen HTML-Tag: Für eine ergänzende Kontextzeile eignet sich p. Die Schriftgröße stellen Sie über die Gestaltung ein. Zeigt Ihr Theme den Seitentitel automatisch an, binden Sie die Eyebrow dort ein, wo dieser Titel ausgegeben wird, beispielsweise im zugehörigen Template. Ein Absatz im Seiteninhalt erscheint sonst möglicherweise darunter.

Was tun, wenn die Eyebrow auf dem Smartphone zu lang wird?

Kürzen Sie zuerst den Text auf die entscheidende Information: Aus „Unsere professionellen Webdesign-Leistungen für Handwerksbetriebe“ wird etwa „Webdesign für Handwerksbetriebe“. Falls nötig, darf die Zeile umbrechen. Verkleinern Sie die Schrift nicht nur, damit alles in eine Zeile passt. Prüfen Sie außerdem, ob Dachzeile und Überschrift nach dem Umbruch noch als zusammengehörig erkennbar sind. Wichtiger Kontext sollte auch mobil sichtbar bleiben.