Dimensionamento dei caratteri CSS: Pixels vs Em vs Rem vs Percent vs Viewport Units

Si è discusso molto su pixels vs em vs percent vs rem e quale proprietà dei font usare e quando. Nonostante tutti gli oltre 100 articoli online, questo argomento può essere molto confuso dato che l’uso di queste proprietà dei font differisce in base alle esigenze dei nostri progetti. Per esempio, alcune persone suggeriscono di non usare valori di pixel fissi a livello di base (elementi html e body) poiché l’utente non avrà la possibilità di reimpostare la dimensione del carattere secondo le sue specifiche. Ma, per le persone come me che dipendono da bootstrap, questo non è consigliabile. Finiamo per avere un valore di base fisso in pixel e dobbiamo creare le proprietà dei font del nostro intero progetto relativamente ai valori di base in pixel.

Questo articolo spiega la differenza tra queste proprietà dei font e come utilizzarle al meglio. Naturalmente, non c’è un modo giusto per farlo e gran parte delle dimensioni dei font da usare e come saranno in gran parte deterministiche in base alla nostra comprensione di queste unità di dimensioni dei font e del progetto in questione.

Pixel: Prima dell’avvento del responsive design, il pixel era ampiamente usato come IL dimensionamento dei caratteri per tutto, dalla tipografia alla larghezza, al padding e all’altezza. Tuttavia, i pixel sono unità di dimensioni fisse e non cambiano in base alle dimensioni del viewport o sono scalabili. Se si vuole costruire un sito responsive utilizzando i pixel, può diventare molto difficile tenere traccia di tutti i valori basati sui pixel in tutto il foglio di stile CSS, compresi i valori all’interno delle media queries. Quindi, quale proprietà dei font possiamo usare che ci permetterà di fare cambiamenti minimi al nostro foglio di stile CSS ma che sia comunque scalabile? Ecco dove entrano in gioco le unità em, rem, percent e viewport.

Em:Em è un’unità flessibile e scalabile che viene convertita dal browser in valori di pixel. Se la dimensione predefinita del font in chrome è 16 px, 1 em = 16 pixel. Un grande equivoco su em è che è relativo alla dimensione del carattere dell’elemento padre. Come da specifiche W3, gli em sono relativi alla dimensione del carattere dell’elemento su cui sono usati. Questo articolo qui ha fatto un lavoro meraviglioso spiegando il concetto di em in modo chiaro e dettagliato. Se volete davvero imparare come funziona em, non saltate l’articolo di cui sopra. Gli em sono comunemente usati per la tipografia come titoli, testi, paragrafi e gli elementi associati alla tipografia come i margini, il padding ecc. Se impostate la dimensione del carattere dei vostri elementi base html e body in pixel e le proprietà dei vostri elementi tipografici sono definite usando gli ems, per il responsive design tutto quello che dovete fare è cambiare la dimensione predefinita del carattere a livello base come

@media (max-width: 400px) {
html, body { font-size: 15px; }
}

e tutti i valori em saranno automaticamente ricalcolati al livello base.

Tuttavia, gli ems hanno un grande avvertimento, l’Ereditarietà! Per esempio, un <div> con un font-size di 16px che contiene un <p> con un font-size di 2em si traduce in 32 px per l’elemento <p>. Ora aggiungete un <div> dentro il <p> con una dimensione del carattere di 0.5em anche lui, il risultato del div sarà 16px, metà di 32 px, non 8px. È qui che entra in gioco il rems.

Rem: Rem è relativo alla dimensione del carattere dell’elemento radice (elemento html). Se il font-size dell’elemento html è 16 px, allora 1rem = 16 px. Rem sarà SEMPRE relativo all’elemento radice, indipendentemente da quanto siano annidati gli elementi. Tuttavia, usare solo i Rem e nessun EMS può avere la sua parte di problemi perché la tipografia può diventare troppo grande o troppo piccola e questo può portare a problemi di scalatura. Questo articolo spiega un ottimo modo per risolvere questo problema.

Percenti: Il valore percentuale è sempre relativo ad un altro valore, sia esso il valore del genitore dell’elemento o un’altra proprietà dell’elemento stesso. Le percentuali sono ampiamente utilizzate nel responsive design. Un grande esempio potrebbe essere il framework Bootstrap di Twitter. Il layout a 12 colonne di Bootstrap ha le sue larghezze impostate in percentuale, quindi sono sempre fluide e dimensionate rispetto al loro elemento genitore
Le percentuali sono comunemente usate per la larghezza e l’altezza dei contenitori, dei div e per il dimensionamento delle immagini responsive.

Unità Viewport: Le proprietà di larghezza e altezza del viewport sono relative alla larghezza/altezza della dimensione corrente del viewport.

1vw = 1% della larghezza del viewport
1vh = 1% dell’altezza del viewport

Viewport qui significa la dimensione della finestra del browser. Se volete dimensionare il vostro elemento in base alla larghezza della finestra e non all’elemento genitore/radice, allora le unità viewport sono l’unità di dimensionamento del carattere che dovete usare. Le unità vw/vh funzionano benissimo con la tipografia e sono comunemente usate per la stessa.
Qui c’è un grande articolo che spiega come usare questa proprietà.

Verdetto finale: Poiché uso spesso bootstrap, la mia dimensione di base predefinita è in pixel. Uso la percentuale per impostare la larghezza e l’altezza di immagini, contenitori e div, ems e rems per la tipografia ed elementi legati alla tipografia come margin, padding ecc. Attualmente sto giocando con le unità viewport per la tipografia responsive e lo trovo fantastico. Sperimentate molto con queste proprietà dei caratteri e presto cadrete in uno stile fatto su misura per voi.