Typografie
Schriftfamilien, Überschriften, Fließtext und Schriftgrade.
Schriftfamilien
Selbst gehostete Variable Fonts, zugewiesen über --font-* in tailwind.css.
Figtree
Fließtext und UI
font-sans
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ÄÖÜäöüß 0123456789
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Space Grotesk
Überschriften
font-heading
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ÄÖÜäöüß 0123456789
- 300
- 400
- 500
- 600
- 700
JetBrains Mono
Code
font-mono
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ÄÖÜäöüß 0123456789
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
Überschriften
Varianten h1 bis h4 von appUiText. Überschriften-Elemente nutzen automatisch Space Grotesk.
appUiText="h1"
Gestaltung beginnt mit der Schrift
appUiText="h2"
Gestaltung beginnt mit der Schrift
appUiText="h3"
Gestaltung beginnt mit der Schrift
appUiText="h4"
Gestaltung beginnt mit der Schrift
Fließtext
Textstile für Absätze und Auszeichnungen.
appUiText="lead"
Ein einleitender Absatz, der den Inhalt der Seite kurz zusammenfasst.
appUiText="p"
Gute Typografie fällt nicht auf. Sie führt das Auge durch den Text, schafft Hierarchie und sorgt dafür, dass Inhalte auch auf kleinen Bildschirmen lesbar bleiben.
Mehrere Absätze erhalten automatisch Abstand zueinander, der erste bleibt bündig.
appUiText="large"
Hervorgehobener Text
appUiText="small"
Kleiner Text für Beschriftungen
appUiText="muted"
Zurückhaltender Text für Hinweise
appUiText="blockquote"
„Typografie ist die Kunst, Sprache sichtbar zu machen.“
appUiText="list"
- Erster Listenpunkt
- Zweiter Listenpunkt
- Dritter Listenpunkt
appUiText="code"
Installieren mit pnpm install und starten.
Schriftgrade
Die Tailwind-Skala von text-xs bis text-5xl.
text-xs0.75rem
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.
text-sm0.875rem
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.
text-base1rem
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.
text-lg1.125rem
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.
text-xl1.25rem
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.
text-2xl1.5rem
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.
text-3xl1.875rem
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.
text-4xl2.25rem
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.
text-5xl3rem
Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.