Typography

Typography definiert die grundlegende Darstellung von Texten innerhalb von DK97 UI.
Dazu gehören Überschriften, Absätze, Inline-Code und grundlegende Textabstände.

Beispiele

Headings

Überschriften strukturieren Inhalte und sollten der inhaltlichen Hierarchie folgen.

Heading Level 1

Heading Level 2

Heading Level 3


<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>

Paragraph

Absätze bilden den normalen Fließtext.

Dies ist ein normaler Absatz innerhalb von DK97 UI. Er verwendet die globale Schriftfamilie, Textfarbe und Zeilenhöhe.


<p>
    Dies ist ein normaler Absatz innerhalb von DK97 UI.
    Er verwendet die globale Schriftfamilie, Textfarbe und Zeilenhöhe.
</p>

Inline Code

Inline-Code wird verwendet, um Klassennamen, HTML-Elemente oder kurze Code-Ausdrücke hervorzuheben.

Verwende .a-button für Buttons.


<p>
    Verwende <code>.a-button</code> für Buttons.
</p>

Regeln

Element	Verwendung
`h1`	Seitentitel. Sollte pro Seite nur einmal verwendet werden.
`h2`	Hauptabschnitte innerhalb einer Seite.
`h3`	Unterabschnitte innerhalb eines Hauptabschnitts.
`p`	Normaler Fließtext.
`code`	Inline-Code für kurze technische Begriffe oder Klassennamen.

Hinweise

Typography ist Teil der Foundation und keine eigenständige UI-Komponente. Die Regeln gelten global für HTML-Elemente wie h1, h2, p und code.

Best Practices

Verwende Überschriften zur inhaltlichen Strukturierung und nicht nur für optische Größen. Die Reihenfolge der Überschriften sollte logisch bleiben.

Überspringe keine Überschriftenebenen nur wegen der Darstellung. Nach einem h1 sollte normalerweise ein h2 folgen, nicht direkt ein h3.

Accessibility

Screenreader verwenden Überschriften zur Navigation. Eine klare Überschriftenstruktur verbessert die Orientierung innerhalb einer Seite.