Font-size CSS per una tipografia fluida e responsive.
px – em – rem – vw – vh – vmin – emax: la guida alle unità di misura dei font, per capirne le differenze, come e quando utilizzarle

Html e css

Autore: Sanchini Mirco

In questa rubrica spiegherò le caratteristiche delle unità di misura dei caratteri di un testo sul web, soffermandomi su quali, quando e perché utilizzarle per ottenere una tipografia fluida, ossia scalata, leggibile e proporzionata a seconda dei vari dispositivi di lettura e del loro orientamento.

Nello specifico andremo ad analizzare i seguenti argomenti:

unità pixel (px);

unità flessibili (em) e (rem);

unità viewport (vw), (vh), (vmin) e (vmax);

2 metodi ibridi per ottimizzare le dimensioni dei testi.

Unità pixel (px)

I pixel (px) sono l’unità di misura più semplice da usare. È una misura fissa e definita che non scala mai, sia che rimpiccioliamo o ingrandiamo il contenitore di un elemento espresso in px, che la finestra del browser.
Tuttavia il limite più grande di questa unità non è la scalabilità, che può essere aggirato con l’utilizzo di media query.
Supponiamo che dopo un lavoro abbastanza laborioso di media query riusciamo ad aggiustare i nostri testi in questo senso, cosa succede se il lettore modifica la dimensione del carattere predefinita del browser (o di sistema)?
Niente, 16px rimarranno 16px, senza tenere conto delle preferenze dell’utente, il che non è un buon risultato in termini di user experience. Mi chiedo se em e rem siano state introdotte per questo.

Unità flessibili (em) e (rem)

Vi presento le unità di misura flessibili. Vengono espresse in em e rem e sono unità scalabili tradotte in pixel dal browser. Quindi, mentre nel precedente caso i 16px rimanevano 16px (vi ricordate?) con le unità di misura flessibili se un utente ha il browser impostato alla dimensione di carattere predefinita di 16px questi saranno moltiplicati per la quantità espressa in em o rem a loro assegnata:

h1 {font-size: 1.5rem/em;} = (16 x 1.5) = 24px

A meno che l'elemento html non venga sottoposto a override con un valore fisso impostato in modo esplicito:

html lang=”it” style=”font-size:16px;”

In questo caso il titolo sarà sempre di 24px con h1 = 1.5 rem, ma non cambierà dimensione modificando le impostazioni della dimensione di carattere del browser.

Ma qual’è la differenza tra (rem) ed (em)?

La traduzione di unità rem in valori pixel dipende dalla dimensione del carattere dell’elemento principale (radice em) della pagina, ossia l’elemento html;

La traduzione di unità em in valori pixel dipende dalla dimensione del carattere dell’elemento che li contiene, ossia l’elemento padre.

Ricapitolando, se da un lato le unità di misura flessibili non sono così immediate da usare rispetto ai pixel, dall’altro lato consentono un’esperienza utente e una gestione dei rapporti migliori. Tuttavia rimangono ancora macchinose quando si tratta di regolare la dimensione del carattere in base alla dimensione dello schermo. Se è questo il nostro obbiettivo forse è il caso di passare alle unità vewport.

Le unità viewport

Con CSS3 è arrivato un nuovo set di unità che ci consente di creare testi proporzionati alla larghezza e all’altezza del browser: sono le unità viewport. Sono 4 e in ciascun caso il valore 1 è uguale all'1% della larghezza o dell'altezza del browser:

vw - larghezza del browser;

vh - altezza del browser;

vmin - altezza o larghezza del browser, a seconda di quale sia minore;

vmax - altezza o larghezza del browser, a seconda di quale sia la più grande.

Partiamo dalle prime due unità, vw e vh. Offrono il grande vantaggio di scalare la dimensione di un testo sulla larghezza o l’altezza del display, tuttavia un testo ben bilanciato su un dispositivo verticale potrebbe apparire sproporzionato su uno orizzontale: troppo grande impostando il carattere in vw e troppo piccolo in vh.

Con vmin e vmax il rendering manterrà le stesse proporzioni, risultando più coerente (vedi immagine sottostante).

Come si vede nell’immagine sopra riportata ruotando lo stesso dispositivo in orizzontale o in verticale la dimensione del font non cambia e la lettura è gradevole. Ma cosa accadrebbe su due dispositivi differenti, ad esempio uno smartphone e un tablet? Lo stesso testo potrebbe risultare un po’ goffo e grossolano su un tablet letto in orizzontale e addirittura poco leggibile su uno smartphone verticale. E adesso?

Metodi ibridi

La soluzione è utilizzare dei metodi ibridi. Adesso che conosciamo tutte le unità di misura messe a disposizione dai CSS per regolare la grandezza di dei font non ci resta che utilizzarle al meglio! Ricorrendo a qualche nozione di matematica e perché no, a qualche tentativo. Vediamo due tecniche ibride per controllare al meglio la scalatura dei nostri testi. In entrambe utilizzerò la funzione CSS calc():

Come "ammorbidire" la scalatura dei font sommando unità fisse o poco flessibili ad unità estremamente flessibili.

h1 {
Font-size: calc(0.5rem + 5vmin);
}

Questa funzione ci restituirà su uno schermo di 320px un titolo di 24px:
(0.5 x 16) + (320 x 0.05) = 8 + 16 = 24px

e su uno schermo di 768px un titolo di 46px:
(0.5 x 16) + (768 x 0.05) = 8 + 38 = 46px

Definire la grandezza minima di un font sulla larghezza più piccola del browser e quella massima dello stesso font sulla larghezza più grande del browser per ottenere proporzioni personalizzate della scalatura del font costanti su ogni tipo di dispositivo.

h1 {
font-size: calc(24px + (46 - 24) * ((100vw - 320px) / (1600 - 300)));
}

Questa funzione ci restituirà su uno schermo di 320px un titolo di 24px e su uno schermo di 768px un titolo di 46px.

Stampa

CSS per creare contenitori obliqui o con forme geometriche complesse. SVG, clip-path, transform skew, border radius, sono le tecniche CSS usate per creare splendide intestazioni non rettangolari in un file HTML, qual è la migliore?

Testi e contenitori sfumati con la proprietà CSS background-clip Ovvero come estendere il colore o l’immagine di sfondo di un elemento ai suoi vari livelli, dal testo fino ai bordi del suo contenitore.

Articoli in evidenza

Font-size CSS per una tipografia fluida e responsive.
px – em – rem – vw – vh – vmin – emax: la guida alle unità di misura dei font, per capirne le differenze, come e quando utilizzarle

Nello specifico andremo ad analizzare i seguenti argomenti:

Unità pixel (px)

Unità flessibili (em) e (rem)

Le unità viewport

Metodi ibridi

E' ancora utile fare blogging oggi ?

Target e Personas

Come si evolve il SEO, migliorare il posizionamento su google.

A scuola di contenuti

Come scrivere contenuti efficaci per il web

Quanto costa fare un sito