Modulare Typografie-Skala Generator
Erzeugt eine harmonische Schriftgrößen-Skala aus Basisgröße und Verhältnis
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Dieses Tool berechnet neun aufeinander abgestimmte Schriftgrößen von XS bis 5XL, ausgehend von einer Basisgröße und einem Verhältnis wie dem Goldenen Schnitt oder der Perfekten Quinte, mit einer Live-Vorschau. Es richtet sich an Designer und Frontend-Entwickler, die ein systematisches Typografie-Konzept für eine Website erstellen möchten, und die Ergebnisse lassen sich direkt als CSS-Variablen oder Tailwind-CSS-Konfiguration kopieren. Die gesamte Berechnung läuft im Browser, ohne dass Daten an einen Server gesendet werden.
Anleitung
- Basis-Schriftgröße in Pixeln eingeben.
- Ein Skalierungsverhältnis aus der Liste wählen, von 1,067 (kleine Sekunde) bis 2,000 (Oktave).
- Eigenen Vorschautext eingeben, um zu sehen, wie jede Stufe tatsächlich aussieht.
- Die generierten CSS-Variablen oder die Tailwind-Konfiguration kopieren und ins Projekt einfügen.
FAQ
- Welches Verhältnis sollte ich wählen?
- Kleinere Verhältnisse wie 1,125–1,25 eignen sich für textlastige Oberflächen, größere wie 1,5 oder der Goldene Schnitt (1,618) für Landingpages mit starkem Kontrast bei Überschriften. Am besten direkt in der Live-Vorschau vergleichen.
- Warum werden die Werte in rem statt px angezeigt?
- rem berücksichtigt die Schriftgrößen-Einstellung des Browsers, ist barrierefreundlicher und die Standardeinheit für responsive Typografie. Ein px-Wert zur Orientierung wird zusätzlich angezeigt.
- Wie nutze ich das Ergebnis in meinem Projekt?
- CSS-Variablen in den :root-Block einfügen oder die Tailwind-Konfiguration in den fontSize-Abschnitt der tailwind.config einfügen.