Generator für typografische Skalen
Vorschau der Skala
Code
:root {
--text-xs: 0.5628rem; /* 9px */
--text-sm: 0.7502rem; /* 12px */
--text-base: 1rem; /* 16px */
--text-lg: 1.333rem; /* 21.33px */
--text-xl: 1.7769rem; /* 28.43px */
--text-2xl: 2.3686rem; /* 37.9px */
--text-3xl: 3.1573rem; /* 50.52px */
--text-4xl: 4.2087rem; /* 67.34px */
--text-5xl: 5.6102rem; /* 89.76px */
--text-6xl: 7.4784rem; /* 119.66px */
}Häufige Fragen
Alles über Typografie und modulare Skalen
Was ist eine typografische Skala?
Eine typografische Skala ist eine Reihe von Schriftgrößen, die über ein festes Verhältnis zusammenhängen. Eine durchgehende Skala bringt Ruhe ins Gestalten, weil jede Größe rechnerisch mit den anderen verbunden ist.
Welches Verhältnis soll ich wählen?
Für Bildschirmoberflächen greift man meist zur Quarte (1,333) oder zur großen Terz (1,250): sichtbarer Kontrast, ohne zu übertreiben. Der Goldene Schnitt (1,618) erzeugt sehr starke Sprünge, gut für Überschriften und Landingpages. Die kleine Sekunde (1,125) ist zurückhaltend, für sehr dichte Oberflächen.
Wie verwende ich die CSS-Ausgabe?
Kopieren Sie die CSS-Variablen in Ihre globale Stildatei (z. B. `app.css`) und verwenden Sie sie dann mit `font-size: var(--text-lg)`. Für Tailwind fügen Sie die Konfiguration in den Block `fontSize` Ihrer `tailwind.config.js` ein.
Wie benutze ich die Skala in einem Projekt?
Die CSS-Variablen kommen in das globale Stylesheet und werden in den Regeln mit var aufgerufen. Für Tailwind fügt man den Block mit den Größen in die Konfiguration des Projekts ein.