Il mondo digitale ragiona in pixel, la stessa regola vale quindi anche per il web dove a volte basta un pixel per distruggere un layout e avere un risultato grafico completamente distorto rispetto alle aspettative. Durante la creazione di una pagina ci troviamo spesso con un'immagine di come dovrebbe essere l'interfaccia e iniziamo a tagliarla contando pixel per pixel. Al termine del lavoro avremo sicuramente un livello di fedeltà altissimo; ma cosa succede nel caso in cui, ad esempio, la pagina viene aperta su un televisore? Un font di 12px può essere perfetto per il cellulare, ma non per una proiezione su schermo molto più ampio, dove la distanza di lettura è inevitabilmente maggiore.

Per queste ragioni affidarci ad un dimensionamento basato sui pixel potrebbe essere controproducente. Il CSS oltre a gestire unità di misura assolute, come inches (in), points (pt), millimetri (mm), picas (pc), ecc... offre la possibilità di utilizzare unità relative al contenitore (em), all'elemento (rem) o alla viewport del dispositivo (vw/vh).

Prendiamo in considerazione il codice seguente e andiamo a verificare le dimensioni

<div>
  <p>ciao em</p>
</div>
<p>ciao rem</p>
<label>ciao vw</label>

html{
  font-size: 20px;
}
div{
  font-size: 30px;
}
div > p{
  font-size: 2em;
}
p{
  font-size: 2rem;
}
label{
  font-size: 10vw;
}

Il paragrafo contenuto nel div avrà un font-size finale equivalente a 2 volte il font-size definito nel div. Il secondo paragrafo avrà una grandezza finale di 40px: 2 volte la dimensione definita nell'elemento . La label sarà pari al 10% della larghezza della finestra, modificando le dimensioni del browser vedremo infatti l'altezza del carattere variare coerentemente.