Design System — Typografie & Elemente

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.

Varianten: .h1--s .h1--l .h1--xl

H2 — Abschnittstitel

<h2> · Headline Bold · 2.375rem

Trennt große Sektionen. Jeder neue Themenblock bekommt ein H2.

Varianten: .h2--s .h2--l

H3 — Zwischenüberschrift

<h3> · Headline SemiBold · 1.75rem

Gliedert innerhalb einer Sektion. Unterabschnitte, Aufzählungen.

Varianten: .h3--s

H4 — Boxüberschrift

<h4> · Headline SemiBold · 1.375rem

Kompakte Überschrift in Icon-Boxen, Feature-Cards, Sidebar.

Varianten: .h4--s

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

.lead · Body Regular · 1.3125rem

Einleitungstext. Erster Absatz einer Sektion, Subheadline.

Varianten: .lead--s .lead--l

Fokus

.fokus · Headline Medium · 1.25rem

Hervorgehobener Absatz. Kernaussage, die herausstechen soll.

Varianten: .fokus--s

Caption

.caption · Body Regular · 0.875rem

Kleintext. Bildunterschriften, Hinweise, ergänzende Info.

Fine

.fine · Body Regular · 0.875rem · Grauton

Randnotiz, Kleingedrucktes. Disclaimer, Rechtshinweis, Meta-Info.

Button

.btn · Headline Bold · 1rem

CTA-Text in allen Buttons.

Varianten: .btn--s .btn--l

Intertitle

.intertitle · Headline Bold · 1.5rem

Eigenständige Zwischenüberschrift im Fließtext. Steht allein, ohne begleitendes Heading.

Varianten: .intertitle--s .intertitle--l

Subline

.subline · Headline SemiBold · 1.375rem

Untertitel, begleitet eine Überschrift. Steht immer unter einem Heading.

Varianten: .subline--s .subline--l

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.

Varianten: .kicker--s

CSS-Klassen Übersicht

Alle Klassen mit Größenvarianten. Grün markiert = Default, braucht keinen Modifier. Varianten hängen --s, --l oder --xl an.

H1 — Seitentitel

.h1--s S · 2.75 / 2 / 1.625remDefault M · 3.25 / 2.375 / 1.875rem.h1--l L · 3.75 / 2.75 / 2.125rem.h1--xl XL · 4.5 / 3.25 / 2.5rem

H2 — Abschnittstitel

.h2--s S · 2 / 1.625 / 1.375remDefault M · 2.375 / 1.875 / 1.625rem.h2--l L · 2.75 / 2.125 / 1.875rem

H3 — Zwischenüberschrift

.h3--s S · 1.5 / 1.3125 / 1.25remDefault M · 1.75 / 1.5 / 1.375rem

H4 — Boxüberschrift

.h4--s S · 1.25 / 1.125 / 1remDefault M · 1.375 / 1.25 / 1.125rem

Lead

.lead--s S · 1.125 / 1.0625 / 1rem.lead M · 1.3125 / 1.1875 / 1.0625rem.lead--l L · 1.5 / 1.3125 / 1.1875rem

Fokus

.fokus--s S · 1.125 / 1 / 0.9375rem.fokus M · 1.25 / 1.125 / 1rem

Button

.btn--s S · 0.875 / 0.8125 / 0.8125rem.btn M · 1 / 0.9375 / 0.875rem.btn--l L · 1.125 / 1.0625 / 1rem

Intertitle

.intertitle--s S · 1.3125 / 1.1875 / 1.0625rem.intertitle M · 1.5 / 1.3125 / 1.1875rem.intertitle--l L · 1.75 / 1.5 / 1.375rem

Subline

.subline--s S · 1.1875 / 1.0625 / 1rem.subline M · 1.375 / 1.25 / 1.125rem.subline--l L · 1.625 / 1.4375 / 1.25rem

Kicker

.kicker--s S · 1.0625 / 1 / 0.9375rem.kicker M · 1.25 / 1.125 / 1rem

Entscheidungshilfe

Du weißt nicht, welchen Style du nehmen sollst? Diese Tabelle hilft.

