# clamp() for fluid typography: the formula and three mistakes

clamp() grows text between a minimum and a maximum. The correct formula, the three mistakes that make it unreadable and how to check it at any width.

> Page: https://ui.eneawork.it/blog/css-clamp-tipografia
> Markdown: https://ui.eneawork.it/blog/css-clamp-tipografia.md

*2026-11-01*

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.

Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, valori letti da /api/stats il 1 novembre 2026. La scala di questo articolo è stata verificata a 320, 768 e 1280 px, poi con lo zoom del browser al 200%: in tutti e tre i casi il testo resta leggibile. Il comando più sotto gira in locale e stampa i coefficienti.

## 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.83vw

L'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

## 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

## 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.

## FAQ

### 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.