Type Scale Generator
Modulare Typografieskalen mit CSS-Variablen und Tailwind-Config erstellen.
① Basisgröße und Ratio festlegen ② Skala generieren klicken ③ CSS-Variablen oder Tokens kopieren
Was ist eine modulare Typografieskala?
Eine modulare Typografieskala ist eine Folge von Schriftgrößen, bei der jeder Schritt der vorherige, multipliziert mit einem festen Ratio, ist. Gängige Ratios sind die Reine Quarte (1.333), die Große Terz (1.250) und der Goldene Schnitt (1.618). Eine Skala sorgt für visuelle Harmonie zwischen Überschriften, Fließtext und Bildunterschriften.
Häufig gestellte Fragen
Eine modulare Typografieskala ist ein Satz von Schriftgrößen, die durch Multiplikation einer Basisgröße mit einem konstanten Ratio abgeleitet werden. Statt willkürlicher Größen erhält man mathematisch verwandte Werte, die visuelle Harmonie erzeugen.
Jeder Schritt n relativ zur Basis verwendet die Formel: Größe = Basis × Ratio^n. Für n=0 die Basisgröße, für n=1 Basis × Ratio, für negative Schritte Basis × Ratio^(-1).
Minor Second und Major Second für subtile Skalen. Minor und Major Third für moderaten Kontrast. Perfect Fourth (1.333) klassisch. Perfect Fifth und Golden Ratio für dramatische Display-Typografie.
CSS-Variablen-Output kopieren und in :root { } einfügen. Dann: font-size: var(--text-xl). Sofort einsatzbereit.
Tailwind-Config-Output in theme.fontSize in tailwind.config.js einfügen. Klassen wie text-xl mit eigenen Werten verwenden.
rem für Schriftgrößen — respektiert Nutzereinstellungen. em für komponentenrelative Größen. px nur für feste dekorative Elemente.
Klare Hierarchie führt Leser durch Inhalte. WCAG 1.4.4 erfordert 200% Textskalierbarkeit — rem-Skalen gewährleisten dies.