Fluid Typography mit CSS clamp() – Schrift, die ohne Media Queries mitwächst

Feste Schriftgrößen an mehreren Breakpoints sind mühsam: Auf dem Handy zu groß, auf dem Desktop zu klein, und dazwischen ruckelt es an jedem @media-Sprung. Mit clamp() definierst du stattdessen einen Korridor – eine Untergrenze, einen idealen (mitwachsenden) Wert und eine Obergrenze – und der Browser wählt flüssig dazwischen. Ganz ohne Media Queries.

Die drei Werte von clamp()

h1 {
  /* clamp(MIN, IDEAL, MAX) */
  font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
}

• 1.75rem – so klein wird die Schrift nie (Untergrenze, wichtig fürs Handy).
• 4vw + 1rem – der ideale Wert, der mit der Viewport-Breite mitwächst.
• 3rem – so groß wird sie nie (Obergrenze, damit es auf großen Monitoren nicht albern wird).

Zwischen etwa 375 px und 1200 px Breite skaliert die Überschrift damit stufenlos – ein einziger Wert statt drei Media Queries.

Nicht nur für Schrift

clamp() funktioniert überall, wo eine Länge erlaubt ist – zum Beispiel für flüssige Abstände:

.section {
  /* Innenabstand wächst mit, bleibt aber im Rahmen */
  padding-block: clamp(2rem, 6vw, 5rem);
}

.container {
  /* maximal 70ch breit, aber mit komfortablem Seitenabstand */
  width: min(70ch, 100% - clamp(1rem, 5vw, 4rem));
  margin-inline: auto;
}

Zwei Dinge für die Praxis

• Immer eine rem-basierte Untergrenze setzen. Nutzt du reine vw-Werte ohne Minimum, wird die Schrift auf schmalen Geräten unlesbar klein – und Nutzer, die zoomen, bleiben außen vor. Das + 1rem im Idealwert sorgt außerdem dafür, dass Browser-Zoom weiter funktioniert.
• Barrierefreiheit im Blick. Weil die Untergrenze in rem steht, respektiert deine Schrift die vom Nutzer eingestellte Standard-Schriftgröße – ein Detail, das viele „fluid"-Lösungen vergessen.

So sparst du dir einen ganzen Stapel Breakpoints und die Seite fühlt sich auf jedem Gerät stimmig an. Wenn du eine moderne, responsive Website mit eigenem CMS brauchst, melde dich bei mir.

Quellen

• clamp() – CSS (MDN Web Docs)
• min(), max(), and clamp() (web.dev)