6XC

Vloeiende typografie-calculator — CSS clamp()

Genereert een CSS clamp() die de lettergrootte vloeiend laat meeschalen tussen twee viewportbreedtes — geen breakpoints nodig.

751 weergaven

CSS —

Live voorbeeld (venster verkleinen/vergroten):

Almost before we knew it, we had left the ground.

Het clamp()-recept

Vloeiende typografie interpoleert lineair tussen een minimumgrootte bij een kleine viewport en een maximum bij een grote: helling = (max−min lettergrootte) ÷ (max−min viewport), dan font-size: clamp(minRem, interceptRem + helling·100vw, maxRem). Voor 16→24 px tussen viewports van 375→1280 px is dat clamp(1rem, 0.793rem + 0.884vw, 1.5rem) — precies 16 px bij 375, precies 24 px bij 1280, vloeiend ertussen, daarbuiten begrensd.

Het rem-gedeelte van de voorkeurswaarde is belangrijk voor toegankelijkheid: een pure vw-formule negeert de lettergrootte-instelling van de browser van de gebruiker volledig, terwijl het rem-snijpunt zoom- en grote-tekstvoorkeuren blijft respecteren. Deze calculator genereert altijd de gemengde vorm.

Veelgestelde vragen

Welk viewportbereik moet ik gebruiken?

375 px (een veelvoorkomende telefoon) tot de maximale breedte van uw inhoud — vaak 1200-1440 px. Onder/boven dit bereik bevriest clamp() op min/max, dus niets breekt op smartwatches of ultrabrede schermen.

Kan ik dit ook voor spacing gebruiken?

Ja — dezelfde wiskunde werkt voor padding, margins en gaps. Genereer met uw min/max spacingwaarden en plaats de clamp() in een custom property.

Waarom is mijn tekst op mijn telefoon niet precies de minimumgrootte?

Controleer de werkelijke CSS-viewportbreedte (apparaatpixels ÷ DPR). Een telefoon van "390 px" is breder dan het bereik dat bij 375 px begint, dus de grootte ligt met opzet al iets boven het minimum.

Vergelijkbare tools

CSS Kleurverloop Generator Ontwerp lineaire, radiale en conische CSS-kleurverlopen met live voorbeeld en kopieer de code. Genereren CSS Box Shadow Generator Ontwerp een box-shadow visueel — verschuiving, vervaging, spreiding, kleur, dekking en inset — met live preview. Genereren CSS Border-Radius Generator Rond elke hoek afzonderlijk of allemaal tegelijk af, in px of %, met live voorbeeld en kopieerbare CSS. Genereren CSS Tekstschaduw Generator Ontwerp een text-shadow met verschuiving, vervaging, kleur en dekking — live voorbeeld op voorbeeldtekst. Genereren