wp-note

Sviluppo Siti Web

Tipografia fluida: cos’è e come implementarla tramite CSS

La scelta dei caratteri, la loro dimensione e la loro disposizione non sono solo una questione di estetica; influenzano la leggibilità, l’accessibilità e l’efficacia complessiva del sito.

Tradizionalmente, i siti web hanno adottato un approccio “responsive” del design, adattando i contenuti a dispositivi di dimensioni diverse. Tuttavia, questa soluzione presenta delle limitazioni, specialmente in termini di tipografia.
Per questo motivo, entra in gioco la “tipografia fluida“, un concetto che sta guadagnando sempre più terreno.

A differenza del design responsive, che spesso si basa su breakpoint statici per adattarsi a diversi schermi, la tipografia fluida si adatta continuamente e dinamicamente al contesto di visualizzazione. Questo approccio offre un’esperienza utente migliore, assicurando che il testo sia sempre leggibile, indipendentemente dal dispositivo utilizzato.

Se ti sei perso l’articolo sui font variabili, ti consiglio di andarlo a leggere avere una visione ancora più completa sull’importanza dei font.

Ma cos’è esattamente la tipografia fluida e come si differenzia dalla tipografica responsive tradizionale?

Tipografia Responsive: approccio classico

La tipografia responsive si basa sull’uso di media query in CSS per adattare le dimensioni del testo a specifiche condizioni di visualizzazione. Per esempio, un designer potrebbe impostare diverse dimensioni di carattere per i telefoni cellulari, i tablet e i desktop, utilizzando punti di interruzione (breakpoints) per determinare quando questi cambiamenti dovrebbero avvenire. Questo approccio consente una certa flessibilità e garantisce che il contenuto sia leggibile su diversi dispositivi.

Esempio base di tipografia responsive con media query

/* Stile base */
body {
  font-size: 1rem;
}

p {
  font-size: 1.1875rem; /* 1.1875*16 = 19px */
}

/* Quando la larghezza dello schermo è al mssimo 1024px (64*16)*/
@media screen and (max-width: 64rem) {
  p {
    font-size: 1rem;
  }
}

In questo esempio, la dimensione del font del paragrafo aumenta, ma non in modo graduale, quando la larghezza dello schermo cresce. Si inizia con una dimensione di base di 16px, che poi aumenta a 19px a seconda delle soglie specificate nelle media query.

Tipografica fluida

La base della tipografia fluida risiede nell’uso di unità viewport (vw, vh, vmin, vmax…).
Queste unità permettono al testo di adattarsi in modo proporzionale alle dimensioni della finestra del browser.

p {
  font-size: 2vw;
}

In questo esempio, la dimensione del font è legata alla larghezza della viewport, permettendo al testo di crescere o diminuire in base alla dimensione dello schermo.

La funzione clamp

L’uso esclusivo di vw causa una variazione eccessiva delle dimensioni del testo. Ad esempio, il testo potrebbe diventare troppo grande su schermi desktop o eccessivamente piccolo su dispositivi mobili.

Per ovviare a questo problema è possibile utilizzare la funzione clamp che permette di definire un valore minimo, un valore preferito e un valore massimo per le dimensioni del testo, offrendo un controllo preciso sulla scalabilità del testo in vari contesti di visualizzazione.

L’esempio riportato sopra, può essere modificato utilizzando la funzione clamp:

body{
  font-size: 1rem;
}

p {
  font-size: clamp(1rem, 2vw, 2rem);
}

I parametri della funzione clamp sono:

  1. dimensione minima (1rem)
  2. dimensione desiderata (2vm)
  3. dimensione massima (2rem)

Nell’esempio precedente, il testo assumerà la dimensione 2vw (2% della viewport) se questo valore è compreso tra 1rem e 2 rem. Nel caso risulti minore di 1rem, la dimensione effettiva sarà 1rem e analogamente se 2vw supera il valore massimo la dimensione sarà 2rem.

Problema di accessibilità: lo zoom del browser non funziona

L’utilizzo di vw (viewport width) per definire le dimensioni del testo può creare problemi significativi quando gli utenti utilizzano la funzione di zoom del browser. Nonostante lo zoom sia un importante strumento di accessibilità utilizzato per migliorare la leggibilità, i testi basati esclusivamente su vw non rispondono a questo cambiamento, poiché la loro dimensione è legata alla larghezza della viewport, non alle impostazioni di zoom del browser.

Combinare vw con rem

Per ovviare a questo problema, è necessario combinare vw con rem (o px). Le dimensioni del testo basate su rem rispondono alle impostazioni di zoom, offrendo un’esperienza più accessibile e personalizzata.

L’esempio precedente può essere modificato nel seguente modo:

body{
  font-size: 1rem;
}

p {
  font-size: clamp(1rem, calc(1rem + 2vw), 2rem);
}

Vanno comunque testati i valori inseriti nella funzione calc per verificare che il testo si riproporzioni in modo corretto.

Creazione di una scala tipografica fluida

L’implementazione di una scala tipografica fluida richiede una pianificazione accurata. In genere, si definisce una dimensione di font base e si stabilisce come questa dimensione dovrebbe cambiare in relazione alle dimensioni della viewport. Ciò viene fatto utilizzando la funzione CSS calc() per creare una formula che “mescola” unità fisse e relative e utilizzando la funzione clamp() per definire dimensioni minime e massime.

