Sviluppo web
Tipografia fluida con clamp
Una scala tipografica fluida si scrive con clamp() in un token del tema: nessun breakpoint, nessun salto. Ecco la formula, i limiti e quando non usarla.
In sintesi
- clamp() dentro un token del tema produce una scala fluida senza breakpoint.
- Il termine centrale in vw va sommato a un valore in rem, altrimenti lo zoom del testo smette di funzionare.
- Nei 97 blocchi in cache clamp() compare 0 volte: la tipografia resta a classi fisse.
La tipografia fluida con Tailwind si scrive con clamp() dentro un token --text-*: una dichiarazione copre tutti gli schermi, senza breakpoint e senza salti di dimensione.
La formula
Un clamp() ha tre argomenti: minimo, valore preferito, massimo. Il valore preferito somma un termine in rem a uno in vw, così il testo cresce con la finestra ma resta controllabile dallo zoom.
@import "tailwindcss";
@theme {
--text-fluid-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-fluid-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
--text-fluid-display: clamp(2rem, 1.3rem + 3.2vw, 4rem);
}Ogni variabile crea un'utility: text-fluid-base, text-fluid-lg e text-fluid-display. In Tailwind 4 il namespace --text-* alimenta anche --text-*--line-height, che puoi impostare sullo stesso token.
Dove finisce la scala
| Token | Minimo | Massimo |
|---|---|---|
| text-fluid-base | 1rem | 1.125rem |
| text-fluid-lg | 1.25rem | 1.5rem |
| text-fluid-display | 2rem | 4rem |
La tabella mostra il compromesso: sotto il minimo il testo smette di rimpicciolirsi, sopra il massimo smette di crescere. I due estremi si scelgono guardando la pagina a 320 px e a 1440 px, non a occhio sul monitor di sviluppo.
Cosa non risolve
La dimensione non è la riga. clamp() non tocca line-height: leading-tight o un token --text-fluid-display--line-height restano necessari, altrimenti un titolo a 4 rem respira male.
- Un token fluido cambia ogni punto della pagina che lo usa, quindi la scala resta coerente perché la fonte è una sola.
- Le unità
vwda sole ignorano lo zoom del browser: per questo il termine centrale è misto, inrempiùvw. - Il minimo va scelto sul corpo del testo, non sul titolo: 1 rem sotto i 400 px evita caratteri troppo piccoli.
- Fonte: documentazione tailwindcss.com e specifica CSS Values 4 per
clamp(), lette il 1 novembre 2026.
La limitazione
Una scala fluida non è una scala accessibile: WCAG 1.4.4 chiede testo fino al 200% senza perdita di contenuto, e un massimo in rem lo consente mentre un massimo in vw no. Il secondo limite è di progetto: la fluidità toglie i punti di controllo, quindi chi ragiona per breakpoint perde i riferimenti.
Dove continuare
Nel catalogo EneUI trovi blog-01, blog-post-preview-tags-01 e text-reveal. Per la parte statica leggi i font gratuiti per l'interfaccia, per il contesto che cos'è Tailwind CSS, per il confronto Tailwind contro Bootstrap. Gli altri due pezzi della serie sono la scala di spaziatura e animazioni senza JavaScript.
Domande frequenti
Che cos'è clamp() in CSS?
È una funzione che restituisce un valore compreso tra un minimo e un massimo, con un valore preferito nel mezzo: clamp(minimo, preferito, massimo).
Perché non usare solo vw?
Perché vw non risponde allo zoom del testo: chi ingrandisce la pagina non ottiene caratteri più grandi. Il termine misto rem più vw conserva lo zoom.
Serve una media query con clamp()?
No. clamp() sostituisce la scaletta di media query per la dimensione del testo. Le media query restano utili per il layout, non per il corpo.
Come si aggiunge a Tailwind 4?
Dichiari --text-nome nel blocco @theme e usi text-nome nel markup. In Tailwind 3 la stessa scala va in fontSize dentro tailwind.config.js.
Cosa succede a 320 px?
Il testo resta al minimo dichiarato. Se il minimo è 1 rem, il corpo non scende sotto i 16 px; titoli e spaziature vanno verificati a quella larghezza.