Vergib eine Klasse zwischen t-heading--display (sehr groß) und t-heading--xs (sehr klein). Schriftart, Gewicht und Farbe kommen automatisch mit.
Die Stufen
| Klasse | Typischer Einsatz |
|---|---|
t-heading--display |
Sehr große Hero-Schrift auf der Startseite |
t-heading--xxl |
Hauptüberschrift einer Landingpage |
t-heading--xl |
Hauptüberschrift einer Unterseite |
t-heading--l |
Sektionsüberschrift — der Standardfall |
t-heading--m |
Unterüberschrift, Titel in einer Karte |
t-heading--s |
Kleine Überschrift innerhalb eines Abschnitts |
t-heading--xs |
Kleinste Stufe, z. B. Beschriftung einer Box |
So gehst du vor
- Überschriften-Widget in den Container ziehen.
- Im Reiter Inhalt die HTML-Ebene wählen — H1, H2, H3. Das ist die Gliederung für Google und Screenreader.
- Im Reiter Erweitert bei CSS-Klassen die Größe eintragen, z. B.
t-heading--l.
Größe und Ebene sind zwei Dinge
Das ist der Punkt, der am häufigsten Verwirrung stiftet: Die HTML-Ebene bestimmt die Bedeutung, die Klasse bestimmt das Aussehen. Beides ist unabhängig.
Du kannst also eine H2 mit t-heading--xs ganz klein darstellen, wenn das gestalterisch passt — die Gliederung bleibt trotzdem korrekt. Mehr dazu im Artikel Warum eine H1 klein aussehen darf.
Abstand nach unten
Überschriften bringen keinen eigenen Abstand mit. Wenn du Luft zum Text darunter brauchst, nimm einen Helfer dazu:
t-heading--l u-mb--m — Sektionsüberschrift mit mittlerem Abstand nach unten.
Achtung: Genau eine Größenklasse pro Überschrift.
t-heading t-heading--l ist falsch — t-heading allein gehört nicht in den Editor.