Siti per creare la scala tipografica

Per creare una scala tipografica è possibile utilizzare alcuni servizi come Utopia

Creare manualmente la scala tipografica con spiegazione matematica

Per creare una scala tipografica sono necessari semplici calcoli matematici.

Si inizia da:

  1. Definire la dimensione minima della viewport al di sotto della quale il font non deve essere scalato (che chiameremo vmin). Esempio: vmin = 480px.
  2. Definire la dimensione massima della viewport al di sopra della quale il font non viene scalato (che chiameremo vmax). Esempio: vmax = 1400px.
  3. Scegliere la minima e la massima dimensione del font relative ai punti 1 e 2 (che indicheremo con fmin e fmax).
    Esempio:
    • fmin=16px per viewport di dimensioni pari o inferiori a vmin
    • fmax=20px per viewport pari o superiori a vmax
  4. Fare in modo che il font cresca linearmente per viewport comprese tra vmin  e vmax

In parole semplici l’obiettivo è fare in modo che la dimensione del carattere rimanga 16px fino a quando la larghezza dello schermo è minore o uguale a 480px, poi cresca linearmente fino a raggiungere 20px (per valori della viewport che variano da 480px a 1400px) e infine rimanga fisso a 20px per valori superiori a 1400px.

Il grafico della variazione della dimensione del font in funzione della dimensione della viewport è il seguente:

Tipografica fluida css spiegazione completa

Come visto nei paragrafi precedenti, la regola css sarà del tipo:

p {
  font-size: clamp(16px, calc(100 * m vw + q px), 20px);
}

l’obiettivo è quello di calcolare i valori di m e q.

Se non sei interessato alla spiegazione matematica passa direttamente alle ultime righe (dove è riportato il codice), altrimenti continua a leggere.

L’obiettivo è determinare l’equazione della retta che descrive la variazione della dimensione del font (y) in funzione della dimensione della viewport (x).

L’equazione generale di una retta non parallela all’asse delle ordinate è: y = mx + q, dove:

  • m è il coefficiente angolare che determina la pendenza della retta
  • q è l’ordinata all’origine/intercetta ed indica l’ordinata del punto in cui la retta interseca l’asse y

Conoscendo due punti A e B della retta, è possibile calcolare il coefficiente angolare:

 m=\frac{y_B-y_A}{x_B-x_A}

che, considerando A(vmin ; fmin) e B(vmax ; fmax), si traduce in:

 m=\frac{f_{max}-f_{min}}{v_{max}-v_{min}} = \frac{20-16}{1400-480}=\frac{4}{920}=\frac{1}{230} \simeq 0,0043478

Si giunge così a:

y= \frac{1}{230} x+q

Per determinare il valore di q esistono vari metodi, uno di questi consiste nel sostituire nell’equazione le coordinate di un punto della retta, ad esempio A.

16=\frac{1}{230} \cdot 480 + q \textrm{ \qquad (1)}

da cui

16=\frac{48}{23}+q

Isolando q:

q=16-\frac{48}{23}

Da cui:

 q=\frac{320}{23} \simeq 13,913

Abbiamo così ottenuto:

y=\frac{1}{230} x+\frac{320}{23}

Osservazione: a livello algoritmico, per calcolare il valore di q, l’equazione (1) può essere direttamente esplicitata:

q=16-\frac{1}{230} \cdot 480 \qquad \textrm{ ( in generale } q=f_min-m \cdot v_min \textrm{)}

In generale:

Utilizza queste formule per calcolare e valori di m e q

m=\frac{f_{max}-f_{min}}{v_{max}-v_{min}} \simeq 0.0043478 
q=f_{min}-m \cdot v_{min} \simeq 13.913 

Riprendendo il solito esempio, il risultato finale è:

p {
  font-size: clamp(16px, calc(100 * 0.0043478vw + 13.913px), 20px);
}

convertito in rem (16px = 1rem):

p {
  font-size: clamp(1rem, calc(100 * 0.0043478vw + 0.8695rem), 1.25rem);
}

Creazione della scala tipografica

Generalmente in un sito web vengono utilizzate 3-4 dimensioni di font. Per generarli in modo proporzionale è sufficiente stabilire un fattore di scala e moltiplicare per una sua potenza tutti i termini.

Es. fattore di scala 1.25

.base {
  font-size: clamp(1rem, calc(100 * 0.0043478vw + 0.8695rem), 1.25rem);
}

.lg{
  font-size: clamp(calc(1rem * 1.25), calc(100 * 0.0043478vw * 1.25 + 0.8695rem * 1.25), calc(1.25rem * 1.25));
}

.xl{
  font-size: clamp(calc(1rem * 1.25 * 1.25), calc(100 * 0.0043478vw * 1.25 * 1.25 + 0.8695rem * 1.25 * 1.25), calc(1.25rem * 1.25 * 1.25));
}

In questo articolo, abbiamo esplorato ed analizzato le tecniche per implementare una scala tipografica fluida utilizzando unità come vw, rem e funzioni CSS come calc() e clamp(). L’approccio matematico, con un mix di formule e unità di misura, ci ha permesso di comprendere come le dimensioni del testo si adattano e cambiano in modo fluido e proporzionale, garantendo coerenza e leggibilità attraverso una varietà di dispositivi e dimensioni di schermo.


Pubblicato

in

, ,

da

Tag:

Commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *