CSS-clamp()-Generator

Was ist CSS-clamp()-Generator?

Der CSS-clamp()-Generator ist ein kostenloser Rechner für fluide Typografie für Frontend-Entwickler und Designer. Du gibst ihm eine minimale Schriftgröße, eine maximale Schriftgröße, eine minimale Viewport-Breite und eine maximale Viewport-Breite; er liefert eine clamp(min, bevorzugt, max)-Deklaration zurück, bei der der bevorzugte Wert einen rem-Offset mit einer vw-Steigung kombiniert, sodass der Text linear mit dem Bildschirm wächst und nie aus deinen Grenzen ausbricht. Das macht gestapelte font-size-Media-Queries überflüssig und hält Überschriften und Fließtext auf jedem Gerät responsiv. Wähle eine Vorschaugröße, um zu sehen, wie der Wert gerendert wird, wechsle die Ausgabeeinheit zwischen rem und px und kopiere die Zeile direkt in dein Stylesheet.

So verwendest du CSS-clamp()-Generator

1. Gib die minimale Schriftgröße ein – die Größe, die der Text auf dem kleinsten Bildschirm haben soll.
2. Gib die maximale Schriftgröße ein – die Größe, die der Text auf dem größten Bildschirm erreichen soll.
3. Lege die minimale und maximale Viewport-Breite fest, zwischen denen die Größe skalieren soll.
4. Öffne die Einstellungen, um bei Bedarf die Ausgabeeinheit zu wechseln (rem bleibt barrierefrei; px ist ebenfalls verfügbar).
5. Wähle eine Vorschaugröße, um Beispieltext bei diesem Viewport zu rendern, und lies den Live-clamp()-Wert ab.
6. Kopiere den erzeugten clamp()-Ausdruck und füge ihn in deine CSS-font-size ein.

Beispiele

Min. Schrift 16, Max. Schrift 20, Min. vw 320, Max. vw 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

Min. Schrift 32, Max. Schrift 64, Min. vw 320, Max. vw 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

Min. Schrift 12, Max. Schrift 14, Min. vw 480, Max. vw 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

Häufig gestellte Fragen

Wie skaliert der clamp()-Wert ohne Media Queries?

clamp(min, bevorzugt, max) nimmt eine Untergrenze, einen bevorzugten (fluiden) Wert und eine Obergrenze. Der bevorzugte Wert ist eine Gerade der Form rem + vw, so berechnet, dass die Schrift beim minimalen Viewport deinem Minimum und beim maximalen Viewport deinem Maximum entspricht. Zwischen diesen Breiten interpoliert der Browser automatisch, und außerhalb davon fixiert clamp() die Größe auf die nächstgelegene Grenze – alles in einer einzigen Deklaration.

Warum erfolgt die Ausgabe in rem statt in px?

rem für die festen Teile zu verwenden respektiert die Schriftgrößeneinstellung im Browser des Nutzers, was für die Barrierefreiheit besser ist. Die viewport-relative Steigung wird in vw ausgedrückt. Du kannst die Einheit in den Einstellungen auf px umstellen, wenn dein Projekt absolute Einheiten benötigt, aber rem ist die empfohlene Voreinstellung.

Welchen Viewport-Bereich sollte ich verwenden?

Eine gängige Wahl ist deine kleinste unterstützte Breite (oft 320px oder 360px) für das Minimum und dein breitester Inhaltscontainer (etwa 1240px–1536px) für das Maximum. Die Schrift ist nur innerhalb dieses Bereichs vollständig fluid; darunter bleibt der Text beim Minimum und darüber beim Maximum.

Funktioniert das für jede CSS-Länge, nicht nur für font-size?

Ja. Der erzeugte clamp()-Wert ist einfach eine Länge, du kannst ihn also in padding, margin, gap oder jede Eigenschaft einfügen, die eine Länge akzeptiert. Die Beschriftungen erwähnen font-size, weil fluide Typografie die häufigste Anwendung ist, aber die Mathematik ist für Abstände identisch.

Werden meine Daten irgendwohin gesendet?

Nein. Die Berechnung läuft vollständig in deinem Browser mit JavaScript – deine Schriftgrößen und Viewport-Breiten werden nie auf einen Server hochgeladen, sodass das Tool privat und nach dem Laden der Seite sogar offline funktioniert.