Was ist der Unterschied zwischen Viewport Units (vw) und Container Units (cqw)?

Viewport Units (vw) beziehen sich immer auf das gesamte Browserfenster. Container Query Units (cqw) beziehen sich hingegen auf die Breite des übergeordneten HTML-Elements (Containers). Das ist ideal für wiederverwendbare UI-Komponenten.

Warum wird ein REM-Fallback im CSS Code empfohlen?

Obwohl moderne Browser clamp() vollständig unterstützen, stellt ein Fallback sicher, dass sehr alte Browser oder spezielle Reader-Modi eine funktionierende Schriftgröße rendern.

Wie benutze ich die generierten CSS Variables?

Definiere die Variable z. B. im :root-Bereich deiner CSS-Datei (--fluid-h1: clamp(...);) und wende sie mit font-size: var(--fluid-h1); in deinen Styles an.

Advanced Fluid Typography Engine

CSS Clamp Generator Pro

Profi CSS clamp() & Fluid Typography Generator. Berechne responsive Schriftgrößen mit Presets, Container Queries (cqw), CSS-Variablen und Live-Typografie-Tests.

Typografie Presets

Parameter Konfigurieren

Root Font Size (REM Basis) 16px

Schriftgrößen (Font Size)

Min Größe (PX)

Max Größe (PX)

Viewport / Container Grenzen

Min Breakpoint (PX)

Max Breakpoint (PX)

Erweiterte Optionen

Ausgabe-Einheit für Limits

Skalierungs-Einheit

Interaktiver Typo-Tester

Simulierter Viewport: 800px

320px (Mobile) 768px (Tablet) 1280px (Desktop) 1920px (4K)

Schriftart

Eigener Vorschautext

Responsive Typografie

Aktuelle Größe: 0px (0rem)

Code Export Optionen

REM Fallback einbinden Als CSS Variable

Standard CSS Rule:

font-size: clamp(...);

Tailwind CSS Arbitrary Class:

text-[clamp(...)]

Container Queries Ready

Unterstützt cqw-Einheiten für modernes Komponenten-Design unabhängig von der Bildschirmbreite.

Schnell-Presets

Generiere sofort passende Werte für Headings, Body Text oder Hero-Titel mit einem Klick.

Variables & Fallbacks

Exportiere den Code als saubere CSS Custom Properties (--variable) inklusive Browser-Fallbacks.

Häufig gestellte Fragen (FAQ)

Alles über Fluid Typography und CSS clamp().

Privatsphäre-Einstellungen

Wir nutzen technisch notwendige Speicherungen für den Betrieb der Website. Du kannst selbst entscheiden, welche weiteren Kategorien du zulassen möchtest.

Datenschutz • Impressum • Cookie-Richtlinie

Cookie-Einstellungen

Hier kannst du detailliert festlegen, welche Dienste und Speicherungen du erlauben möchtest. Deine Auswahl kann jederzeit über den Fußbereich geändert werden.

Essentiell & Notwendig Immer aktiv

Notwendig für die grundlegende Funktion der Website (z. B. Speicherung deiner Datenschutz-Auswahl, Security-Token).

Funktional & Präferenzen

Ermöglicht das Speichern von Nutzereinstellungen lokal in deinem Browser (z. B. gewähltes Theme, Tool-Favoriten).

Analyse & Statistik

Hilft uns zu verstehen, wie Besucher die Website nutzen, um Tools und Leistung kontinuierlich zu verbessern.

Fehler / Bug melden