HTML {font-size: 62.5%}

Perchè utilizzare come dimensione di default di un font una percentuale invece di indicare espressamente la dimensione in pixel? Su Quora c’è la risposta a questa domanda che mi trova pienamente d’accordo. Cercare di essere meno dipendenti dai “pixel” per cercare di essere il più “universali” possibile. Un esempio banale. Quanto sono alti 10px su un monitor VGA e quanto lo sono su un monitor 4k? Probabilmente sul monitor a 4K si faticherebbe a leggere qualsiasi cosa ci sia scritto a 10px. La densità dei pixel è sempre più concentrata, non è più il caso di restare legati ad una dimensione in pixel che poteva andare bene solo dieci anni fa.

Uno smartphone di 5,5 pollici (13.97cm) con una risoluzione di 2160×3840 pixel (4K-UHD) avrà una stabiliante densità di 806ppi. Un quasi obsoleto monitor da 21.5 pollici (54.61cm) con una risoluzione di 1920×1080 pixel avrà una densità di 102.46ppi.

Il tutto si basa sulla dimensione di default dei browser che al momento è praticamente per tutti di 16px, il 62.5% di 16 pixel sono 10 pixel. La scelta di impostare la misura base dei font di una pagina a 10px è una prassi in uso da molti anni e come minimo ha risolto un paio di problemi in un colpo solo. Semplificare la comprensione del codice e potersi adattare su schermi di varie dimensioni.

Quindi, facendo un piccolo calcolo:

100/62.5 = 1.6

trasforma la dimensione base di 1em uguale a 10px

1em = 10px

fino ad avere una dimensione del 100% associata ai 16px (12pt) standard

1.2em = 12px (75%)
1.4em = 14px (87.5%) 
1.6em = 16px (100%)

E’ un metodo per semplificare il lavoro e fissare 1em a 10 pixel invece dei 16 pixel standard e dover poi ricalcolare le dimensioni nei vari utilizzi. I 10 pixel in punti sarebbero 7.5, gli em 0.625 e la percentuale 62.5%.

Un pixel, termine creato da IBM per definire un “elemento immagine”, è la più piccola unità di informazioni indivisibile di un’immagine digitale. I pixel possono essere visualizzati o stampati, ma non è possibile dividere un singolo pixel in parti più piccole. Un pixel è sempre la più piccola dimensione di informazioni di cui è composto un file immagine.

Impostare una dimensione di base con una percentuale diminuisce le preoccupazioni sui futuri aggiornamenti dei browser e aumenta la compatibilità sui diversi device.

Maggiori specifiche sui “punti per pollice” si trovano sulla pagina Pixel Density di Wikipedia.