Font Size Scale Calculator
Free CalculatorVerwandle eine Basisgröße und ein Skalierungsverhältnis in eine harmonische, modulare Typo-Skala — eine Stufe kleiner und drei Stufen größer für Überschriften.
100 % privat
Läuft in deinem Browser — keine Zahlen verlassen dein Gerät.
Deine Zahlen
Deine Fließtextgröße in Pixel — im Web meist 16 px.
Der Multiplikator zwischen den Stufen, z. B. 1,25 (große Terz) oder 1,5.
1 Stufe größer
20
Basis × Verhältnis — Zwischenüberschriften und Einleitungstext.
Klein (Basis ÷ Verhältnis)
12,8
Eine Stufe unter der Basis — Bildunterschriften und Kleingedrucktes.
2 Stufen größer
25
Basis × Verhältnis² — Abschnittsüberschriften.
3 Stufen größer
31,3
Basis × Verhältnis³ — Seiten- und Hero-Überschriften.
So funktioniert es
Basisgröße festlegen
Gib deine Fließtextgröße ein — 16 px ist der übliche Ausgangspunkt im Web.
Verhältnis wählen
Wähle einen Multiplikator wie 1,2, 1,25 oder 1,5, um den Kontrast zwischen den Stufen zu steuern.
Multiplizieren und teilen
Jede Stufe nach oben multipliziert mit dem Verhältnis; die kleine Größe teilt die Basis dadurch.
Skala ablesen
Vier Größen erscheinen sofort und aktualisieren sich live, wenn du Basis oder Verhältnis änderst.
Eine gute Typo-Skala verdient gute Screenshots
Reverze rebuilds App Store screenshots into higher-converting creative
Was ist ein Font Size Scale Calculator?
Ein Font Size Scale Calculator erstellt aus zwei Eingaben eine modulare Typo-Skala: einer Basisgröße und einem Verhältnis. Statt Überschriftengrößen zufällig zu wählen, multiplizierst du die Basis mit einem konstanten Verhältnis, um nach oben zu gehen, und teilst durch dasselbe Verhältnis, um nach unten zu gehen. Eine Basis von 16 px mit dem Verhältnis 1,25 ergibt 12,8 px kleinen Text, 20 px, 25 px und 31,25 px — Größen, die im selben Verhältnis zueinander stehen, sodass Überschriften und Fließtext harmonisch wirken.
Das ist dieselbe Idee, die hinter einem Type Scale Calculator in Designsystemen und CSS-Frameworks steckt. Gängige Verhältnisse stammen aus musikalischen Intervallen — 1,125 (große Sekunde), 1,25 (große Terz), 1,5 (reine Quinte) und 1,618 (goldener Schnitt) — wobei ein größeres Verhältnis für stärkeren Kontrast zwischen Fließtext und Überschriften sorgt. Nutze diesen Rechner, um eine Skala festzulegen, bevor du CSS schreibst, und verwende dieselben vier Größen dann konsistent über Webseiten, App-Screens und App-Store-Creatives hinweg.