Generatore CSS Clamp (Tipografia Fluida)
Scala tipografica che cresce con il viewport. Scegli dimensioni minime e massime del font, scegli larghezze minime e massime dello schermo — ottieni una regola clamp() pronta da copiare con uno slider di anteprima dal vivo.
Cos'è la tipografia fluida?
La tipografia fluida è una tecnica CSS in cui il testo scala dolcemente tra una dimensione minima e una massima al variare della larghezza del viewport — invece di saltare ai breakpoint delle media query. I browser moderni supportano questo nativamente attraverso clamp(MIN, FORMULA, MAX), che valuta la formula e limita il risultato tra il pavimento e il soffitto. La formula è tipicamente un mix di un offset fisso e un termine relativo al viewport (vw), così il valore segue la larghezza dello schermo all'interno dell'intervallo definito.
Come usare questo generatore
Scegli la dimensione font minima e massima che vuoi per le larghezze di schermo più piccole e più grandi. Poi scegli l'intervallo di viewport — tipicamente un minimo larghezza-telefono (320–375 px) e un massimo larghezza-desktop (1200–1440 px). La casella di output mostra la dichiarazione clamp() esatta che puoi incollare nel tuo CSS. Trascina lo slider di anteprima per vedere cosa produce la regola a qualsiasi larghezza senza ridimensionare il browser. Per una scala tipografica completa (h1, h2, h3, body, small), inserisci valori px separati da virgola nella casella batch e ottieni un set di proprietà CSS personalizzate in un colpo solo.
La matematica dietro clamp()
Dati (minVw, minFont) e (maxVw, maxFont) come due punti, la funzione lineare che passa per entrambi è font = pendenza · vw + intercetta dove pendenza = (maxFont − minFont) / (maxVw − minVw) e intercetta = minFont − pendenza · minVw. Tradurre la pendenza in unità vw la moltiplica per 100, e l'intercetta viene convertita in rem dividendo per la dimensione del font radice (così lo zoom di accessibilità funziona ancora). Il termine centrale di clamp() è quindi {intercetta}rem + {pendenza*100}vw.
Domande frequenti
Perché usare rem invece di px nell'output?
rem quando l'utente cambia la sua dimensione font predefinita nelle impostazioni del browser, ma non scalano i valori px assoluti. Usare rem nel pavimento, soffitto e intercetta di clamp() preserva le preferenze di accessibilità dell'utente e rispetta WCAG 1.4.4 Resize Text. Il termine vw non ha bisogno di conversione — è già relativo al viewport.Quale intervallo di viewport dovrei usare?
clamp() funziona ovunque?
clamp(), min() e max() sono supportati in ogni browser principale dall'inizio del 2020 (Chrome 79, Safari 13.4, Firefox 75). Per browser pre-2020, useresti come fallback una dichiarazione font-size regolare fuori dalla regola, che viene sovrascritta ovunque sui browser moderni.Posso usare clamp() per cose diverse da font-size?
clamp(2rem, 5vw, 6rem) sembra appropriata da telefono a ultrawide senza una singola media query.Come costruisco una scala tipografica completa?
:root.Cos'è l'avviso pendenza-intercetta che alcuni strumenti mostrano?
vw supera una soglia come 5 vw, perché a quella pendenza un piccolo zoom o uno schermo largo fa saltare il testo in modo inaspettato. Questo generatore non impone un limite — ma se il tuo output sembra clamp(1rem, 0.5rem + 8vw, 5rem), considera di allargare l'intervallo viewport così la pendenza scende sotto 4–5 vw.