Typografie-Skala-Generator
Modulare Typografie-Skala aus Basisgröße und Verhältnis erzeugen – mit Vorschau, rem-Werten und Export für CSS und Tailwind.
Der Typografie-Skala-Generator erzeugt aus einer Basis-Schriftgröße und einem Verhältnis eine modulare Skala, in der jede Stufe die vorige mit demselben Faktor multipliziert. Du wählst Verhältnisse wie Große Terz (1,25) oder Goldener Schnitt (1,618), siehst jede Stufe als Vorschau in px und rem und kopierst sie als CSS-Variablen oder Tailwind-Theme.
- 5xl 61.04px / 3.8147rem Schnelle Füchse springen
- 4xl 48.83px / 3.0518rem Schnelle Füchse springen
- 3xl 39.06px / 2.4414rem Schnelle Füchse springen
- 2xl 31.25px / 1.9531rem Schnelle Füchse springen
- xl 25px / 1.5625rem Schnelle Füchse springen
- lg 20px / 1.25rem Schnelle Füchse springen
- base 16px / 1rem Schnelle Füchse springen
- sm 12.8px / 0.8rem Schnelle Füchse springen
- xs 10.24px / 0.64rem Schnelle Füchse springen
:root {
--text-5xl: 3.8147rem; /* 61.04px */
--text-4xl: 3.0518rem; /* 48.83px */
--text-3xl: 2.4414rem; /* 39.06px */
--text-2xl: 1.9531rem; /* 31.25px */
--text-xl: 1.5625rem; /* 25px */
--text-lg: 1.25rem; /* 20px */
--text-base: 1rem; /* 16px */
--text-sm: 0.8rem; /* 12.8px */
--text-xs: 0.64rem; /* 10.24px */
}Tailwind v4: Die Namen überschreiben die Standardgrößen (text-xl usw.).
Was ist eine Typografie-Skala?
Eine Typografie-Skala legt fest, welche Schriftgrößen ein Design verwendet. Bei einer modularen Skala entstehen sie aus einer Basisgröße und einem konstanten Faktor. Dadurch stehen Überschriften, Zwischenüberschriften und Fließtext in einem erkennbaren Verhältnis.
Gängige Verhältnisse
| Name | Faktor | Wirkung |
|---|---|---|
| Große Sekunde | 1,125 | Sehr dezent, viele Stufen nötig |
| Kleine Terz | 1,2 | Ruhig, gut für Interfaces |
| Große Terz | 1,25 | Ausgewogen, beliebt im Web |
| Quarte | 1,333 | Deutliche Hierarchie |
| Quinte | 1,5 | Kräftig, für Editorial und Landingpages |
| Goldener Schnitt | 1,618 | Sehr große Sprünge |
So gehst du vor
- Basisgröße und Verhältnis festlegen.
- Stufen in der Vorschau mit eigenem Text prüfen.
- Export kopieren. Passende Zeilenhöhen berechnet der Zeilenhöhe-Rechner.
Beispiel
Mit 16 px und Faktor 1,25 ergeben sich 20 px, 25 px, 31,25 px und 39,06 px für die nächsten Stufen. Fließtext nutzt die Basis, Zwischenüberschriften Stufe 2, die Hauptüberschrift Stufe 4. Fließend skalierende Varianten erzeugt der Fluid-Typografie-Generator.
Häufige Fragen
Was ist eine modulare Typografie-Skala?
Eine Reihe von Schriftgrößen, bei der jede Stufe die vorherige mal einem festen Faktor ist. Das erzeugt harmonische Größenverhältnisse zwischen Fließtext und Überschriften und macht Entscheidungen einfacher.
Welches Verhältnis passt zu meinem Projekt?
Kleine Faktoren wie 1,125 oder 1,2 eignen sich für Interfaces und Dashboards mit viel Text. 1,25 und 1,333 sind gute Allrounder für Websites. Ab 1,5 wirken die Sprünge dramatisch, passend für Editorial-Designs und Landingpages.
Welche Basisgröße sollte ich wählen?
16 px entspricht der Browserstandardgröße und ist für Fließtext die sichere Wahl. Kleine Interfaces nutzen oft 14 px, lesestarke Seiten 18 px.
Wie mache ich die Skala fließend?
Die Skala liefert feste Größen. Für Werte, die zwischen Smartphone und Desktop stufenlos wachsen, nimmst du den Fluid-Typografie-Generator, der dieselbe Idee mit clamp() umsetzt.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.