Wenn du das brauchst …		… nimm das	CSS-Klasse
Echte Seitenstruktur, SEO-relevant	→	H1 – H5	`—` (HTML-Tag)
Heading in anderer Größe	→	H-Variante	`.h1--s` `.h2--l` etc.
Semantisches Label in einer Komponente	→	H6 / Label	`—` (HTML-Tag)
Eigenständige Zwischenüberschrift im Text	→	Intertitle	`.intertitle`
Untertitel unter einer Überschrift	→	Subline	`.subline`
Dachzeile über einer Überschrift	→	Topline	`.topline`
Einzelnen Satz hervorheben	→	Highlight	`.highlight`
Kurzer Aufmerksamkeits-Einwurf	→	Kicker	`.kicker`
Einleitungsabsatz nach Überschrift	→	Lead	`.lead`
Hervorgehobener Absatz / Kernaussage	→	Fokus	`.fokus`
Begleitender Kurztext, Bildunterschrift	→	Caption	`.caption`
Kleingedrucktes, Disclaimer, Meta-Info	→	Fine	`.fine`
CTA / Handlungsaufforderung	→	Button	`.btn`

Hierarchie-Styles

Die strukturelle Basis. Echte HTML-Heading-Tags, SEO-relevant. Größenvarianten über CSS-Klassen in Elementor v4.

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

.h1--s S · 2.75 / 2 / 1.625rem Default M · 3.25 / 2.375 / 1.875rem .h1--l L · 3.75 / 2.75 / 2.125rem .h1--xl XL · 4.5 / 3.25 / 2.5rem

Einsatz: Hero-Bereich, Seitenheader. Nur einmal pro Seite. Wichtigster SEO-Titel.

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

.h2--s S · 2 / 1.625 / 1.375rem Default M · 2.375 / 1.875 / 1.625rem .h2--l L · 2.75 / 2.125 / 1.875rem

Einsatz: Jeder neue Themenblock einer Seite. Leistungen, Über uns, Kontakt.

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

.h3--s S · 1.5 / 1.3125 / 1.25rem Default M · 1.75 / 1.5 / 1.375rem

Einsatz: Unterabschnitte innerhalb eines H2-Blocks.

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

.h4--s S · 1.25 / 1.125 / 1rem Default M · 1.375 / 1.25 / 1.125rem

Einsatz: Icon-Boxen, Feature-Cards, Sidebar-Elemente.

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.

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. Nur als H6, wenn semantisch nötig — sonst → .topline

Funktions-Styles

Diese Styles definieren, was ein Text tut — unabhängig von der HTML-Hierarchie.

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

.lead--s S · 1.125 / 1.0625 / 1rem .lead M · 1.3125 / 1.1875 / 1.0625rem .lead--l L · 1.5 / 1.3125 / 1.1875rem

Einsatz: Erster Absatz nach einer Überschrift. 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

.fokus--s S · 1.125 / 1 / 0.9375rem .fokus M · 1.25 / 1.125 / 1rem

Einsatz: Kernaussage, die visuell herausstechen soll. Oft mit farbigem Akzent oder linker Linie.

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. Fine muss da sein, soll aber nicht stören (Disclaimer, Rechtshinweis).

Button CTA-Text <a> / <button> ▾

FontHeadline

GewichtBold (700)

Line-Height1.0

ZusatzUppercase optional

Zone L

1rem

Zone M

0.9375rem

Zone S

0.875rem

.btn--s S · 0.875 / 0.8125 / 0.8125rem .btn M · 1 / 0.9375 / 0.875rem .btn--l L · 1.125 / 1.0625 / 1rem

Einsatz: Alle Buttons und Call-to-Actions. Headline-Font für Aufmerksamkeit, Bold für Gewicht.

Klassen ohne H-Tag

Visuelle Auszeichnungen ohne semantisches Gewicht. Leben auf <p> oder <span> — CSS-Klasse im Advanced-Tab von Elementor vergeben.

Intertitle Eigenständige Zwischenüberschrift im Fließtext .intertitle ▾

FontHeadline

GewichtBold (700)

Line-Height1.25

ZusatzKein H-Tag

Zone L

1.5rem

Zone M

1.3125rem

Zone S

1.1875rem

.intertitle--s S · 1.3125 / 1.1875 / 1.0625rem .intertitle M · 1.5 / 1.3125 / 1.1875rem .intertitle--l L · 1.75 / 1.5 / 1.375rem

