1. In teoria

Entrambe sono unità di misura relative, ma a cosa sono relative? 

La percentuale fa riferimento al proprio contenitore: per esempio se in un div con larghezza 100px  ne mettiamo un altro con larghezza 10% risulterà di 10px. 

L'em invece fa sempre e solo riferimento alla dimensione del testo, e 1em corrisponde sempre al 100% della dimensione del testo e, se il suo contenitore è il body, (quasi) sempre equivarrà a 16px. 

Se utilizzeremo queste due unità di misura sul testo, non vedremo in pratica nessuna differenza fra le due. 

Il discorso cambia se parliamo di elementi contenitori come i div. Innanzitutto essendo l'em relativo al testo, la dimensione di un contenitore con larghezza espressa in em non varierà al variare della risoluzione della pagina; in più, ingrandendo il testo verrà ingrandito anche il suo contenitore, e viceversa. Utilizzando la percentuale invece, le dimensioni del contenitore cambieranno con la risoluzione della pagina e il testo verrà adattato al suo interno.

2. Per esempio

Dimensionamento in percentuale: http://www.csszengarden.com/. Se provate a ridimensionare il browser, vedrete come la struttura si stringe e si allarga, adattando il testo su più o meno righe all'interno di essa.

Dimensionamento in em: http://www.csszengarden.com/?cssfile=/063/063.css. Qui non c'è nessun dinamismo al variare la dimensione del browser, ma provando ad ingrandire o ridurre il testo con le funzionalità del browser, tutta la struttura lo segue.

3. In pratica

Per progettare un layout dobbiamo "disegnarlo" partendo da una risoluzione considerata ottimale per quella struttura: non possiamo disegnare la fluidità. Per cui, creando un design grazie a programmi come photoshop, il progetto finito ci darà delle misure fisse in px (o cm, mm ecc...). Come possiamo quindi trasformare il pixel in percentuale/em?

Il pixel non può essere semplicemente trasformato in percentuale, perchè la sua dimensione varierà al variare della risoluzione. Comunque possiamo (e dovremmo) definire una larghezza massima (in px, o anche in em) per il contenitore della struttura, per poi invece dimensionare in percentuale il resto degli elementi. A questo punto la formula è tristemente matematica.

(elemento ÷ contesto) × 100 = risultato

Passando all'em, Ethan Marcotte nei suoi articoli cita spesso la formula magica, pressochè identica a quella della percentuale.

elemento ÷ contesto = risultato

Dove elemento è il valore in px che vorremmo trasformare, e contesto è il valore in px del contenitore del nostro elemento.

Il "macro" contesto (il body) per la percentuale assume il valore della risoluzione di pagina, mentre per l'em è 16px di dimensione del testo.

Quindi, prendiamo un div contenitore della struttura con queste proprietà:

#container {

max-width:1000px;

}

Vogliamo un altro div al suo interno che corrisponda, nella sua dimensione ottimale, a 100px rispetto ai 1000px del contenitore.

Percentuale:

#content {

width:10%; /* (100 / 1000) * 100 = 10 */

}

Em:

#content {

width:6.25em; /* 100 / 16 = 6.25 */

}

Il primo esempio è matematicamente ovvio. Per l'em invece, notiamo che la divisione viene fatta per 16 e non per 1000: come detto infatti, l'em è relativo al contesto di dimensione del testo; in questo caso il div contenitore non specificava nessuna font-size, sottintendeno quindi la predefinita del body: 16px.

4. In conclusione

E' buona norma utilizzare gli em per il testo. In questo modo tutti i browser (anche il beneamato ie) saranno in grado di gestirne le dimensioni su richiesta dell'utente.

E' norma necessaria (ma non sufficiente!) utilizzare la percentuale per dimensionare i contenitori in un layout fluido. In questo modo lo renderemo accessibile e leggibile per qualsiasi risoluzione minima che riesca a contenerne la struttura. Per le risoluzioni ancora più basse (mobile!) approfondiremo nell'articolo sulle media queries.