Modulare Typo-Skala Generator
Konsistente Schriftgrößenstufen aus Basisgröße und Verhältnis erzeugen
Legen Sie eine Basisschriftgröße und ein Verhältnis fest – etwa den Goldenen Schnitt oder die reine Quinte – und der Generator berechnet daraus neun Schriftgrößenstufen von XS bis 5XL und zeigt sie in einer Live-Vorschau. Das Werkzeug hilft Designerinnen, Designern und Frontend-Entwicklern beim Aufbau eines stimmigen Typografiesystems; die Ergebnisse lassen sich als CSS-Variablen oder als Tailwind-CSS-Konfiguration direkt ins Projekt kopieren. Alle Berechnungen finden ausschließlich im Browser statt und werden nicht an einen Server übertragen.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Geben Sie die Basisschriftgröße in Pixel ein.
- Wählen Sie aus der Liste das gewünschte Verhältnis zwischen 1,067 (kleine Sekunde) und 2,000 (Oktave).
- Ersetzen Sie den Vorschautext durch eigene Formulierungen und prüfen Sie so die tatsächliche Wirkung jeder Stufe.
- Übernehmen Sie die erzeugten CSS-Variablen oder die Tailwind-Konfiguration per Schaltfläche zum Kopieren in Ihr Projekt.
FAQ
- Welches Verhältnis sollte ich für die modulare Skala wählen?
- Für textlastige Seiten mit dichtem Fließtext eignen sich kleine Verhältnisse wie 1,125 bis 1,25; für Landingpages mit starkem Kontrast zwischen Überschriften und Text passen größere Werte wie 1,5 oder der Goldene Schnitt (1,618). Am sichersten ist der direkte Vergleich in der Vorschau.
- Warum werden die Werte in rem statt in px ausgegeben?
- rem respektiert die im Browser eingestellte Standardschriftgröße, ist damit barrierefreier und gilt als Standard für responsive Typografie. Zur Orientierung wird der entsprechende px-Wert daneben mit angezeigt.
- Wie übernehme ich die erzeugten Werte in ein echtes Projekt?
- Kopieren Sie die CSS-Variablen und fügen Sie sie in :root ein, oder übertragen Sie die Tailwind-Ausgabe in den Abschnitt fontSize Ihrer tailwind.config – danach sind die Größen sofort einsatzbereit.