Einsatz: Steht allein im Fließtext und trennt Themen visuell. Bold und größer als Subline, weil sie ohne begleitendes Heading auskommen muss. Für Untertitel unter einer Überschrift → .subline

Subline Untertitel, begleitet eine Überschrift .subline ▾

FontHeadline

GewichtSemiBold (600)

Line-Height1.3

ZusatzKein H-Tag

Zone L

1.375rem

Zone M

1.25rem

Zone S

1.125rem

.subline--s S · 1.1875 / 1.0625 / 1rem .subline M · 1.375 / 1.25 / 1.125rem .subline--l L · 1.625 / 1.4375 / 1.25rem

Einsatz: Steht immer unter einem Heading als ergänzender Untertitel — nie allein. Für eigenständige Zwischenüberschriften → .intertitle

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. Topline nutzen, wenn es rein dekorativ ist.

Highlight Hervorgehobener Einzelsatz .highlight ▾

FontBody

GewichtSemiBold (600)

Line-Height1.65

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.

Kicker Kurzer Aufmerksamkeits-Einwurf .kicker ▾

FontHeadline

GewichtMedium (500)

Line-Height1.35

Zone L

1.25rem

Zone M

1.125rem

Zone S

1rem

.kicker--s S · 1.0625 / 1 / 0.9375rem .kicker M · 1.25 / 1.125 / 1rem

Einsatz: Kurzer Text, der Aufmerksamkeit lenkt. Vor Zitaten, Einleitung zu hervorgehobenen Blöcken, Störer-Element.

Text- & Inhaltselemente

Die HTML-Grundelemente, die auf jeder Website vorkommen.

Element	HTML-Tag	Wofür	Elementor v4
Überschriften	`<h1>` – `<h6>`	Seitenstruktur und SEO-Hierarchie	Heading-Element, HTML-Tag im Dropdown wählbar
Absatz	`<p>`	Fließtext, Standardtext	Text-Element
Link	`<a>`	Verweise auf andere Seiten oder Ressourcen	Button-Element, Text-Links im Editor
Bild	`<img>`	Bilder einbinden, Alt-Text für SEO und Barrierefreiheit	Image-Element — immer Alt-Text pflegen
Listen	`<ul>` `<ol>` `<li>`	Aufzählungen und nummerierte Listen	Icon-List oder Text-Element mit Listenfunktion
Container	`<div>`	Gruppiert Elemente, kein semantischer Wert. Basis aller Layouts in Elementor v4.	Container (Flexbox) — Standard-Wrapper
Inline-Marker	`<span>`	Teile eines Textes auszeichnen ohne Umbruch	CSS-Klasse auf Textteile (z.B. farbige Wörter)
Formulare	`<form>` `<input>`	Kontaktformulare, Lead-Generierung	Form-Element oder Plugin (WPForms etc.)

Semantische Strukturelemente

HTML5-Elemente, die Suchmaschinen und Screenreadern sagen, was welcher Bereich der Seite ist. In Elementor v4: Container → HTML-Tag ändern.

Element	HTML-Tag	Wofür	Elementor v4
Container	`<div>`	Standard-Wrapper ohne Semantik. Korrekt eingesetzt hilft er, Inhalte für Suchmaschinen klarer zu strukturieren.	Default für jeden Container (Flexbox)
Kopfbereich	`<header>`	Logo, Navigation, ggf. H1-Überschriften. Gibt Suchmaschinen Kontext für den Seitenanfang.	Container → HTML-Tag: `header`
Fußbereich	`<footer>`	Kontaktinformationen, rechtliche Hinweise, Links. Stärkt die Linkstruktur der Seite.	Container → HTML-Tag: `footer`
Hauptinhalt	`<main>`	Zentraler Seiteninhalt. Hilft Google, den wichtigsten Inhalt von Navigation und Footer zu trennen.	Container → HTML-Tag: `main`
Artikel	`<article>`	Eigenständige Inhalte wie Blogposts. Google erkennt sie als eigenständige Einheiten, was die Auffindbarkeit verbessert.	Container → HTML-Tag: `article`
Sektion	`<section>`	Thematischer Abschnitt einer Seite. Gliedert die Struktur in klar getrennte Bereiche.	Container → HTML-Tag: `section`
Seitenleiste	`<aside>`	Ergänzende Inhalte neben dem Hauptinhalt. Wird als sekundär zum Hauptinhalt identifiziert.	Container → HTML-Tag: `aside`
Navigation	`<nav>`	Navigationslinks der Webseite. Hilft Suchmaschinen die Seitenstruktur zu verstehen.	Container → HTML-Tag: `nav`

