Fluid type scale: variabili CSS con clamp()
Questa fluid type scale trasforma cinque numeri in un blocco di proprietà personalizzate CSS, una per ogni dimensione del font, scritte ciascuna come clamp() con unità rem e vw. Inserisci l'intervallo di larghezze dello schermo, la dimensione base a ciascun estremo e un rapporto di scala, e ogni passo, da --text-xs a --text-4xl, cresce in modo fluido con lo schermo, senza media query. Non viene caricato nulla: il CSS nasce nel tuo browser.
Come creare la scala passo dopo passo
Compila i cinque campi in alto. Viewport minimo (320 di default) e Viewport massimo (1200) sono le larghezze dello schermo, in pixel, in cui il testo è più piccolo e più grande. Dimensione base minima (16) e Dimensione base massima (20) sono la dimensione del testo del corpo a quelle due larghezze. Il Rapporto di scala (1,25) indica di quanto ogni passo cresce rispetto a quello sotto. Ogni campo ha una casella numerica e un cursore.
- Inserisci l'intervallo di larghezze dello schermo.
- Inserisci la dimensione base per gli schermi stretti e larghi.
- Scegli il rapporto di scala.
- Il riquadro CSS si aggiorna mentre scrivi, quindi non c'è un pulsante di invio. Quando il risultato ti convince, premi Copia CSS e incolla il blocco :root nel tuo foglio di stile.
Se un campo non è utilizzabile compare un messaggio: il viewport massimo deve essere più grande del minimo, la dimensione base massima più grande della minima, il rapporto 1 o più e ogni numero maggiore di 0. Usa un passo ovunque imposti una dimensione, per esempio h1 { font-size: var(--text-3xl); }
Anteprima a qualsiasi larghezza
Sotto Anteprima trascina Larghezza anteprima tra il viewport minimo e il massimo. Ogni passo compare come riga di esempio «Testo che si ridimensiona con dolcezza» alla dimensione che assume a quella larghezza, con il nome della variabile e la misura in pixel, il passo più grande in cima.
Così valuti il salto tra testo del corpo e titoli su un telefono piccolo e su un desktop largo, prima di copiare qualsiasi cosa.
Come viene calcolata la dimensione con clamp()
Per ogni passo lo strumento calcola la dimensione all'estremo stretto (dimensione base minima per il rapporto elevato al numero del passo) e all'estremo largo (dimensione base massima per la stessa potenza). Poi traccia una retta tra i due punti: la pendenza è la variazione di dimensione divisa per la variazione di larghezza, e l'intercetta è la dimensione minima meno il viewport minimo per la pendenza. La pendenza diventa la parte in vw, l'intercetta la parte in rem, e le due dimensioni agli estremi diventano minimo e massimo di clamp(). I valori sono arrotondati a 4 decimali.
Con i valori di default, a 320, 760 e 1200 px i passi valgono:
- --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
Perché rem e vw invece di px
Una dimensione scritta solo in vw ignora la dimensione del font scelta dal visitatore nel browser e non cresce con lo zoom. Poiché qui ogni numero è diviso in una parte in rem e una in vw, il testo continua a seguire la dimensione base dell'utente e a ingrandirsi con lo zoom, restando leggibile per chi ha bisogno di caratteri più grandi. Lo strumento non produce mai px.
Se il tuo sito imposta html { font-size: 62.5% } o una radice diversa da 16 px, apri Avanzate e cambia Dimensione font radice perché 1rem corrisponda.
Scegliere viewport, dimensioni base e rapporto di scala
L'intervallo di default, da 320 a 1200, va dal telefono piccolo al portatile. Scegli come massimo la larghezza più ampia a cui vuoi che il testo smetta di crescere, perché oltre resta alla dimensione massima. Per il testo del corpo la coppia 16 px e 20 px è una scelta comune. Il rapporto dà il carattere alla scala:
- 1,2 (terza minore): passi dolci e vicini
- 1,25 (terza maggiore): equilibrato, il default
- 1,333 (quarta giusta): contrasto netto
- 1,5 (quinta giusta): titoli di grande effetto
- 1,618 (rapporto aureo): salti molto ampi
Con un rapporto di 1 tutti i passi hanno la stessa dimensione. Il rapporto è un unico numero per entrambi gli estremi, quindi la scala a 320 px e a 1200 px ha le stesse proporzioni; cambia solo la dimensione base.
In Avanzate, Prefisso delle variabili (--text di default) rinomina tutte le proprietà. Nomi dei passi alterna tra sm, lg, xl (--text-sm, --text-base, --text-lg e così via) e -1, 1, 2 (--text--1, --text-0, --text-1 e così via). Passi più piccoli (da 0 a 4, 2 di default) e Passi più grandi (da 0 a 8, 5 di default) decidono quante dimensioni stanno sotto e sopra la base.
Cosa non fa questo strumento
Crea soltanto la scala delle dimensioni. Non c'è esportazione per Tailwind o altri formati, né modifiche per singolo passo, né un rapporto separato per l'estremo stretto e quello largo, né output in px.
Domande frequenti
Che cos'è una fluid type scale?
Una fluid type scale è un insieme di dimensioni del font che crescono in modo fluido con la larghezza dello schermo invece di saltare ai breakpoint. Ogni passo, come piccolo, base, grande ed extra grande, ha una dimensione minima per gli schermi stretti e una massima per quelli larghi, e la dimensione intermedia segue una retta. Il generatore scrive ogni passo come proprietà personalizzata CSS che puoi riutilizzare in tutto il sito.
Come si usa clamp() per la dimensione del font?
clamp(min, preferito, max) accetta tre valori. Il browser usa il valore preferito, ma non scende mai sotto il minimo né sale sopra il massimo. Per il testo, il valore preferito è una quantità in rem più una in vw, per esempio clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem). Mettilo in una proprietà personalizzata e scrivi font-size: var(--text-base) dove ti serve.
Come faccio una dimensione del testo che si adatta allo schermo in CSS?
Dichiara le dimensioni una volta come variabili clamp() e il testo si ridimensiona in modo continuo al variare della finestra, senza media query. Imposta «Viewport minimo» e «Viewport massimo» sulle larghezze in cui vuoi la dimensione più piccola e più grande, inserisci «Dimensione base minima» e «Dimensione base massima» e copia il CSS. Sotto il viewport minimo il testo resta alla dimensione più piccola, e sopra il massimo a quella più grande.
Perché la dimensione del font con clamp() non funziona?
Le cause più comuni sono un'unità mancante in un valore, l'assenza di spazi attorno al segno più dentro clamp(), un minimo più grande del massimo, oppure un valore preferito scritto solo in vw, che ignora l'impostazione di dimensione del font dell'utente. Le righe generate evitano tutti e quattro i casi: ogni valore ha un'unità, il segno più ha gli spazi e il minimo è sempre più piccolo del massimo.
Funziona come l'Utopia fluid type scale calculator?
Usa la stessa idea: le dimensioni si interpolano in modo lineare tra un viewport stretto e uno largo, e ogni passo è un multiplo della dimensione base secondo il rapporto. Le differenze: qui c'è un solo rapporto di scala per entrambi gli estremi, nessuna modifica per passo e solo proprietà personalizzate CSS semplici, senza esportazione per Tailwind o altro. Scegli questo strumento quando ti serve in fretta il blocco :root.
Terza maggiore o quarta giusta: quale rapporto di scala scelgo?
La terza maggiore (1,25) è un buon default per le pagine ricche di testo, perché i passi sono abbastanza vicini da evitare che i titoli schiaccino il testo. La quarta giusta (1,333) dà più contrasto tra i passi e va bene per pagine promozionali e grandi titoli. La terza minore (1,2) è ancora più dolce. Digita il valore in «Rapporto di scala» e controlla l'«Anteprima» prima di copiare.
Posso usare clamp() in tutti i browser?
clamp() funziona in tutte le versioni attuali di Chrome, Edge, Firefox e Safari, e lo fa dal 2020. I browser molto vecchi ignorano una dichiarazione che non capiscono, quindi se devi supportarne uno, metti prima della riga con clamp() una riga con un font-size fisso come alternativa.
È un fluid type scale generator o un generatore di clamp CSS?
Entrambe le cose. Come fluid type scale generator crea l'intera scala di dimensioni, e come generatore di clamp CSS ti dà ogni valore già calcolato. C'è chi lo cerca come «fluid typography generator» o «css fluid typography generator», e chi scrive «clamp css online» o «css clamp online»: tutte queste ricerche portano alla stessa cosa, cioè inserire cinque numeri e copiare il risultato.
Quello che inserisco viene inviato a un server?
No. Il tuo browser trasforma i numeri in CSS direttamente nella pagina e non viene caricato né salvato nulla. Non c'è nessun account e nessuna registrazione.
Consigliati
-
Quaderno per Sketch UX/UI WireframeDisegna su carta la gerarchia di titoli e testo prima di impostare la scala.
-
KYY Monitor Portatile 15.6"Controlla le dimensioni clamp() su un secondo schermo, a larghezza smartphone e desktop.
-
Rain Design mStand Supporto LaptopPorta il portatile all’altezza degli occhi per le lunghe sessioni sul CSS del tuo design system.
Aiuta a mantenere gratuiti gli strumenti. ✨
Le immagini sono solo a scopo illustrativo. In qualità di Affiliato Amazon io ricevo un guadagno dagli acquisti idonei.
