# CSS-Fluid-Typography-Clamp-Rechner Gibt minimale und maximale Viewport- und Schriftgroessen ein und erzeugt clamp(), kopierbares CSS und Vorschaudaten > Kanonische Seite: https://elysiatools.com/de/tools/css-fluid-typography-clamp-calc - **Kategorie:** Design - **Schlagwörter:** css, clamp, fluid typography ## Überblick Berechnet die vw-Steigung und den Achsenabschnitt fuer fluid typography und liefert clamp() plus HTML-Vorschau. ## Eingaben - **Minimale Viewport-Breite** (number) - **Maximale Viewport-Breite** (number) - **Minimale Schriftgroesse** (number) - **Maximale Schriftgroesse** (number) - **Root-Schriftgroesse** (number) - **Beispieltext** (text) ## Wann verwenden - Wenn Sie responsive Schriftgrößen implementieren möchten, die sich fließend an die Bildschirmgröße anpassen, anstatt abrupt bei Breakpoints umzuspringen. - Bei der Erstellung von Design-Systemen oder CSS-Frameworks, die konsistente typografische Skalierungen über verschiedene Endgeräte hinweg erfordern. - Wenn Sie manuelle mathematische Berechnungen für die CSS-Funktion clamp() vermeiden und direkt kopierbaren CSS-Code generieren möchten. ## Funktionsweise - Geben Sie die minimale und maximale Viewport-Breite sowie die dazugehörigen minimalen und maximalen Schriftgrößen in Pixeln ein. - Legen Sie optional die Root-Schriftgröße fest, um eine korrekte Umrechnung in die relative Einheit rem zu gewährleisten. - Das Tool berechnet automatisch die Steigung und den Achsenabschnitt und gibt den fertigen clamp()-Ausdruck sowie eine Live-Vorschau aus. ## Anwendungsfälle - Erstellung von fließenden Überschriften, die auf Smartphones lesbar sind und auf Desktop-Monitoren ihre volle Wirkung entfalten. - Definition von flexiblen Fließtexten in modernen Web-Layouts ohne den Einsatz von verschachtelten CSS Media Queries. - Standardisierung von Abständen und Schriftgrößen in UI-Kits und CSS-Variablen für konsistente Frontend-Entwicklung. ## Häufig gestellte Fragen ### Was bewirkt die CSS-Funktion clamp() bei Schriftgrößen? Sie begrenzt die Schriftgröße auf einen definierten Mindest- und Höchstwert und lässt sie dazwischen linear mit der Viewport-Breite skalieren. ### Warum wird die Root-Schriftgröße benötigt? Sie dient als Basis (meist 16px), um Pixel-Werte präzise in barrierefreie rem-Einheiten für den CSS-Ausdruck umzurechnen. ### Kann ich den berechneten Code direkt in mein Stylesheet kopieren? Ja, der generierte clamp()-Ausdruck kann direkt als Wert für die CSS-Eigenschaft font-size eingefügt werden. ### Was passiert, wenn der Viewport kleiner als das Minimum ist? Die Schriftgröße bleibt konstant auf dem definierten minimalen Pixelwert stehen und unterschreitet diesen nicht. ### Unterstützt das Tool auch andere Einheiten als Pixel für die Eingabe? Nein, die Eingabewerte für Viewport und Schriftgröße müssen in Pixel (px) angegeben werden, um die mathematische Umrechnung korrekt durchzuführen. ## Ähnliche Tools - [Achsen- und Instanz-Baukasten für Variable Fonts und CSS font-variation-settings](https://elysiatools.com/de/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): Lade eine Variable Font (TTF/OTF/WOFF/WOFF2) hoch, um ihre fvar-Achsen und benannten Instanzen zu prüfen, die Interpolation live im Browser voranzusehen und ein kopierfertiges font-variation-settings-CSS samt hochwertiger Ersatzproperties und variablem @font-face-Block zu erzeugen. - [Read-Along-Cue-Generator](https://elysiatools.com/de/tools/audio-read-along-cue-generator): Erstellt Satz- oder Wort-Level-Cues mit Zeitstempel aus Narrations-Audio und Skript für Karaoke-Lesen. - [llms.txt / KI-Crawler-Audit-Generator](https://elysiatools.com/de/tools/llms-txt-and-ai-crawler-audit): Erzeugt eine llms.txt (llmstxt.org-v2-Format: H1, Kurzfassung als Zitat, H2-Dateilisten) aus einem Live-Crawl oder eingefügtem Seiteninventar und auditiert die robots.txt-Politik für GPTBot, ClaudeBot, PerplexityBot und Bytespider nach dem RFC-9309-Algorithmus — mit Allow/Block-Vorschau und zum Einfügen fertigen Direktiven. - [JSON-LD-Generator aus CSV](https://elysiatools.com/de/tools/json-ld-generator-from-csv): Wandelt CSV- oder Excel-Zeilen in Schema.org-JSON-LD fuer Artikel, Produkte oder Events um und liefert validierungsbereite SEO-Ausgaben - [Barcode-Batch-Generator](https://elysiatools.com/de/tools/barcode-batch-generator): Erzeugt stapelweise Code 128, EAN-13, UPC-A, ITF-14, QR Code und Data Matrix aus CSV oder mehrzeiligem Text mit PNG-ZIP- oder PDF-Ausgabe - [ECharts-Theme-Token-Extraktor](https://elysiatools.com/de/tools/echarts-theme-token-extractor): Extrahiert Design-Tokens — Farben, Zahlen, Schriftgrößen und Strings — aus einem ECharts-Theme-JSON und exportiert sie direkt in Ihr Design-System. Fügen Sie ein Theme-Objekt ein (das per echarts.init(dom, themeName) registriert wird) und das Werkzeug durchläuft jedes Leaf, taggt jede Farbe (optional Named/rgb → hex normalisiert), jeden Abstand, jede Schriftgröße und jeden String und gibt saubere CSS-Variablen, ein Tailwind theme.extend, ein Style Dictionary tokens.json oder SCSS-Variablen aus. Überbrückt die Lücke zwischen einem ECharts-Visualisierungs-Theme und Figma/CSS/Tailwind-Design-Tokens, ohne jeden Wert von Hand zu kopieren. - [Bild-Palette zu Design-Tokens](https://elysiatools.com/de/tools/image-to-design-tokens): Extrahiert dominante Farben per k-Means und exportiert sie als CSS-/SCSS-Variablen, Tailwind-Config oder JSON-Tokens mit Namen und Farbskala - [Kunst-QR-Code-Generator mit gestylten Modulen und Logo-Einbettung](https://elysiatools.com/de/tools/qr-code-art-styled-module-and-logo-embed-generator): Erzeugt Kunst-QR-Codes mit Markenfarben, Verläufen, abgerundeten oder Punkt-Modulen und zentriertem Logo — mit ISO-Masken-Strafaufschlüsselung, Modul-Metadaten und Reed-Solomon-Löschbudget-Urteil. ## Beispiele - [Bulma CSS Framework Beispiele](https://elysiatools.com/de/samples/bulma): Bulma CSS-Framework-Beispiele einschließlich Spalten, Komponenten, Formular-Steuerelemente, Layout-System und moderne CSS-basierte Design-Muster - [Milligram CSS Framework Beispiele](https://elysiatools.com/de/samples/milligram): Milligram CSS-Framework-Beispiele einschließlich Typografie, Formulare, Grids und Komponenten - [CSS-Selektor-Beispiele](https://elysiatools.com/de/samples/css-selectors): Sammlung von CSS-Selektor-Beispielen für Extraktions- und Analysetests - [Tailwind CSS Beispiele](https://elysiatools.com/de/samples/tailwind-css): Tailwind CSS Beispiele - Utility-first CSS-Framework mit responsivem Design, Komponenten und benutzerdefinierten Konfigurationen ## Verwandte Inhalte - [CSS-Arbeit, Layout und Kaskade](https://elysiatools.com/de/hubs/css-authoring-layout-and-cascade-workflows): Erstellen und prüfen Sie CSS mit Formatierung, Selektor-Diagnose, responsiven Snippets, visuellen Effekten und Render-Checks.