Zum Inhalt springen
Musterli
Unterstützen
CSS-Effekte und Layouts

Fliessende Schriftskala (Fluid Typography mit clamp)

Schriftgrössen, die mit der Bildschirmbreite wachsen: eine typografische Skala als CSS clamp(), mit CSS-Variablen und Tailwind-Theme zum Kopieren.

Generator öffnen

Läuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.

Beispielmotiv aus dem Fliessende Schriftskala

Mit einem Preset starten

Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.

Worum geht’s?

Eine fliessende Schriftskala legt alle Schriftgrössen einer Website fest, vom Kleingedruckten bis zur grossen Überschrift. Jede Stufe ist um ein festes Verhältnis grösser als die vorherige, und alle Stufen wachsen stufenlos mit der Bildschirmbreite. So passt die Typografie auf dem Handy und auf dem grossen Monitor, ohne Breakpoints.

Wofür du es brauchst

  • Neue Website

    Lege die Typografie einmal fest und verwende überall dieselben Stufen. Überschriften, Text und Beschriftungen bleiben auf jedem Gerät im Verhältnis.

  • Designsystem

    Die Stufen werden zu Variablen wie --step-2 oder zu Tailwind-Klassen wie text-xl. Design und Code sprechen dieselbe Sprache.

  • Weniger Breakpoints

    Statt Schriftgrössen in drei Media Queries zu überschreiben, rechnet der Browser die passende Grösse selbst aus.

So geht’s

Gib die kleinste und die grösste Bildschirmbreite an, dazu die Grundgrösse und das Verhältnis für beide Enden. Die Vorschau zeigt alle Stufen bei einer wählbaren Breite. Kopiere dann die CSS-Variablen, die fertigen Klassen oder das Tailwind-Theme in dein Projekt.

Fliessende Schriftskala jetzt ausprobieren

Tipps

  • Ein kleineres Verhältnis auf dem Handy und ein grösseres auf dem Desktop gibt grossen Überschriften Wirkung, ohne dass sie auf kleinen Bildschirmen umbrechen.
  • Bleib bei rem als Einheit. Dann wächst der Text mit, wenn jemand im Browser eine grössere Schrift einstellt.
  • Wähle bei Namen die Grössen, wenn du mit Tailwind arbeitest. Dann ersetzt das Theme die Standardgrössen wie text-lg direkt.

Häufige Fragen

Wie funktioniert clamp() für Schriftgrössen?
clamp() nimmt eine kleinste Grösse, einen bevorzugten Wert und eine grösste Grösse. Der bevorzugte Wert besteht aus rem plus vw und wächst mit der Bildschirmbreite. Unter der kleinsten Breite bleibt die Schrift klein, über der grössten bleibt sie gross.
Warum rem plus vw und nicht nur vw?
Text in reinen vw-Einheiten wächst beim Zoomen nicht mit. Der rem-Anteil sorgt dafür, dass Zoom und die Schriftgrösse im Browser weiter wirken. Als Faustregel gilt: Ist die grösste Grösse einer Stufe höchstens 2.5-mal so gross wie die kleinste, lässt sich Text immer auf 200 % zoomen.
Welche Browser unterstützen clamp()?
Alle aktuellen Browser seit 2020, also Chrome, Edge, Firefox und Safari. Für sehr alte Browser kannst du vor die Variable eine feste Grösse setzen.
Wie nutze ich die Skala mit Tailwind?
Kopiere das Tailwind-v4-Theme in deine CSS-Datei. Tailwind macht aus jeder Variable --text-* eine Klasse, zum Beispiel text-xl. Mit den Namen als Grössen ersetzt die Skala die Standardgrössen von Tailwind.

Passende Generatoren

Alle Generatoren in CSS-Effekte und Layouts