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:

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)


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.


I più visti

Usare i CSS per creare splendidi effetti di sovrapposizione di testi, immagini e colori

Ovvero come realizzare le dissolvenze e i mascheramenti tipici dei programmi più avanzati di fotoritocco con gli attributi CSS Mix-blend-mode e background-clip: text

Organizzare la comunicazione sul web

Breve guida per le piccole imprese

Automatizzare combinazioni di colori armoniose sul tuo sito web con LESS

Ovvero come passare dalla teoria del colore alla pratica della programmazione di un sistema di colori generato da un colore primario

Centrare un DIV dentro un altro DIV

5 metodi per centrare un DIV in orizzontale e in verticale in una pagina HTML con gli stili CSS, o all’interno di una pagina reattiva bootstrap

Come creare un e-commerce di successo

Gli italiani acquistano on-line?