Schriftgröße, Gewicht, Zeilenhöhe und Umbruch sind getrennte Entscheidungen. Die globale Schriftstufe beeinflusst die Größenklassen, während die Seitendichte weiterhin nur Abstände und Abmessungen steuert.
Ausprobieren und übernehmen
Die Vorschauen verwenden die aktuell gewählten Demo-Einstellungen. Direkt unter jedem Beispiel steht das dazugehörige HTML.
Eine verständliche Hierarchie
Größe, Gewicht und Zeilenhöhe erzeugen eine klare Reihenfolge ohne zusätzliche Farbe.
Projektstatus
Klarheit im Detail.
Gut lesbare Texte brauchen eine passende Größe und einen ruhigen Rhythmus.
HTML
<div class="border rounded p-6 bg-surface">
<p class="text-xs uppercase tracking-wide text-muted">Projektstatus</p>
<h3 class="text-3xl font-semibold leading-tight tracking-tight mt-2">Klarheit im Detail.</h3>
<p class="text-base leading-relaxed text-muted mt-4">Gut lesbare Texte brauchen eine passende Größe und einen ruhigen Rhythmus.</p>
</div>
Zeilenumbruch bewusst steuern
truncate begrenzt auf eine Zeile. break-words erlaubt das Umbrechen langer Inhalte.
Ein langer Projektname, der auf einer einzelnen Zeile bleibt und abgeschnitten wird.
<div class="max-w-sm border rounded p-4 bg-surface">
<p class="truncate font-medium">Ein langer Projektname, der auf einer einzelnen Zeile bleibt und abgeschnitten wird.</p>
<p class="break-words text-sm text-muted mt-4">EineSehrLangeKennzeichnungOhneNormaleLeerzeichenKannTrotzdemUmbrechen</p>
</div>
Unterstützte Klassen
Diese Tabellen werden direkt aus den vorhandenen Utility-Regeln erzeugt. Sie zeigen Basisklassen; responsive und Zustandsvarianten sind unter Responsive Layouts & Zustände erklärt.
Schriftgröße
Die Größenklassen werden mit --r-font-scale multipliziert, nicht mit der Seitendichte.
Schriftgröße: Klassen und erzeugtes CSS
Klasse
CSS
text-xs
font-size:calc(.75rem * var(--r-font-scale))
text-sm
font-size:calc(.875rem * var(--r-font-scale))
text-base
font-size:calc(1rem * var(--r-font-scale))
text-lg
font-size:calc(1.125rem * var(--r-font-scale))
text-xl
font-size:calc(1.25rem * var(--r-font-scale))
text-2xl
font-size:calc(1.5rem * var(--r-font-scale))
text-3xl
font-size:calc(1.875rem * var(--r-font-scale))
text-4xl
font-size:calc(2.25rem * var(--r-font-scale))
text-5xl
font-size:calc(3rem * var(--r-font-scale))
text-6xl
font-size:calc(3.75rem * var(--r-font-scale))
10 unterstützte Basisklassen in dieser Gruppe.
Gewicht und Schriftstil
Gewichte und Stil können unabhängig von der Größe kombiniert werden.
Gewicht und Schriftstil: Klassen und erzeugtes CSS
Klasse
CSS
font-normal
font-weight:400
font-medium
font-weight:500
font-semibold
font-weight:600
font-bold
font-weight:700
italic
font-style:italic
font-mono
font-family:Consolas,monospace
6 unterstützte Basisklassen in dieser Gruppe.
Zeilenhöhe und Zeichenabstand
leading-* und tracking-* beeinflussen den Textrhythmus.
Zeilenhöhe und Zeichenabstand: Klassen und erzeugtes CSS
Klasse
CSS
leading-tight
line-height:1.2
leading-normal
line-height:1.5
leading-relaxed
line-height:1.75
tracking-tight
letter-spacing:-.04em
tracking-wide
letter-spacing:.08em
5 unterstützte Basisklassen in dieser Gruppe.
Ausrichtung, Umbruch und Dekoration
text-start/end berücksichtigen die Schreibrichtung. Screenreader-Text lässt sich mit sr-only visuell ausblenden.
Ausrichtung, Umbruch und Dekoration: Klassen und erzeugtes CSS
Klassen lassen sich mit Komponenten, eigenen CSS-Regeln und den gemeinsamen --r-*-Variablen kombinieren. Dichte und Schriftgröße bleiben unabhängig. Die Syntax frei formulierter Klassen wie p-[13px] ist noch nicht implementiert.