Fluid-Typografie-Generator

Fließende Schriftgrößen zwischen zwei Viewport-Breiten erzeugen und als clamp()-Variablen für CSS und Tailwind ausgeben.

Der Fluid-Typografie-Generator erzeugt eine Skala fließender Schriftgrößen. Du legst Basisgröße und Verhältnis für einen kleinen und einen großen Viewport fest, der Generator berechnet für jede Stufe einen clamp()-Wert und gibt ihn als CSS-Variablen oder Tailwind-Theme aus. Mit dem Regler siehst du live, wie die Schrift zwischen Smartphone und Desktop wächst.

Basis klein

Basis groß

Verhältnis klein

Verhältnis groß

Ab Viewport-Breite

Bis Viewport-Breite

Root-Schriftgröße

Stufen kleiner als Basis

Stufen größer als Basis

Vorschau-Viewport px

Vorschautext

4xl 39.8px → 61px · jetzt 48.3px

Fließende Typografie

clamp(2.4883rem, 2.1094rem + 1.8948vw, 3.8147rem)
3xl 33.2px → 48.8px · jetzt 39.4px

Fließende Typografie

clamp(2.0736rem, 1.7941rem + 1.3974vw, 3.0518rem)
2xl 27.6px → 39.1px · jetzt 32.2px

Fließende Typografie

clamp(1.728rem, 1.5242rem + 1.0192vw, 2.4414rem)
xl 23px → 31.3px · jetzt 26.3px

Fließende Typografie

clamp(1.44rem, 1.2934rem + 0.733vw, 1.9531rem)
lg 19.2px → 25px · jetzt 21.5px

Fließende Typografie

clamp(1.2rem, 1.0964rem + 0.5179vw, 1.5625rem)
base 16px → 20px · jetzt 17.6px

Fließende Typografie

clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem)
sm 13.3px → 16px · jetzt 14.4px

Fließende Typografie

clamp(0.8333rem, 0.7857rem + 0.2381vw, 1rem)
xs 11.1px → 12.8px · jetzt 11.8px

Fließende Typografie

clamp(0.6944rem, 0.6643rem + 0.1508vw, 0.8rem)

:root {
  --text-4xl: clamp(2.4883rem, 2.1094rem + 1.8948vw, 3.8147rem);
  --text-3xl: clamp(2.0736rem, 1.7941rem + 1.3974vw, 3.0518rem);
  --text-2xl: clamp(1.728rem, 1.5242rem + 1.0192vw, 2.4414rem);
  --text-xl: clamp(1.44rem, 1.2934rem + 0.733vw, 1.9531rem);
  --text-lg: clamp(1.2rem, 1.0964rem + 0.5179vw, 1.5625rem);
  --text-base: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
  --text-sm: clamp(0.8333rem, 0.7857rem + 0.2381vw, 1rem);
  --text-xs: clamp(0.6944rem, 0.6643rem + 0.1508vw, 0.8rem);
}

h1 {
  font-size: var(--text-4xl);
}

Fluide Typografie mit clamp()

Statt Schriftgrößen an Breakpoints umzuschalten, definierst du für jede Stufe einen Bereich. Der Browser interpoliert dazwischen. Das Ergebnis ist eine Typografie, die auf jedem Bildschirm proportional wirkt. Der Generator verbindet dafür eine modulare Skala mit clamp()-Werten.

So gehst du vor

Werte für kleinen und großen Viewport festlegen, etwa 16 px bei 320 px und 20 px bei 1440 px.
Stufen prüfen und mit dem Regler simulieren, wie die Schrift wächst.
Export kopieren. Einzelne Werte berechnest du im clamp()-Rechner, feste Skalen im Typografie-Skala-Generator.

Beispiel

Bei 16 px Basis (klein, Faktor 1,2) und 20 px Basis (groß, Faktor 1,25) erreicht die Stufe „xl“ bei 320 px Breite 23 px und bei 1440 px rund 31 px. Zeilenhöhen für diese Größen liefert der Zeilenhöhe-Rechner.

Häufige Fragen

Was ist fluide Typografie?

Die Schriftgröße wächst stufenlos mit der Fensterbreite, statt an Breakpoints zu springen. Mit clamp() geht das in einer einzigen CSS-Zeile, ohne Media Queries.

Warum zwei Verhältnisse?

Auf kleinen Bildschirmen sind zu große Sprünge zwischen Überschriften unpraktisch, auf großen dürfen sie kräftiger sein. Ein kleineres Verhältnis am unteren und ein größeres am oberen Ende liefert genau das.

Welche Viewport-Breiten soll ich wählen?

Üblich sind etwa 320 bis 375 px als kleinste und 1240 bis 1440 px als größte Breite. Darüber und darunter bleibt die Schrift konstant.

Wie setze ich die Werte in Tailwind ein?

Mit Tailwind v4 legst du die Größen im @theme-Block an und nutzt dann Klassen wie text-fluid-xl. Für v3 trägst du sie unter theme.extend.fontSize ein.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.