Typografie Muster
Eine mehrsprachige Testseite für Überschriften, Fließtext, Inline-Formatierung, Listen, Checkboxen, Tabellen, Code und Bilder.
2026-06-21 · 2 Min. Lesezeit
H1 Schauüberschrift
Der Untertitel steht zwischen Titel und Fließtext. Er soll klar lesbar bleiben, sauber umbrechen und in mehreren Sprachen ruhig wirken.
Fließtext zeigt den normalen Lesestil. Dieser Absatz enthält fette Betonung, kursive Betonung, markierten Text, gelöschten Text, eingefügten Text, Inline-Code, Ctrl + K, H2O, x2, i18n und einen normalen Textlink.
Kleiner Text eignet sich für Bildunterschriften, Hinweise und ruhige Metadaten.
H2 Abschnittsüberschrift#
Die zweite Ebene trennt große Abschnitte. Sie soll die Seite führen, ohne den Fließtext zu verdrängen.
H3 Unterabschnitt#
Die dritte Ebene hilft beim Scannen. Sie soll klarer wirken als normaler fetter Text.
H4 Kleine Überschrift#
Die vierte Ebene passt für kompakte Gruppen, kurze Abläufe oder enge Beispiele.
H5 Etikett
Die fünfte Ebene eignet sich als kleines Label über dichtem Text.
H6 Mikroüberschrift
Die sechste Ebene ist die kleinste Überschrift und muss trotzdem lesbar bleiben.
Inline-Formatierung#
Betonung
Starker Text markiert den Kernpunkt. Betonter Text verändert den Ton, ohne die Zeile zu brechen.
Technischer Text
Nutze astro build für Befehle und Esc für Tasteneingaben.
Revision
Alte Formulierung kann neben neuer Formulierung stehen.
Anmerkung
Markierter Text, RTL und Hinweise testen dichte Inline-Inhalte.
Listen und Checkboxen#
- Ungeordneter Punkt mit kurzem Satz.
- Punkt mit fettem Text und
Inline-Code.- Verschachtelter Punkt.
- Punkt mit einem einfachen Texthinweis.
- Geordneter Punkt für den ersten Schritt.
- Geordneter Punkt für den zweiten Schritt.
- Geordneter Punkt mit längerer Zeile zum Prüfen des Umbruchs auf kleinen Bildschirmen.
- Fließtext
- Der Standardstil für längeres Lesen.
- Untertitel
- Eine kurze unterstützende Zeile nahe am Titel.
Tabellen, Zitate und Hinweise#
HTML-Tabelle#
| Element | Nutzung | Prüfung |
|---|---|---|
| Überschrift | Seitenstruktur | Klare Skala |
| Absatz | Lesefluss | Angenehme Zeilenhöhe |
| Checkbox | Formularstatus | Sichtbarer Fokus und Abstand |
Markdown-Tabelle#
| Element | Nutzung | Prüfung |
|---|---|---|
| Link | Navigation | Klarer Hover und Fokus |
| Code | Technischer Text | Eigener Inline-Stil |
| Liste | Gruppierter Inhalt | Lesbarer Abstand |
Zitat#
Ein Zitat gibt einem Abschnitt eine andere Stimme und hält die Lesebreite stabil.
Hinweis#
Dieser Hinweis nutzt eine kleine visuelle Markierung. Er soll in hellen und dunklen Themen ruhig und zugänglich bleiben.
Codeblock#
const formatTitle = ({ title, lang }: { title: string; lang: string }) => {
const label = new Intl.DisplayNames([lang], { type: "language" }).of(lang) || lang;
return `${title} - ${label}`;
};
formatTitle({ title: "Typografie Muster", lang: "de" });
Aufklappbare Zusammenfassung
Verborgener Inhalt prüft Abstand, Fokus und Textrhythmus im nativen Disclosure-Element.
Bilder#
