Fluid-Typografie-Rechner — CSS clamp()
Erzeugt eine CSS-clamp()-Anweisung, die die Schriftgröße sanft zwischen zwei Viewport-Breiten skaliert — keine Breakpoints nötig.
748 Aufrufe
Max-Werte müssen größer als Min-Werte sein
Live-Vorschau (Fenster verkleinern/vergrößern):
Almost before we knew it, we had left the ground.
Das clamp()-Rezept
Fluide Typografie interpoliert linear zwischen einer Mindestgröße bei kleinem Viewport und einer Höchstgröße bei großem: Steigung = (max−min Schrift) ÷ (max−min Viewport), dann font-size: clamp(minRem, interceptRem + Steigung·100vw, maxRem). Für 16→24 px zwischen 375→1280 px Viewports ergibt das clamp(1rem, 0.793rem + 0.884vw, 1.5rem) — exakt 16 px bei 375, exakt 24 px bei 1280, dazwischen fließend, außerhalb gedeckelt.
Der rem-Anteil im bevorzugten Wert ist für die Barrierefreiheit wichtig: eine reine vw-Formel ignoriert die Schriftgrößeneinstellung des Nutzers vollständig, während der rem-Achsenabschnitt Zoom- und Große-Schrift-Einstellungen funktionsfähig hält. Dieser Rechner gibt immer die gemischte Form aus.
Häufig gestellte Fragen
Welchen Viewport-Bereich sollte ich verwenden?
375 px (ein verbreitetes Smartphone) bis zur maximalen Breite Ihres Inhalts — oft 1200-1440 px. Unter-/oberhalb des Bereichs friert clamp() bei min/max ein, sodass nichts auf Uhren oder Ultrawide-Bildschirmen bricht.
Kann ich das auch für Abstände nutzen?
Ja — dieselbe Mathematik funktioniert für Padding, Margins und Gaps. Erzeugen Sie sie mit Ihren Min-/Max-Abstandswerten und legen Sie das clamp() in eine Custom Property.
Warum ist mein Text auf dem Handy nicht exakt die Mindestgröße?
Prüfen Sie die tatsächliche CSS-Viewport-Breite (Gerätepixel ÷ DPR). Ein „390 px"-Smartphone ist breiter als der Bereichsstart von 375 px, daher liegt die Größe absichtlich schon leicht über dem Minimum.
Ähnliche Tools
Problem melden
Fluid-Typografie-Rechner — CSS clamp()