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

> Pagina: https://ui.eneawork.it/blog/tailwind-tipografia-fluid
> Markdown: https://ui.eneawork.it/blog/tailwind-tipografia-fluid.md

*2026-11-01*

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.

Nei 97 blocchi shadcn/ui in cache (173 file, 496.045 caratteri) clamp() compare 0 volte, come i valori arbitrari text-[...]; leading-* compare invece 140 volte in 71 blocchi, misurate con node il 1 novembre 2026. Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats lo stesso giorno. Tailwind CSS è distribuito con licenza MIT: repository tailwindlabs/tailwindcss, file LICENSE.

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

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.

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

## FAQ

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