Quando si tratta di creare un’esperienza utente con i controcazzi, è fondamentale capire la logica che sta dietro alle unità di misura adottate nel digitale, come pixel, rem, em, vw e vh.
Comprenderle per utilizzarle correttamente è un modo efficace per rendere il design flessibile e adatto a diverse dimensioni di display.
Purtroppo, queste unità di misura possono risultare scoraggianti e creare confusione.
Cosa significano? A cosa servono? Quando utilizzarne una piuttosto che un’altra?
Nel post di oggi, esploreremo insieme ciascuna di queste unità di misura, scoprendo come e quando utilizzarle per creare interfacce scalabili, garantendo una visualizzazione coerente su diverse piattaforme e dispositivi.
Pixel, rem ed em
Pixel
L’unità di misura per eccellenza, quella che tutti conosciamo. La prima in assoluto con cui, noi smanettoni digitali, entriamo in contatto fin dall’inizio.
Il nome pixel deriva dall’abbreviazione della parola Picture Element.
Un pixel è il più piccolo elemento colorato che forma un’immagine su uno schermo. Da qui, PIcture x ELement = Pixel.
I pixel sono unità assolute che vengono utilizzate anche nei software di progettazione che tutti utilizziamo per produrre layout, come i famosissimi Figma e Sketch.
Rem
È un’unità relativa collegata direttamente alla dimensione del carattere di base (RFS – root font size) all’interno dell’elemento html del browser.
Utilizzare i rem significa dare vita ad un design dinamico.
Se un utente dovesse modificare le impostazioni del browser, aumentato la RFS, anche il resto verrà ridimensionato di conseguenza, in maniera proporzionale.
Per toglierci ogni dubbio, facciamo un esempio: se la root font size è di 1rem (es. 16px), raddoppiando i rem la dimensione dei pixel andrà di conseguenza (1rem=16px -> 2rem=32px).
Quindi, se l’obiettivo è quello di ridimensionare gli elementi in base alla RFS, a prescindere dalla dimensione del genitore in cui l’elemento è contenuto, è il caso di utilizzare i rem come unità di misura.
Em
È un’unità relativa alla dimensione del font dell’elemento genitore, da non confondere con la root font size di cui abbiamo parlato nel paragrafo dei rem (RFS).
Rispetto alle altre unità di misura, può risultare più macchinosa e complessa da comprendere.
Se l’obbiettivo è quello di ridimensionare l’elemento in base alla dimensione del suo genitore, gli em sono la risposta.
Mettiamo che, ad esempio, il font della label di un pulsante sia di 16px ed il suo padding di 1,5em.
Cambiando la dimensione del font della label, il padding cambierà proporzionalmente.
Ma non solo…
Mentre unità di misura come px, em e rem vengono utilizzate principalmente per la tipografia, per elementi come margini, spazi, larghezze e altezze, corrono in nostro soccorso vw e vh.
Cosa rappresentano queste due strane sigle?
Banalmente, vh significa “viewport height”, mentre vw sta per “viewport width”, ovvero, rispettivamente, l’altezza e la larghezza del browser.
Questa unità di misura “viewport” non indica altro che una misura calcolata in percentuale rispetto alla porzione di browser visibile a schermo.
Impostando, ad esempio, valori come 100vh e 100vw, avremo degli elementi responsive che si adattano, rispettivamente, al 100% della altezza e al 100% della larghezza del browser visibile, senza doverne cambiare le dimensioni per ogni dispositivo.
Dopo tutte queste informazioni, so già che alcuni di voi penseranno “Ok, tutto molto bello, ma noi sui programmi progettiamo in pixel…”
Per ovviare il problema e comunicare al meglio con gli sviluppatori in fase di handoff, basterà impostare nella documentazione anche solo un semplice foglio di stile, definendo i valori di rem & company, corrispondenti alle misure in pixel utilizzate nel layout.
