Fluid type scale: CSS-variabelen met clamp()
Deze fluid type scale maakt van vijf getallen een blok CSS-variabelen, één per lettergrootte, elk geschreven als clamp() met rem en vw. Je vult het bereik van schermbreedtes in, de basisgrootte aan beide uiteinden en een schaalverhouding, en elke stap van --text-xs tot --text-4xl groeit soepel mee met het scherm, zonder media queries. Er wordt niets geüpload: de CSS wordt in je browser gemaakt.
Een fluid type scale maken in vier stappen
Vul de vijf velden bovenaan in. Min. viewport (standaard 320) en Max. viewport (1200) zijn de schermbreedtes in pixels waarbij de tekst het kleinst en het grootst is. Min. basisgrootte (16) en Max. basisgrootte (20) zijn de grootte van de lopende tekst bij die twee breedtes. De Schaalverhouding (1,25) bepaalt hoeveel elke stap groter is dan de stap eronder. Elk veld heeft een getalvak en een schuifregelaar.
- Vul het bereik van schermbreedtes in.
- Vul de basisgrootte in voor smalle en brede schermen.
- Kies de schaalverhouding.
- Het CSS-vak eronder wordt bijgewerkt terwijl je typt, dus er is geen verzendknop. Ziet het resultaat er goed uit, klik dan op CSS kopiëren en plak het :root-blok in je stylesheet.
Een veld dat niet bruikbaar is, toont een melding: de maximale viewport moet groter zijn dan de minimale, de maximale basisgrootte groter dan de minimale, de verhouding minstens 1 en elk getal groter dan 0. Gebruik een stap overal waar je een grootte instelt, bijvoorbeeld h1 { font-size: var(--text-3xl); }
Voorbeeld bij elke schermbreedte
Sleep onder Voorbeeld de schuif Voorbeeldbreedte tussen de minimale en de maximale viewport. Elke stap verschijnt als voorbeeldregel „Tekst die soepel meeschaalt” in de grootte die hij bij die breedte heeft, met de naam van de variabele en de grootte in pixels. De grootste stap staat bovenaan.
Zo zie je het verschil tussen lopende tekst en koppen op een kleine telefoon en op een brede desktop, voordat je iets kopieert.
Hoe de clamp()-lettergrootte wordt berekend
Voor elke stap berekent de tool de grootte aan het smalle uiteinde (min. basisgrootte maal de verhouding tot de macht van de stap) en aan het brede uiteinde (max. basisgrootte maal dezelfde macht). Daarna trekt hij een rechte lijn tussen de twee punten: de helling is de verandering in grootte gedeeld door de verandering in viewportbreedte, en het snijpunt is de minimale grootte min de minimale viewport maal de helling. De helling wordt het vw-deel, het snijpunt het rem-deel, en de twee groottes aan de uiteinden worden het minimum en maximum van clamp(). Waarden worden afgerond op 4 decimalen.
Met de standaardwaarden zijn de stappen bij 320, 760 en 1200 px:
- --text-sm: 12,8 / 14,4 / 16 px
- --text-base: 16 / 18 / 20 px
- --text-lg: 20 / 22,5 / 25 px
- --text-xl: 25 / 28,13 / 31,25 px
Waarom rem en vw in plaats van px
Een grootte die alleen in vw is geschreven, negeert de lettergrootte die een bezoeker in de browser heeft gekozen en wordt niet groter bij zoomen. Omdat elk getal hier is verdeeld in een rem-deel en een vw-deel, volgt de tekst nog steeds de basislettergrootte van de gebruiker en kun je blijven zoomen. Dat houdt de tekst bruikbaar voor mensen die grotere letters nodig hebben. De tool geeft nooit px.
Stelt je site html { font-size: 62.5% } in of een andere root dan 16 px? Open dan Geavanceerd en pas Root-lettergrootte aan, zodat 1rem klopt.
Viewports, basisgroottes en schaalverhouding kiezen
Het standaardbereik van 320 tot 1200 loopt van een kleine telefoon tot een laptop. Kies als maximum de grootste breedte waarbij de tekst nog moet groeien, want daarboven blijft de grootte op het maximum staan. Voor lopende tekst is het paar 16 px en 20 px gebruikelijk. De verhouding bepaalt het karakter van de schaal:
- 1,2 (kleine terts): zachte, dicht bij elkaar liggende stappen
- 1,25 (grote terts): evenwichtig, de standaard
- 1,333 (reine kwart): duidelijk contrast
- 1,5 (reine kwint): dramatische koppen
- 1,618 (gulden snede): heel grote sprongen
Bij een verhouding van 1 zijn alle stappen even groot. De verhouding is één getal voor beide uiteinden, dus de schaal heeft bij 320 px en bij 1200 px dezelfde verhoudingen; alleen de basisgrootte verandert.
Onder Geavanceerd hernoemt het Variabelenvoorvoegsel (standaard --text) alle eigenschappen. Stapnamen wisselt tussen sm, lg, xl (--text-sm, --text-base, --text-lg enzovoort) en -1, 1, 2 (--text--1, --text-0, --text-1 enzovoort). Kleinere stappen (0 tot 4, standaard 2) en Grotere stappen (0 tot 8, standaard 5) bepalen hoeveel groottes onder en boven de basis liggen.
Wat deze tool niet doet
Hij maakt alleen de lettergrootteschaal. Er is geen export naar Tailwind of een ander formaat, geen aanpassing per stap, geen aparte verhouding voor het smalle en het brede uiteinde en geen uitvoer in px.
Veelgestelde vragen
Wat is een fluid type scale?
Een fluid type scale is een reeks lettergroottes die soepel meegroeit met de breedte van het scherm in plaats van bij breakpoints te springen. Elke stap, zoals klein, basis, groot en extra groot, krijgt een minimumgrootte voor smalle en een maximumgrootte voor brede schermen, en de grootte ertussen volgt een rechte lijn. De generator schrijft elke stap als een CSS-variabele die je op de hele site kunt hergebruiken.
Hoe gebruik ik CSS clamp() voor lettergrootte?
clamp(min, voorkeur, max) neemt drie waarden. De browser gebruikt de voorkeurswaarde, maar gaat nooit onder het minimum of boven het maximum. Bij tekst bestaat de voorkeurswaarde uit een rem-deel plus een vw-deel, bijvoorbeeld clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem). Zet dat in een eigen CSS-eigenschap en schrijf font-size: var(--text-base) overal waar je het nodig hebt.
Hoe maak ik een lettergrootte die meeschaalt met het scherm in CSS?
Declareer de groottes één keer als clamp()-variabelen en de tekst verandert continu mee als het venster verandert, zonder media queries. Stel „Min. viewport” en „Max. viewport” in op de breedtes waarbij je de kleinste en grootste grootte wilt, vul „Min. basisgrootte” en „Max. basisgrootte” in en kopieer de CSS. Onder de minimale viewport blijft de tekst op de kleinste grootte, boven de maximale op de grootste.
Waarom werkt mijn clamp()-lettergrootte niet?
De gebruikelijke oorzaken zijn een ontbrekende eenheid bij een waarde, geen spaties rond het plusteken in clamp(), een minimum dat groter is dan het maximum, of een voorkeurswaarde die alleen in vw is geschreven en daardoor de lettergrootte-instelling van de gebruiker negeert. De gegenereerde regels vermijden alle vier: elke waarde heeft een eenheid, het plusteken heeft spaties en het minimum is altijd kleiner dan het maximum.
Werkt dit zoals de Utopia fluid type scale calculator?
Het gebruikt hetzelfde idee: groottes worden lineair geïnterpoleerd tussen een smalle en een brede viewport, en elke stap is een veelvoud van de basisgrootte volgens de verhouding. Verschillen: hier is één schaalverhouding voor beide uiteinden, er zijn geen aanpassingen per stap en het geeft alleen gewone CSS-variabelen, zonder export naar Tailwind of iets anders. Kies het als je snel het :root-blok wilt.
Grote terts of reine kwart: welke schaalverhouding kies ik?
De grote terts (1,25) is een goede standaard voor pagina's met veel tekst, omdat de stappen dicht genoeg bij elkaar liggen zodat koppen de tekst niet overheersen. De reine kwart (1,333) geeft meer contrast tussen de stappen en past bij promotiepagina's en grote koppen. De kleine terts (1,2) is nog zachter. Typ de verhouding bij „Schaalverhouding” en bekijk het „Voorbeeld” voordat je kopieert.
Kan ik clamp() in alle browsers gebruiken?
clamp() werkt in elke huidige versie van Chrome, Edge, Firefox en Safari, en dat al sinds 2020. Heel oude browsers negeren een declaratie die ze niet begrijpen. Moet je er een ondersteunen, zet dan vóór de clamp()-regel een regel met een vaste font-size als terugval.
Is dit een fluid typography generator of een CSS clamp calculator?
Allebei. Als fluid typography generator maakt hij de hele schaal met lettergroottes, en als css clamp calculator geeft hij elke clamp()-waarde kant-en-klaar. Wie zoekt op „fluid typography css”, „fluid typography css clamp”, „clamp generator css” of „clamp css online” komt op hetzelfde uit: vijf getallen invullen en het resultaat kopiëren.
Wordt wat ik invul naar een server gestuurd?
Nee. Je browser zet de getallen op de pagina zelf om in CSS en er wordt niets geüpload of opgeslagen. Er is geen account en geen aanmelding.
Aanbevolen
-
UX/UI Wireframe SchetsboekSchets je kop- en broodteksthiërarchie op papier voordat je de schaal instelt.
-
KYY 15,6" draagbare monitorControleer je clamp()-groottes op een tweede scherm op telefoon- en desktopbreedte.
-
Rain Design mStand laptopstandaardZet je laptop op ooghoogte voor lange sessies aan de CSS van je designsysteem.
Help de tools gratis te houden. ✨
Afbeeldingen dienen ter illustratie. Als Amazon-Partner verdien ik aan in aanmerking komende aankopen.
