cat html-css/fluid-typography-con-clamp-min-preferred-max.md

Lezione 49 10 min

Fluid typography con clamp(min, preferred, max)

Come usare clamp() per far scalare la tipografia tra un minimo e un massimo senza molte media query.

Nei titoli principali dei siti (<h1>) sorge spesso un problema: su uno smartphone 40px può essere troppo grande, mentre su un monitor ampio può sembrare poco incisivo.

Una soluzione tradizionale è scrivere più media query per far cambiare la dimensione del testo man mano che lo schermo si allarga.

CSS offre una soluzione nativa molto più compatta: la funzione clamp().

Cos’è clamp()?

clamp() è una funzione matematica che “blocca” un valore in modo che scali fluidamente tra un minimo e un massimo, in base al valore “ideale” centrale.

La sintassi accetta esattamente tre parametri separati da virgola: clamp(VALORE_MINIMO, VALORE_IDEALE, VALORE_MASSIMO);

h1 {
  /* Non più piccolo di 2rem, 
     Cresci fluidamente usando l'8% della larghezza dello schermo (8vw)
     Non più grande di 5rem */
  font-size: clamp(2rem, 8vw, 5rem);
}

Come funziona il valore “Ideale”?

Il segreto di clamp() sta nel valore centrale (il Preferred Value). Per creare fluidità, questo valore deve usare un’unità dinamica (quasi sempre vw - Viewport Width).

Quando il browser deve renderizzare l’h1 dell’esempio sopra, farà questo calcolo ad ogni singolo pixel di allargamento dello schermo:

  1. Calcola quant’è l’8vw (l’8% della larghezza della finestra del browser).
  2. Questo 8vw è inferiore a 2rem (circa 32px)? Se sì, blocca a 2rem per evitare che diventi minuscolo.
  3. È superiore a 5rem (circa 80px)? Se sì, blocca a 5rem per evitare che riempia tutto il monitor.
  4. Si trova nel mezzo? Allora usa esattamente l’8vw!

Il risultato è una tipografia fluida: il titolo cresce gradualmente mentre allarghi la finestra, restando entro limiti definiti.

Clamp Generator

Poiché scegliere a mano un buon valore vw può essere scomodo, molti sviluppatori usano strumenti dedicati. Si affidano a strumenti gratuiti online chiamati CSS Clamp Generators o “Fluid Typography Calculators”.

Inserisci la larghezza minima e massima dello schermo, poi la dimensione minima e massima del font: il tool genera una regola clamp() da verificare e adattare nel tuo CSS.