Sviluppo web
clamp() per una tipografia fluida: la formula e i tre errori
clamp() fa crescere il testo fra minimo e massimo. La formula corretta, i tre errori che lo rendono illeggibile e come verificarla a ogni larghezza.
In sintesi
- clamp() prende tre valori: minimo, preferito, massimo. Il preferito è quello che rende fluida la scala.
- Il minimo va in rem, mai in px: il testo deve seguire lo zoom del browser.
- Se il valore preferito usa solo vw, lo zoom non cambia nulla: aggiungi sempre un termine in rem.
Risposta breve: clamp() fa crescere il testo in modo continuo fra un minimo e un massimo. La formula che regge è clamp(1rem, 0.8333rem + 0.83vw, 1.5rem): un termine in rem più una parte in vw.
La formula in una riga
clamp() accetta tre argomenti, nell'ordine minimo, preferito, massimo. Il preferito è una retta: il termine in rem fissa il punto di partenza, il termine in vw decide la pendenza. Fra 16 px a 320 px e 24 px a 1280 px la pendenza vale 0,83vw.
# coefficienti per una scala 16px -> 24px fra 320px e 1280px
node -e "const lo=16,hi=24,min=320,max=1280;const s=(hi-lo)/(max-min);console.log(((lo-s*min)/16).toFixed(4)+'rem + '+(s*100).toFixed(2)+'vw')"
# atteso: 0.8333rem + 0.83vwL'output atteso è 0.8333rem + 0.83vw. Se il tuo finisce con un valore in vw senza rem, il testo non seguirà lo zoom e chi legge non potrà ingrandirlo.
Il codice
:root {
--step-0: clamp(1rem, 0.8333rem + 0.83vw, 1.5rem);
--step-1: clamp(1.25rem, 1rem + 1.25vw, 2rem);
--step-2: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
}
h1 { font-size: var(--step-2); line-height: 1.1; }
h2 { font-size: var(--step-1); line-height: 1.2; }
p { font-size: var(--step-0); line-height: 1.6; }Tre errori che arrivano in produzione
| Errore | Cosa succede | Correzione |
|---|---|---|
font-size: 4vw senza clamp | Sotto i 12 px su telefono, enorme su uno schermo 4K | Aggiungi minimo e massimo |
| Minimo in px | Lo zoom del browser non scala più il testo | Minimo in rem |
| Interlinea fissa in px | Le righe si sovrappongono quando il testo cresce | line-height senza unità |
Il limite da conoscere
clamp() controlla la dimensione, non la scala. Due titoli vicini con pendenze diverse si avvicinano a metà viewport e la gerarchia si appiattisce. Costruisci i gradini su una sola scala e verifica il rapporto fra h1 e h2 a ogni larghezza.
Il secondo limite è nei browser mobili: sotto i 16 px iOS ingrandisce la pagina quando un campo prende il focus. Tieni il minimo di body a 16 px, anche se il progetto chiede testo più piccolo.
Come verificarlo
- Ridimensiona la finestra da 320 a 1440 px: il testo deve cambiare senza salti visibili.
- Porta lo zoom al 200%: il testo deve crescere, non restare fermo.
- Controlla il rapporto fra h1 e h2 alla larghezza più stretta.
- Disattiva i font caricati e riprova: la scala deve reggere anche con il font di sistema.
Dove continuare
Nel catalogo: blocchi hero, componenti e blocchi. Le guide: tipografia fluida in Tailwind e Flexbox e Grid per designer; il confronto: Tailwind contro CSS Modules.
Domande frequenti
clamp() è supportato ovunque?
Sì sui browser in uso: Chrome 79, Firefox 75 e Safari 13.1 in poi. Non serve un polyfill, perché un fallback statico in px resta valido.
Perché non basta usare vw?
Perché vw non risponde allo zoom del browser e non ha limiti: su schermo largo il testo diventa enorme e su telefono minuscolo. clamp() mette il tetto e il pavimento.
Meglio clamp() o i breakpoint?
clamp() per la scala tipografica, breakpoint per i cambi di layout. Il breakpoint tipografico serve solo se il contenuto cambia struttura, non se cambia solo la dimensione.
Come calcolo il valore preferito?
Con una retta fra due punti: pendenza in vw e intercetta in rem. Il comando dell'articolo stampa i due coefficienti per la scala che gli passi.
E le unità container query?
Se il componente vive in una colonna stretta, cqi al posto di vw lega la scala al contenitore. Il resto della formula non cambia.