clamp(min, bevorzugt, max) hält einen Wert zwischen einem Minimum und einem Maximum, während der bevorzugte Wert dazwischen skalieren kann — perfekt für responsive Größenangaben.

Warum ist das besser als nur vw zu verwenden?

Reines vw schrumpft oder wächst ohne Einschränkung. clamp() begrenzt es, sodass der Text auf sehr kleinen und sehr großen Bildschirmen lesbar bleibt.

rem respektiert die Schriftgrößeneinstellung des Browsers des Nutzers, was für die Barrierefreiheit besser ist als feste Pixel.

Ist fluide Typografie barrierefrei?

Das kann sie sein, wenn ein vernünftiges Minimum eingehalten und extreme Anstiege vermieden werden. Die Verwendung von rem ermöglicht es Nutzern auch, Text zu skalieren. Testen Sie immer mit Zoom und großen Texteinstellungen.

Werden meine Daten an einen Server gesendet?

Nein. Der clamp()-Wert wird vollständig in Ihrem Browser generiert.

CSS-clamp()-Generator

Mindestgröße (px)

Höchstgröße (px)

Basis-Schriftgröße (px)

Minimaler Viewport (px)

Maximaler Viewport (px)

font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);

Berechnete Größe nach Viewport-Breite

360px

16,3px

768px

19,7px

1024px

21,9px

1440px

24px

So verwenden Sie den Generator

Legen Sie die Mindest- und Höchstgröße in Pixeln fest.
Legen Sie die Viewport-Spanne fest, über die skaliert werden soll.
Kopieren Sie den generierten clamp()-Wert und überprüfen Sie die Vorschau bei verschiedenen Breiten.

So funktioniert es

Das Tool zeichnet eine Gerade zwischen zwei Punkten: Ihrer Mindestgröße beim kleinsten Viewport und Ihrer Höchstgröße beim größten. Diese Gerade wird zum bevorzugten Wert, der mit einem rem-Offset plus einem vw-Anstieg ausgedrückt wird. clamp() sperrt ihn so, dass er nie unter Ihr Minimum fällt oder über Ihr Maximum steigt, was eine sanfte Skalierung zwischen den beiden Breakpoints ergibt.

Funktionen

Echte fluide Skalierung

Größen interpolieren sanft zwischen Breakpoints, anstatt bei Media Queries zu springen.

Ausgabe rem + vw

Die Ausgabe verwendet rem und vw, um Benutzerschrifteinstellungen zu respektieren und Barrierefreiheit zu gewährleisten.

Live-Vorschau

Sehen Sie die berechnete Pixelgröße bei mehreren gängigen Viewport-Breiten.

Benutzerdefinierte Basis

Legen Sie Ihre Basis-Schriftgröße fest, damit die rem-Werte zu Ihrem Projekt passen.

Sofort kopierbar

Kopieren Sie eine vollständige font-size-Deklaration direkt in Ihr CSS.

Wann verwenden?

Fluide Typografie

Skalieren Sie Überschriften und Fließtext sanft vom Mobilgerät bis zum Desktop.

Abstände und Lücken

Wenden Sie denselben fluiden Ansatz auf Padding, Margins und Grid-Abstände an.

Schriftgrößen-Skala

Erstellen Sie eine responsive Schriftgrößen-Skala, bei der jede Stufe mit dem Viewport skaliert.

Konsistenz

Ersetzen Sie Stapel von Media Queries durch ein einziges, vorhersehbares clamp().

Hinweise

Der maximale Viewport muss größer als der minimale sein.
Die Werte verwenden rem basierend auf Ihrer Basis-Schriftgröße (standardmäßig 16px).
Sehr steile Anstiege können die Lesbarkeit bei Zwischengrößen beeinträchtigen.
Alles läuft auf Ihrem Gerät; nichts wird hochgeladen.

Häufig gestellte Fragen

Was macht clamp()?: clamp(min, bevorzugt, max) hält einen Wert zwischen einem Minimum und einem Maximum, während der bevorzugte Wert dazwischen skalieren kann — perfekt für responsive Größenangaben.
Warum ist das besser als nur vw zu verwenden?: Reines vw schrumpft oder wächst ohne Einschränkung. clamp() begrenzt es, sodass der Text auf sehr kleinen und sehr großen Bildschirmen lesbar bleibt.
Warum rem statt px?: rem respektiert die Schriftgrößeneinstellung des Browsers des Nutzers, was für die Barrierefreiheit besser ist als feste Pixel.
Ist fluide Typografie barrierefrei?: Das kann sie sein, wenn ein vernünftiges Minimum eingehalten und extreme Anstiege vermieden werden. Die Verwendung von rem ermöglicht es Nutzern auch, Text zu skalieren. Testen Sie immer mit Zoom und großen Texteinstellungen.
Werden meine Daten an einen Server gesendet?: Nein. Der clamp()-Wert wird vollständig in Ihrem Browser generiert.