Kennst du das Problem? Du bekommst ein großartiges Design in Figma, aber oft liegt nur die Desktop-Version vor. Die mobilen Schriftgrößen fehlen komplett oder müssen mühsam geschätzt werden. Genau hier setzt mein CSS Clamp Generator an.

Da du im Arbeitsalltag meistens nur die Desktop-Maße aus deinen Design-Vorlagen hast, konzentriert sich dieses Tool auf genau diese Werte. Du gibst einfach die Desktop-Schriftgrößen aus Figma für deine Überschriften (H1 bis H6) und deinen Fließtext ein. Mein Tool berechnet dann automatisch – basierend auf deiner gewählten Type-Scale – die passenden harmonischen Minimalwerte für Smartphones.

Warum Fluid Typography mit clamp()?

Anstatt mühsam Media Queries für jedes Gerät zu schreiben, nutzt mein Generator die CSS-Funktion clamp(). Damit „atmen“ deine Texte stufenlos zwischen den Desktop-Werten aus deinem Figma-Entwurf und den automatisch berechneten mobilen Größen. Das Ergebnis ist eine nahtlose Skalierung, die nicht nur Zeit spart, sondern auch die Barrierefreiheit und Ästhetik deiner Webseite massiv verbessert.

Die Highlights für deinen Workflow:

• Figma-Ready: Trage einfach deine Desktop-Werte ein – das Tool erledigt die komplexe Interpolation für Mobilgeräte von selbst.

• Harmonische Skalierung: Nutze bewährte typografische Verhältnisse (Type Scales), um sicherzustellen, dass deine Hierarchie auch auf kleinen Bildschirmen perfekt bleibt.

• Magische Zeilenabstände: Das Tool generiert automatisch eine fluide Line-Height mit der barrierefreien Formel (https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/): calc(2px + 2ex + 2px).

• Volle Kontrolle: Definiere deine eigenen Viewport-Limits (z. B. Start bei 478px, Ende bei 1280px), um genau zu bestimmen, wann die Skalierung greifen soll.

Kopiere den fertigen CSS-Code direkt in deine WordPress-Seite oder trage die Werte in deine BricksBuilder Variablen ein und bringe deine Figma-Designs ohne Stress in die responsive Realität.