Le unità di misura del web

Lettering: Le unità di misura del web

Non esiste design senza layout, non esiste layout senza griglia, non esiste griglia senza misure: e con che criterio definiamo queste misure? Con le unità di misura, ovviamente.

Tante sono le opportunità offerte dalla tecnologia del web da questo punto di vista: dai noti pixel alle percentuali, fino alle misconosciute viewport height e viewport width.

In questo articolo farò una carrellata delle principali unità di misura utilizzate nel design per il web, spiegando cosa sono, dove è opportuno usarle e facendo anche dei rapidi esempi.

Unità di misura assolute e unità di misura relative

Una prima fondamentale distinzione da fare è tra le unità di misura assolute e le unità di misura relative.

Quotidianamente siamo molto più abituati ad utilizzare unità di misura assolute, come il metro per le distanze, il grammo per il peso, il litro per il volume dei liquidi: queste unità di misura ci permettono di definire con certezza le quantità di una determinata cosa.

Le unità di misura relative, così come dice il nome, sono invece calcolate in relazione ad altro. La più comune e intuitiva è la percentuale, che nella vita reale viene spesso utilizzata per numeri molto vasti: ad esempio sentiamo spesso dire cose del tipo “il 50% della popolazione”.

Andiamo ora a vedere quali sono le unità di misura assolute e relative utilizzabili nel web.

Le unità di misura assolute nel web

Tra le unità di misura utilizzabili nel web, per assurdo, compaiono anche anche i centimetri, i millimetri e i pollici; tuttavia ti sfido a trovare un web designer che utilizza queste unità.

Nei fatti l’unica unità di misura assoluta utilizzata nel web è il pixel, abbreviato in px.

Il pixel equivale al punto più piccolo che un display riesce a visualizzare: data questa definizione ne discende che, in realtà, anche il pixel è una unità relativa, perchè la sua grandezza dipende dalla risoluzione dello schermo.

Forse può sembrarvi un po’ complesso, quindi pensate al pixel semplicemente come ad un puntino sul vostro schermo! 🙂

In passato, prima dell’avvento della tecnologia responsive, il pixel era di fatto l’unica unità di misura utilizzata. Oggi mantiene in parte il suo primato, e viene utilizzato principalmente per:

  • le misure dei testi
  • le massime ampiezze degli elementi
  • nei casi in cui è necessario avere una resa pixel perfect

Le unità di misura relative nel web

L’avvento di dispositivi con display dalle dimensioni differenti e la conseguente diffusione dei design responsive ha visto crescere sempre più l’uso di unità di misura relative, da quelle più semplici ad altre più sfiziose.

Vediamo di seguito le più usate:

  • em

    È un’unità relativa alla grandezza del testo dell’elemento a cui è applicata: se ad esempio un testo ha misura 14px e diamo una nuova regola attribuendogli grandezza 2em, il testo diverrà di 28px.
    Come intuitivo, è molto utilizzato per i testi, ma anche per definire margini, padding, interlinea, altezze e larghezze.

  • rem

    La r iniziale sta per root: è infatti un’unità relativa alla dimensione del testo dell’elemento root del documento, solitamente il body. Se il testo del body è settato a 16px, possiamo definire la misura di un altro elemento di testo all’interno del documento dando, ad esempio, 1.5rem, e il testo equivarrà a 24px. Anche questa unità è usata molto per i testi, ma è adatta in generale per qualsiasi cosa debba scalare: per dare una definizione di utilizzo potremmo dire che l’unità rem è utile per tutti i casi in cui non va bene l’unità em.
    Em e rem sono particolarmente comodi per gestire la gerarchia delle dimensioni tra i diversi livelli di intestazione: ad esempio si può definire un h1 a 2rem, un h2 a 1.8rem e un h3 a 1.5rem e mantenere i rapporti di grandezza cambiando semplicemente la dimensione del testo dell’elemento root.

  • vw e vh

    Vw sta per viewport width, mentre vh sta per viewport height: la prima è quindi una unità relativa alla larghezza della viewport del browser (cioè la porzione di schermo in cui è visualizzato il sito), la seconda all’altezza della viewport. Sono molto utili per gli elementi a schermo intero ma anche per definire elementi tipografici in maniera responsive.
    1vh è uguale ad 1% dell’altezza della viewport; allo stesso modo 1vw equivale ad 1% della larghezza della viewport.

  • Percentuale %

    La percentuale è particolarmente utilizzata per definire i layout e le griglie. Il suo utilizzo è molto intuitivo, e l’unità è relativa sempre all’emento che contiene l’elemento al quale stiamo applicando la dimensione. Se ad esempio abbiamo un elemento article che contiene un elemento p, e diamo a quest’ultimo una larghezza del 50%, questo occuperà esattamente la metà della larghezza del suo elemento contenitore, ovvero article.

Ora che ne sai di più sulle unità di misura utilizzate nel web spero possa riuscire a giostrarti meglio nella creazione e nella modifica dei tuoi design.

E tu usi qualcuna delle unità di misura in maniera particolare? Fammelo sapere nei commenti! 🙂

Lascia un commento

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