Fluider Typo-Skala-Generator mit clamp()

:root { --step--2: clamp(0.6944rem, 0.6593rem + 0.1759vw, 0.8rem); --step--1: clamp(0.8333rem, 0.7778rem + 0.2778vw, 1rem); --step-0: clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem); --step-1: clamp(1.2rem, 1.0792rem + 0.6042vw, 1.5625rem); --step-2: clamp(1.44rem, 1.269rem + 0.8552vw, 1.9531rem); --step-3: clamp(1.728rem, 1.4902rem + 1.189vw, 2.4414rem); --step-4: clamp(2.0736rem, 1.7475rem + 1.6303vw, 3.0518rem); --step-5: clamp(2.4883rem, 2.0462rem + 2.2106vw, 3.8147rem); --step-6: clamp(2.986rem, 2.3919rem + 2.9706vw, 4.7684rem); }

Variable	Bei min. (px)	Bei max. (px)	×
--step-6	47,78	76,29	1,6
--step-5	39,81	61,04	1,53
--step-4	33,18	48,83	1,47
--step-3	27,65	39,06	1,41
--step-2	23,04	31,25	1,36
--step-1	19,2	25	1,3
--step-0	16	20	1,25
--step--1	13,33	16	1,2
--step--2	11,11	12,8	1,15

Variable

Bei min. (px)

Bei max. (px)

--step-6

47,78

76,29

1,6

--step-5

39,81

61,04

1,53

--step-4

33,18

48,83

1,47

--step-3

27,65

39,06

1,41

--step-2

23,04

31,25

1,36

--step-1

19,2

1,3

--step-0

1,25

--step--1

13,33

1,2

--step--2

11,11

12,8

1,15

Live-Vorschau

Simulierte Viewport-Breite1024px

6 · 68,7pxFluide Schrift wächst stufenlos mit dem Bildschirm.

5 · 55,4pxFluide Schrift wächst stufenlos mit dem Bildschirm.

4 · 44,7pxFluide Schrift wächst stufenlos mit dem Bildschirm.

3 · 36pxFluide Schrift wächst stufenlos mit dem Bildschirm.

2 · 29,1pxFluide Schrift wächst stufenlos mit dem Bildschirm.

1 · 23,5pxFluide Schrift wächst stufenlos mit dem Bildschirm.

0 · 18,9pxFluide Schrift wächst stufenlos mit dem Bildschirm.

-1 · 15,3pxFluide Schrift wächst stufenlos mit dem Bildschirm.

-2 · 12,3pxFluide Schrift wächst stufenlos mit dem Bildschirm.

Was eine modulare Typo-Skala ist

Eine modulare Skala multipliziert eine Basisgröße immer wieder mit demselben Faktor: Mit 16px Basis und Faktor 1,25 erhältst du 16, 20, 25, 31,25 und so weiter, und durch Teilen die kleineren Stufen 12,8 und 10,24. Weil alle Größen über einen einzigen Faktor zusammenhängen, wirken Überschriften, Fließtext und Bildunterschriften wie aus einer Familie.

Warum zwei Faktoren

Auf kleinen Bildschirmen ist kein Platz für einen dramatischen Kontrast zwischen Überschriften und Text, während große Bildschirme ohne ihn flach wirken. Dieser Generator nimmt deshalb einen Faktor für den minimalen und einen für den maximalen Viewport. Beliebt ist eine kleine Terz (1,2) auf dem Smartphone und eine große Terz (1,25) oder reine Quarte (1,333) auf dem Desktop. Jede Stufe wird so zu einem eigenen clamp()-Wert, der mit wachsendem Viewport von der kleinen zur großen Skala wandert.

Die exportierten Variablen verwenden

Der Export ist ein :root-Block mit Variablen von --step--2 bis --step-6. Weise sie Elementen zu, etwa h1 Stufe 5, h2 Stufe 4, Fließtext Stufe 0 und Kleingedrucktes Stufe −1. Da die Namen Positionen auf der Skala beschreiben und keine Elemente, kannst du das ganze System später neu abstimmen, indem du nur Basisgröße und Faktoren änderst.

Behalte die größten Stufen im Blick: Bei einem großen Faktor können sie die 2,5×-Zoom-Richtlinie aus WCAG 1.4.4 überschreiten. Die Tabelle zeigt die Größe an beiden Enden des Bereichs, damit du zu schnell wachsende Stufen erkennst und bei Bedarf den Desktop-Faktor senkst.

Einen Faktor wählen

Niedrige Faktoren wie 1,125 oder 1,2 passen zu dichten Oberflächen, Dashboards und Dokumentation. Mittlere wie 1,25 und 1,333 sind vielseitig für Marketingseiten und Blogs. Hohe Faktoren wie 1,5 oder der Goldene Schnitt 1,618 erzeugen starken redaktionellen Kontrast, brauchen aber weniger Stufen, um handhabbar zu bleiben.

Häufige Fragen

Wie viele Stufen brauche ich?

Die meisten Websites nutzen fünf bis sieben: ein oder zwei unter der Basis für Bildunterschriften und Labels, die Basis für Fließtext und drei oder vier darüber für Überschriften. Der Generator liefert −2 bis +6, damit du Überflüssiges löschen kannst.

Welcher Faktor passt zu einem Blog?

Eine kleine Terz (1,2) mobil und eine große Terz (1,25) oder reine Quarte (1,333) auf dem Desktop ergeben klare Überschriften, ohne den Text zu erdrücken.

Kann ich die Variablen in Tailwind nutzen?

Ja. Verwende text-[length:var(--step-2)] oder registriere sie im Tailwind-Theme als Schriftgrößen, um Utilities wie text-step-2 zu schreiben.

Warum heißen negative Stufen --step--1?

Der Name ist --step- gefolgt von der Stufennummer, also wird Stufe −1 zu --step--1. Das ist ein gültiger Name für eine Custom Property und entspricht der Konvention vieler Tools für fluide Typografie.