Version 1.0 — April 2026
Design System Typografie
Typografie, Textklassen und HTML-Elemente. Ein praxisnahes Nachschlagewerk für konsistente Websites mit WordPress und Elementor.
Schnellreferenz
Alle Styles auf einen Blick. Was gibt es, wofür ist es gedacht?
H1 — Seitentitel
<h1> · Headline Bold · 3.25rem
Einmal pro Seite, größte Überschrift. Steht im Hero oder Seitenheader.
H2 — Abschnittstitel
<h2> · Headline Bold · 2.375rem
Trennt große Sektionen. Jeder neue Themenblock bekommt ein H2.
H3 — Zwischenüberschrift
<h3> · Headline SemiBold · 1.75rem
Gliedert innerhalb einer Sektion. Unterabschnitte, Aufzählungen.
H4 — Boxüberschrift
<h4> · Headline SemiBold · 1.375rem
Kompakte Überschrift in Icon-Boxen, Feature-Cards, Sidebar.
H5 — Kleinüberschrift
<h5> · Headline Medium · 1.125rem
Tertiäre Gliederung: Akkordeon-Titel, Tab-Überschriften, Listen.
H6 / Label
<h6> · Body Bold · 0.8125rem · Uppercase
Funktionaler Marker. Kategorie-Tags, Eyebrow über H2.
Body
<p> · Body Regular · 1.0625rem
Normaler Lesetext. Fließtext, Absätze, Standardinhalt.
Lead
<p> · Body Regular · 1.3125rem
Einleitungstext. Erster Absatz einer Sektion, Subheadline.
Fokus
<p> · Headline Medium · 1.25rem
Hervorgehobener Absatz. Kernaussage, die herausstechen soll.
Caption
<p> · Body Regular · 0.875rem
Kleintext. Bildunterschriften, Hinweise, ergänzende Info.
Fine
<p> · Body Regular · 0.875rem · Grauton
Randnotiz, Kleingedrucktes. Disclaimer, Rechtshinweis, Meta-Info.
Button
<a> / <button> · Headline Bold · 1rem
CTA-Text in allen Buttons.
Subline
.subline · Headline SemiBold · 1.375rem
Visuelle Zwischenüberschrift ohne H-Tag. Absatz-Trenner im Fließtext.
Topline
.topline · Body Bold · 0.8125rem · Uppercase
Dachzeile über einer Überschrift. Rein dekorativ, kein H-Tag.
Highlight
.highlight · Body SemiBold · 1.0625rem
Einzelner hervorgehobener Satz. Kernaussage in einem Textblock.
Kicker
.kicker · Headline Medium · 1.25rem
Kurzer Einwurf, der Aufmerksamkeit lenkt. Zitat-Einleitung, Störer.
Entscheidungshilfe
Du weißt nicht, welchen Style du nehmen sollst? Diese Tabelle hilft.
| Wenn du das brauchst … | … nimm das | |
|---|---|---|
| Echte Seitenstruktur, SEO-relevant | → | H1 – H5 |
| Semantisches Label in einer Komponente | → | H6 / Label |
| Visuelle Gliederung ohne SEO-Wirkung | → | Subline (Klasse) |
| Dachzeile über einer echten Überschrift | → | Topline (Klasse) |
| Einzelnen Satz hervorheben | → | Highlight (Klasse) |
| Kurzer Aufmerksamkeits-Einwurf | → | Kicker (Klasse) |
| Einleitungsabsatz nach Überschrift | → | Lead |
| Hervorgehobener Absatz / Kernaussage | → | Fokus |
| Begleitender Kurztext (Bildunterschrift) | → | Caption |
| Kleingedrucktes, Disclaimer, Meta-Info | → | Fine |
| CTA / Handlungsaufforderung | → | Button |
Hierarchie-Styles
Die strukturelle Basis. Diese Styles nutzen echte HTML-Heading-Tags und bilden die Informationsarchitektur der Seite ab. SEO-relevant.
H1 — Seitentitel
Einmal pro Seite, größte Überschrift
<h1>
▾
FontHeadline
GewichtBold (700)
Line-Height1.15
HTML-Tag
<h1>Zone L
3.25rem
Zone M
2.375rem
Zone S
1.875rem
Einsatz: Hero-Bereich, Seitenheader. Nur einmal pro Seite verwenden. Die H1 ist der wichtigste SEO-Titel der Seite.
H2 — Abschnittstitel
Trennt große Sektionen
<h2>
▾
FontHeadline
GewichtBold (700)
Line-Height1.2
HTML-Tag
<h2>Zone L
2.375rem
Zone M
1.875rem
Zone S
1.625rem
Einsatz: Jeder neue Themenblock einer Seite. Leistungen, Über uns, Kontakt — jede große Sektion bekommt ein H2.
H3 — Zwischenüberschrift
Gliedert innerhalb einer Sektion
<h3>
▾
FontHeadline
GewichtSemiBold (600)
Line-Height1.25
HTML-Tag
<h3>Zone L
1.75rem
Zone M
1.5rem
Zone S
1.375rem
Einsatz: Unterabschnitte innerhalb eines H2-Blocks. Einzelne Leistungen, Teilbereiche eines Themas.
H4 — Boxüberschrift
Kompakte Überschrift in Modulen
<h4>
▾
FontHeadline
GewichtSemiBold (600)
Line-Height1.3
HTML-Tag
<h4>Zone L
1.375rem
Zone M
1.25rem
Zone S
1.125rem
Einsatz: Icon-Boxen, Feature-Cards, Sidebar-Elemente. Überall dort, wo eine Überschrift in einem kompakten Modul sitzt.
H5 — Kleinüberschrift
Tertiäre Gliederung
<h5>
▾
FontHeadline
GewichtMedium (500)
Line-Height1.3
HTML-Tag
<h5>Zone L
1.125rem
Zone M
1rem
Zone S
1rem
Einsatz: Akkordeon-Titel, Tab-Überschriften, Listenüberschriften. Seltener auf normalen Seiten, häufiger in UI-Komponenten.
H6 / Label
Funktionaler Marker, Eyebrow
<h6>
▾
FontBody
GewichtBold (700)
Line-Height1.4
ZusatzUppercase, Tracking 1.5px
Zone L
0.8125rem
Zone M
0.75rem
Zone S
0.75rem
Einsatz: Kategorie-Tags, Eyebrow-Text über H2 (z.B. „UNSERE LEISTUNGEN"). Keine echte Überschrift, sondern ein Signalgeber. Nur dort als H6, wo ein Heading-Tag semantisch Sinn ergibt (z.B. in Cards). Sonst → Topline (Klasse).
Funktions-Styles
Diese Styles definieren, was ein Text tut — unabhängig von der HTML-Hierarchie. Sie werden über Elementor Global Styles oder CSS-Klassen gesteuert.
Body
Normaler Lesetext
<p>
▾
FontBody
GewichtRegular (400)
Line-Height1.65
Zone L
1.0625rem
Zone M
1rem
Zone S
0.9375rem
Einsatz: Fließtext, Absätze, Standardinhalt. Die Basis, auf der alles andere aufbaut.
Lead
Einleitungstext, Subheadline
.lead
▾
FontBody
GewichtRegular (400)
Line-Height1.55
Zone L
1.3125rem
Zone M
1.1875rem
Zone S
1.0625rem
Einsatz: Erster Absatz nach einer Überschrift. Die Brücke zwischen Headline und Fließtext. Body-Font, weil es zum Text überleiten soll, nicht an der Überschrift kleben.
Fokus
Hervorgehobener Absatz
.fokus
▾
FontHeadline
GewichtMedium (500)
Line-Height1.45
ZusatzFarbig oder mit Linie
Zone L
1.25rem
Zone M
1.125rem
Zone S
1rem
Einsatz: Kernaussage, die visuell herausstechen soll. Oft mit farbigem Akzent oder linker Linie. Nutzt die Headline-Schrift für Gewicht.
Caption
Kleintext, Begleitinfo
.caption
▾
FontBody
GewichtRegular (400)
Line-Height1.5
Zone L
0.875rem
Zone M
0.8125rem
Zone S
0.75rem
Einsatz: Bildunterschriften, Hinweise, ergänzende Informationen. Gehört inhaltlich zum Haupttext, ist aber sekundär.
Fine
Randnotiz, Kleingedrucktes
.fine
▾
FontBody
GewichtRegular (400)
Line-Height1.45
ZusatzFarbe: 55% der Textfarbe
Zone L
0.875rem
Zone M
0.8125rem
Zone S
0.75rem
Abgrenzung zu Caption: Gleiche Größe, aber visuell leiser durch reduzierten Kontrast. Caption gehört zum Inhalt (Bildunterschrift). Fine muss da sein, soll aber nicht stören (Disclaimer, Rechtshinweis, „Stand: März 2026").
Button
CTA-Text
<a> / <button>
▾
FontHeadline
GewichtBold (700)
Line-Height1.0
ZusatzUppercase optional
Zone L
1rem
Zone M
0.9375rem
Zone S
0.875rem
Einsatz: Alle Buttons und Call-to-Actions. Headline-Font für Aufmerksamkeit, Bold für Gewicht. Uppercase je nach Projekt.
Klassen ohne H-Tag
Visuelle Auszeichnungen ohne semantisches Gewicht. Leben auf <p> oder <span> und werden über CSS-Klassen im Advanced-Tab von Elementor gesteuert.
Subline
Visuelle Zwischenüberschrift im Fließtext
.subline
▾
FontHeadline
GewichtSemiBold (600)
Line-Height1.3
HTML
<p class="subline">Zone L
1.375rem
Zone M
1.25rem
Zone S
1.125rem
Einsatz: Optisch wie H4, aber ohne Heading-Tag. Perfekt für thematische Wechsel innerhalb einer Sektion, wo ein echtes H4 die Heading-Hierarchie zerstören würde.
Topline
Dachzeile über einer Überschrift
.topline
▾
FontBody
GewichtBold (700)
Line-Height1.4
ZusatzUppercase, Tracking 1.5px
Zone L
0.8125rem
Zone M
0.75rem
Zone S
0.75rem
Abgrenzung zu H6/Label: Gleicher Look, aber kein Heading-Tag. H6 nutzen, wenn semantisch ein Heading nötig ist (z.B. in einer Card mit eigener Struktur). Topline nutzen, wenn es rein dekorativ ist.
Highlight
Hervorgehobener Einzelsatz
.highlight
▾
FontBody
GewichtSemiBold (600)
Line-Height1.65
HTML
<p class="highlight">Zone L
1.0625rem
Zone M
1rem
Zone S
0.9375rem
Abgrenzung zu Fokus: Highlight ist Body-Größe mit mehr Gewicht — ein einzelner Satz, der rauspoppt. Fokus ist ein ganzer Absatz mit eigenem visuellen System (Headline-Font, Farbe, Linie).
Kicker
Kurzer Aufmerksamkeits-Einwurf
.kicker
▾
FontHeadline
GewichtMedium (500)
Line-Height1.35
HTML
<p class="kicker">Zone L
1.25rem
Zone M
1.125rem
Zone S
1rem
Einsatz: Kurzer Text, der Aufmerksamkeit lenkt. Vor einem Zitat, als Einleitung zu einem hervorgehobenen Block, als Störer-Element in einer Sektion.
Text- & Inhaltselemente
Die HTML-Grundelemente, die auf jeder Website vorkommen. Was sie tun, und wie sie in Elementor abgebildet werden.
| Element | HTML-Tag | Wofür | Elementor |
|---|---|---|---|
| Überschriften | <h1> – <h6> |
Seitenstruktur und SEO-Hierarchie | Heading-Widget, HTML-Tag im Dropdown wählbar |
| Absatz | <p> |
Fließtext, Standardtext | Text-Editor-Widget, jeder normale Textblock |
| Link | <a> |
Verweise auf andere Seiten oder Ressourcen | Button-Widget, Text-Links im Editor |
| Bild | <img> |
Bilder einbinden, Alt-Text für SEO | Image-Widget — immer Alt-Text pflegen |
| Listen | <ul> <ol> <li> |
Aufzählungen und nummerierte Listen | Icon-List oder Text-Editor mit Listenfunktion |
| Container | <div> |
Gruppiert Elemente, kein semantischer Wert | Elementor Container — die Basis von allem |
| Inline-Marker | <span> |
Teile eines Textes auszeichnen ohne Umbruch | Custom CSS auf Textteile (z.B. farbige Wörter) |
| Formulare | <form> <input> |
Kontaktformulare, Lead-Generierung | Elementor Form-Widget oder Plugin (WPForms etc.) |
Semantische Strukturelemente
HTML5-Elemente, die Suchmaschinen und Screenreadern sagen, was welcher Bereich der Seite ist. Kein Nutzer sieht sie — aber Google versteht die Seite damit deutlich besser.
| Element | HTML-Tag | Wofür | Elementor |
|---|---|---|---|
| Kopfbereich | <header> |
Logo, Navigation, ggf. H1 | Header-Template im Theme Builder |
| Fußbereich | <footer> |
Kontaktinfo, rechtliche Links | Footer-Template im Theme Builder |
| Hauptinhalt | <main> |
Zentraler Seiteninhalt, trennt Kern vom Rest | Wird vom Theme automatisch gesetzt |
| Navigation | <nav> |
Menüstruktur | Nav-Widget, wird automatisch gewrappt |
| Sektion | <section> |
Thematischer Abschnitt einer Seite | Container → Layout → HTML-Tag: section |
| Artikel | <article> |
Eigenständiger Inhalt (Blogpost, News) | Wird bei Posts vom Theme automatisch gesetzt |
| Seitenleiste | <aside> |
Ergänzende Inhalte neben dem Hauptinhalt | Sidebar, in Elementor selten manuell nötig |
Praxisregel: Jeder Elementor-Container bekommt den passenden HTML-Tag. Also nicht alles auf <div> lassen, sondern: Hero →
<section>, Leistungsblock → <section>, Blogbeitrag → <article>, Sidebar → <aside>. Das ist in Elementor ein Klick (Container → Layout → HTML-Tag) und kostet null Extra-Aufwand.
Gesamtübersicht Typografie
Alle Styles auf einen Blick mit allen Werten. Zone L = Breitbild + Desktop. Zone M = Laptop + Tablet. Zone S = Mobile.
| Style | Font | Gewicht | Zone L | Zone M | Zone S | LH | Zusatz |
|---|---|---|---|---|---|---|---|
| H1 | Headline | Bold | 3.25rem | 2.375rem | 1.875rem | 1.15 | — |
| H2 | Headline | Bold | 2.375rem | 1.875rem | 1.625rem | 1.2 | — |
| H3 | Headline | SemiBold | 1.75rem | 1.5rem | 1.375rem | 1.25 | — |
| H4 | Headline | SemiBold | 1.375rem | 1.25rem | 1.125rem | 1.3 | — |
| H5 | Headline | Medium | 1.125rem | 1rem | 1rem | 1.3 | — |
| H6/Label | Body | Bold | 0.8125rem | 0.75rem | 0.75rem | 1.4 | UC + Track 1.5px |
| Body | Body | Regular | 1.0625rem | 1rem | 0.9375rem | 1.65 | — |
| Lead | Body | Regular | 1.3125rem | 1.1875rem | 1.0625rem | 1.55 | — |
| Fokus | Headline | Medium | 1.25rem | 1.125rem | 1rem | 1.45 | Farbig / Linie |
| Caption | Body | Regular | 0.875rem | 0.8125rem | 0.75rem | 1.5 | — |
| Fine | Body | Regular | 0.875rem | 0.8125rem | 0.75rem | 1.45 | Farbe: 55% Text |
| Button | Headline | Bold | 1rem | 0.9375rem | 0.875rem | 1.0 | UC optional |
| Subline | Headline | SemiBold | 1.375rem | 1.25rem | 1.125rem | 1.3 | Klasse, kein H-Tag |
| Topline | Body | Bold | 0.8125rem | 0.75rem | 0.75rem | 1.4 | UC + Track 1.5px |
| Highlight | Body | SemiBold | 1.0625rem | 1rem | 0.9375rem | 1.65 | — |
| Kicker | Headline | Medium | 1.25rem | 1.125rem | 1rem | 1.35 | — |