Typografie-Skala

Erzeuge eine Typografie-Skala aus Basisgröße und Ratio. Tabelle in px und rem, Live-Vorschau, CSS-Variablen und Tailwind-JSON.

Wie hilfreich ist dieses Tool?

Ergebnis erscheint hier …

Typografie-Skala erzeugen: Schriftgrößen-System für Websites

Wähle eine Basisgröße und ein Ratio, zum Beispiel 16 px mit 1,25. Die Skala erzeugt daraus alle Schriftgrößen deiner Website als Tabelle in px und rem: von kleinen Nebentexten bis zur größten Überschrift. Jede Stufe zeigt live einen Textprobe, an der du die Wirkung sofort siehst.

Das Ergebnis kopierst du als CSS-Variablen-Block direkt ins Stylesheet oder als JSON für ein Tailwind-Projekt. Weil alle Größen aus einem einzigen Ratio folgen, wirken Überschriften und Fließtext automatisch wie aus einem Guss. Änderst du später Basis oder Ratio, erzeugst du die komplette Skala in Sekunden neu.

Häufige Fragen

Welches Ratio soll ich wählen?

1,25 (große Terz) ist ein solider Standard für Websites mit viel Text. 1,333 (Quarte) und 1,5 (Quinte) erzeugen kräftigere Kontraste zwischen Überschriften und Text, gut für Landingpages. 1,125 wirkt ruhiger und passt zu Content-seiten mit langen Artikeln.

Warum rem statt px?

rem skaliert mit der Browser-Schriftgröße des Nutzers und respektiert dessen Einstellungen. Die Tabelle zeigt beide Werte: px zum schnellen Verstehen, rem für den produktiven Einsatz im Stylesheet.

Wie viele Stufen brauche ich?

Fünf Stufen decken die meisten Websites ab: Fließtext, Nebentext, Zwischenüberschrift, H2 und H1. Landingpages mit großen Hero-Headlines greifen eher auf sechs bis acht Stufen zurück. Mehr Stufen bedeuten auch mehr Verantwortung, konsistent zu bleiben.