Elementor v4 Praxis: Jeder Container ist standardmäßig ein <div> mit Flexbox. Für Semantik einfach den HTML-Tag im Container ändern: Hero → <section>, Leistungsblock → <section>, Blogbeitrag → <article>, Sidebar → <aside>. Ein Klick, null Extra-Aufwand.

Gesamtübersicht Typografie

Alle Styles mit CSS-Klassen und Werten. Zone L = Breitbild + Desktop. Zone M = Laptop + Tablet. Zone S = Mobile.

Style	CSS-Klasse	Font	Gewicht	Zone L	Zone M	Zone S	LH	Zusatz
H1	—	Headline	Bold	3.25rem	2.375rem	1.875rem	1.15	—
↳ S	`.h1--s`	—		2.75rem	2rem	1.625rem	—	Nur Größe
↳ L	`.h1--l`	—		3.75rem	2.75rem	2.125rem	—	Nur Größe
↳ XL	`.h1--xl`	—		4.5rem	3.25rem	2.5rem	—	Nur Größe
H2	—	Headline	Bold	2.375rem	1.875rem	1.625rem	1.2	—
↳ S	`.h2--s`	—		2rem	1.625rem	1.375rem	—	Nur Größe
↳ L	`.h2--l`	—		2.75rem	2.125rem	1.875rem	—	Nur Größe
H3	—	Headline	SemiBold	1.75rem	1.5rem	1.375rem	1.25	—
↳ S	`.h3--s`	—		1.5rem	1.3125rem	1.25rem	—	Nur Größe
H4	—	Headline	SemiBold	1.375rem	1.25rem	1.125rem	1.3	—
↳ S	`.h4--s`	—		1.25rem	1.125rem	1rem	—	Nur Größe
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	`.lead`	Body	Regular	1.3125rem	1.1875rem	1.0625rem	1.55	—
↳ S	`.lead--s`	—		1.125rem	1.0625rem	1rem	—	Nur Größe
↳ L	`.lead--l`	—		1.5rem	1.3125rem	1.1875rem	—	Nur Größe
Fokus	`.fokus`	Headline	Medium	1.25rem	1.125rem	1rem	1.45	Farbig / Linie
↳ S	`.fokus--s`	—		1.125rem	1rem	0.9375rem	—	Nur Größe
Caption	`.caption`	Body	Regular	0.875rem	0.8125rem	0.75rem	1.5	—
Fine	`.fine`	Body	Regular	0.875rem	0.8125rem	0.75rem	1.45	Farbe: 55% Text
Button	`.btn`	Headline	Bold	1rem	0.9375rem	0.875rem	1.0	UC optional
↳ S	`.btn--s`	—		0.875rem	0.8125rem	0.8125rem	—	Nur Größe
↳ L	`.btn--l`	—		1.125rem	1.0625rem	1rem	—	Nur Größe
Intertitle	`.intertitle`	Headline	Bold	1.5rem	1.3125rem	1.1875rem	1.25	Kein H-Tag
↳ S	`.intertitle--s`	—		1.3125rem	1.1875rem	1.0625rem	—	Nur Größe
↳ L	`.intertitle--l`	—		1.75rem	1.5rem	1.375rem	—	Nur Größe
Subline	`.subline`	Headline	SemiBold	1.375rem	1.25rem	1.125rem	1.3	Kein H-Tag
↳ S	`.subline--s`	—		1.1875rem	1.0625rem	1rem	—	Nur Größe
↳ L	`.subline--l`	—		1.625rem	1.4375rem	1.25rem	—	Nur Größe
Topline	`.topline`	Body	Bold	0.8125rem	0.75rem	0.75rem	1.4	UC + Track 1.5px
Highlight	`.highlight`	Body	SemiBold	1.0625rem	1rem	0.9375rem	1.65	—
Kicker	`.kicker`	Headline	Medium	1.25rem	1.125rem	1rem	1.35	—
↳ S	`.kicker--s`	—		1.0625rem	1rem	0.9375rem	—	Nur Größe