⭐ 0
🔍
Text Bild PDF & Dokumente Audio Musik Elektronik Zeit Dienstprogramme Validatoren Esoterik Spiele

Clamp()-Generator für flüssige Schriftgrößen

Berechnen Sie einen echten, flüssigen CSS-clamp()-Wert aus einer minimalen und maximalen Größe über zwei Ansichtsfensterbreiten hinweg, wobei die Neigung und der Schnittpunkt Schritt für Schritt angezeigt werden und eine Live-Größenvorschau angezeigt wird.

Verarbeitung... 0%

Ergebnis

Auf dieser Seite wird der Rechner mit einer bereits ausgefüllten allgemeinen Einstellung für die flüssige Schriftgröße geöffnet: 16 Pixel bei einem 320-Pixel-Ansichtsfenster bis zu 24 Pixel bei einem 1280-Pixel-Ansichtsfenster. Das ist ein komfortabler Bereich von Körper zu etwas größer, der sich reibungslos von einem typischen Telefonbildschirm zu einem typischen Desktop-Fenster skalieren lässt, und es ist die Einstellung, die die meisten Leute meinen, wenn sie überhaupt nach einer flexiblen Schriftgrößenklemme() suchen.

Die vier Zahlen können geändert werden: Erhöhen Sie die maximale Größe für eine Überschrift anstelle des Textkörpers oder verengen Sie den Anzeigebereich, wenn das Design nur zwischen einem Tablet und einem Desktop-Haltepunkt verschoben werden muss. Was auch immer Sie eingeben, die Steigung und der Y-Achsen-Schnittpunkt werden auf die gleiche Weise neu berechnet und als explizite Arithmetik angezeigt, nicht in der letzten Zeile versteckt.

Unterhalb der vier Eingaben steuert ein Schieberegler für die Breite des Ansichtsfensters eine Live-Vorschau, sodass die Skalierung sofort sichtbar ist und die kopierbereite Klemme()-Zeile nur einen Klick entfernt ist. Wenn Sie die Ausgabeeinheit zwischen rem und px umschalten, wird jede Zahl neu berechnet, ohne die minimalen und maximalen Größenwerte selbst zu berühren.

🛡️
Im Browser ausgeführt

Ihre Dateien und Eingaben verlassen dieses Gerät nie. Die Verarbeitung läuft vollständig offline. 100 % sicher.

Akzeptierte Formate & Regeln

  • Echte Fluid-Typografie-Mathematik: Steigung, VW-Koeffizient und Y-Achsen-Schnittpunkt werden explizit angezeigt, nicht nur die letzte Klammer()-Linie.
  • Live-Vorschau: Ziehen Sie den Schieberegler für die Breite des Ansichtsfensters, um die Größenänderung des Beispieltexts genau so zu beobachten, wie dies bei der Größenänderung eines echten Browserfensters der Fall wäre.
  • Typskalierungsmodus: Eine Basisgröße und ein Verhältnis von 1,125 bis 1,5 erzeugen sechs Fluid-Clamp()-Schritte – klein, Basis, h4, h3, h2, h1 – als kopierfertiges CSS.

Wichtigste Vorteile

✓ Die Linie „clamp()“, die Neigungs- und Schnittpunktzahlen sowie die Live-Vorschau werden während der Eingabe aktualisiert – es ist kein Tastendruck erforderlich.
✓ Ein Schieberegler für die Breite des Ansichtsfensters steuert ein Live-Vorschaufeld, sodass Sie die genaue fließende Skalierung zwischen den minimalen und maximalen Haltepunkten in Aktion sehen können, nicht nur eine Formel.
✓ Ein separater Typskalierungsmodus verwandelt eine Basisgröße und ein Basisverhältnis in eine vollständige 6-stufige, fließende Überschriftenskala, die als Block mit benutzerdefinierten CSS-Eigenschaften bereitsteht.

Anwendungsfälle

  • • Verwandeln Sie eine minimale/maximale Schriftgröße und einen Ansichtsfensterbereich in eine echte Clamp()-Linie – einschließlich Steigung, vw-Koeffizient und Schnittpunkt –, anstatt sie aus einem Tutorial zu betrachten.
  • • Ziehen Sie einen Schieberegler für die Breite des Ansichtsfensters, um eine Vorschau einer fließenden Überschrift oder Körpergröße anzuzeigen, die genau so geändert wird, wie es bei der Größenänderung eines echten Browserfensters der Fall wäre, bevor Sie sie in ein Stylesheet übertragen.
  • • Generieren Sie eine vollständige 6-stufige Flüssigkeitstypskala (klein bis h1) aus einer Basisgröße und einem Verhältnis, kopiert als fertig einfügbaren Block mit benutzerdefinierten CSS-Eigenschaften.
  • • Erstellen Sie eine Fluid-Klammer() für den Abstand (Rand, Polsterung, Lücke) anstelle der Schriftgröße – die gleiche Steigungs-/Schnittpunktformel gilt für jede CSS-Eigenschaft.