Typografie¶

Diese Seite führt alle Fließtext-Elemente vor, die Python-Markdown erzeugt, und zeigt, wie die Bridge sie auf die KERN-Token abbildet. Die Schrift ist Fira Sans aus dem KERN-Kit; Größen, Zeilenhöhen und Schnitte kommen aus den Typografie-Token, nicht aus eigenen Werten.

Überschriften¶

Die Ebenen 2 bis 6 im direkten Vergleich; Ebene 1 ist der Seitentitel ganz oben – pro Seite gibt es genau eine. Jede Überschrift trägt einen Ankerlink (toc: permalink: true), der optisch zurücktritt, mit der Tastatur aber erreichbar bleibt.

Überschrift Ebene 2¶

Überschrift Ebene 3¶

Überschrift Ebene 4¶

Überschrift Ebene 5¶

Überschrift Ebene 6¶

Dahinter stehen diese Token; „adaptive“ heißt, dass die Größe ab 768 px zunimmt:

Ebene	Token	klein	ab 768 px
h1	`--kern-typography-font-size-x-large-adaptive`	32 px	48 px
h2	`--kern-typography-font-size-large-adaptive`	26 px	32 px
h3	`--kern-typography-font-size-medium-adaptive`	21 px	24 px
h4	`--kern-typography-font-size-medium-static`	18 px	18 px
h5, h6	`--kern-typography-font-size-small-static`	16 px	16 px

Absätze und Auszeichnungen¶

Ein gewöhnlicher Absatz. Die Lesebreite ist über content_width auf 50rem begrenzt, weil WCAG 1.4.8 höchstens rund 80 Zeichen je Zeile empfiehlt. Damit das sichtbar wird, läuft dieser Absatz über mehrere Zeilen und zeigt zugleich die Zeilenhöhe des Fließtexts, die aus den KERN-Token stammt.

Schnitte und Formen¶

Fetter Text (**…**) nutzt --kern-typography-font-weight-body-strong, kursiver Text (*…*) den kursiven Schnitt von Fira Sans, und fett und kursiv zusammen (***…***) beides. Dazu kommen ~~durchgestrichener Text~~ (~~…~~, benötigt pymdownx.tilde), unterstrichener Text (<u>), kleiner gesetzter Text und hervorgehobener Text (==…==, benötigt pymdownx.mark).

Technisches im Fließtext¶

Inline-Code wie mkdocs build --strict, eine Tastenfolge Strg + Umschalt + P, eine Programmausgabe INFO – Documentation built in 0.42 seconds, eine Variable site_name sowie Tief- und Hochstellungen: H₂O, E = mc², 15 m².

Abkürzungen¶

Die BITV verweist auf die WCAG; beide Abkürzungen sind hinterlegt und zeigen beim Überfahren ihre Bedeutung.

Zeichensetzung¶

Deutsche Anführungszeichen („Beispiel“ und ‚einfach‘), Gedankenstrich – wie hier –, Bindestrich in Fira-Sans-Schnitt, Auslassungspunkte …, Nichtumbruchleerzeichen zwischen Zahl und Einheit (5 kg), Geviertstrich — sowie Sonderzeichen: § 12a BGG, § 5 DDG, 100 €, 12,5 %, ©, ®, →, ✓.

Links¶

Ein interner Link, ein Link auf einen Abschnitt, ein externer Link und ein bereits besuchter Link – besuchte Links färbt KERN mit --kern-color-action-visited-contextual ein, also anders als ungelesene.

Umbruchverhalten¶

Eine sehr lange, nicht umbrechbare Zeichenkette darf das Layout nicht sprengen: https://beispiel.example/sehr/langer/pfad/mit/vielen/segmenten/und/einem/dateinamen-der-nicht-umbricht.pdf

Auch ein deutsches Kompositum wie Grundstücksverkehrsgenehmigungszuständigkeitsübertragungsverordnung wird umbrochen, statt die Spalte zu verbreitern.

Ein harter Zeilenumbruch entsteht mit zwei Leerzeichen am Zeilenende: Erste Zeile
Zweite Zeile

Zitate¶

Ein einfaches Zitat. KERN legt dafür eine ruhige Fläche mit farbigem Balken an der linken Seite an.

Ein Zitat über mehrere Absätze.

Der zweite Absatz desselben Zitats – die Fläche trägt beide.

Quelle: Handbuch der Demo-Dokumentation, 2026

Zitate lassen sich verschachteln:

Das innere Zitat bekommt einen eigenen Balken.

Ein Zitat kann auch Listen und Code enthalten:

erster Punkt

zweiter Punkt

yaml theme: name: kern-ux

Listen¶

Ungeordnet¶

Erster Punkt
Zweiter Punkt
- Verschachtelt
  - Noch tiefer
Dritter Punkt mit deutlich mehr Text, damit sichtbar wird, wie die zweite Zeile eines Listenpunkts einrückt

Geordnet¶

Erster Schritt
Zweiter Schritt
1. Teilschritt
2. Noch ein Teilschritt
Dritter Schritt

Aufgaben¶

Erledigte Aufgabe
Offene Aufgabe
Noch offene Aufgabe mit längerem Text, der über eine Zeile hinausgeht

Definitionsliste¶

Bridge: Die dünne Schicht, die MkDocs-Markup auf die KERN-Token übersetzt.
Vendor: Der unveränderte KERN-Kit im Theme-Verzeichnis.
Token: Eine CSS-Variable des Design-Systems, etwa --kern-color-layout-text-default-contextual.

Trennlinie¶

Bild mit Bildunterschrift¶

Farbflächen als Platzhalter — Ein Bild mit Unterschrift, umgesetzt mit `md_in_html`.

Die KERN-Typografieklassen¶

Zum Vergleich dieselben Ebenen als Original-Klassen des Kits. Die Bridge bildet den Markdown-Fließtext auf genau diese Größen ab, ohne die Klassen zu benötigen.

Preline – kern-preline

Titel groß – kern-title--large

Titel – kern-title

Subline – kern-subline

Fließtext groß – kern-body--large

Fließtext – kern-body

Fließtext klein – kern-body--small

Zurückgenommener Text – kern-body--muted

Label – kern-label