Què són els ems?

Els ems són unitats relatives, el seu nom provè de la mesura que es feia servir a la impremta i que corresponia a l’amplada d’una lletra “M”.

Perquè definir la mida d’una font (propietat font-size) en ems enlloc de píxels?

Com explica molt bé en Felipe Hernán Lavín al post “Controlando tus fuentes con CSS“, el problema el tenim quan ens trobem que l’unica via per a determinar quina mida tindrà un objecte que es visualitzarà a través d’una pantalla és amb els píxels. Els píxels són unitats absolutes, un píxel és un punt a la pantalla. Existeix una amplia varietat en les dimensions de les pantalles, i per lògica, un píxel d’una pantalla amb una ressolució de 800*600 px no és exactament igual a un píxel d’una pantalla de 1024*768 px; ja que, malgrat la mida d’un píxel és absoluta, la seva mida és relativa.
Tenint en compte això, si treballem amb ems, permetem que l’usuari controli la mida de la font que està visualitzant (un aspecte que es destaca a les guies d’accessibilitat WAI de tercer nivell).

Com definir la mida d’una font en ems?

Hem de saber que a una gran part dels navegadors, la mida per defecte d’una font és de 16px. Tenint en compte aquesta dada, la manera més senzilla d’indicar la mida de les fonts és definir al body una valor de 62.5% a la mida de la font; d’aquesta manera aconseguim definir que 1em sigui equivalent a 10px. En base a aquest concepte, podem anar assignant les mides.

La definició quedaria així:
body {
font-size:62.5%; /* font-size equivalent a 10px */
}

Si, per exemple, volem definir un h1 amb una mida en ems equivalent a 15px, hauriem de definir-ho així (sempre i quant aquest h1 no estigui contingut a dins de cap altre element on es redefineixi el font-size):
h1 {
font-size: 1.5em; /* font-size equivalent a 15px */
}

Aquí ve l’explicació:

al body del nostre CSS hem definit una mida de font del 62.5% de la mida per defecte d’un navegador (és a dir, el 62.5% de 16px, que equival a 10px aproximadament).
Per tant, si volem aconseguir una mida de 15px, només cal tenir en compte que 1em són 10px, i per tant 1.5ems són 15px.
Un aspecte important a tenir en compte quan treballem amb ems és que és una mesura relativa a les seves anteriors (el que en anglès s’anomena inheritance, és a dir, herència).

Posem un segon exemple:

Al body (en color verd) hem definit un font-size del 62.5% (amb el que tenim que la font és d’una mida aproximada a 10px), i per tant, un element font amb una mida de 10ems equival a uns 100px.
Si hi afegim un div (en color vermell) on tornem a definir el font-size a 1.5ems, i a dins d’aquest posem un element de 10ems, aquest equivaldrà a uns 150px (i no a 100px, ja que hem redefinit el font-size).
Ara imaginem que tenim un p (en color lila) a dins d’aquest div, on tornem a definir el font-size a 1em; A dins d’aquest element p, un element font de 10ems equivaldrà a 150px (ja que el valor del font-size del div és de 1.5ems, i no de 1em).
Per últim, i per deixar clara aquestes relacions “d’herències”, si tenim un darrer element fora del div (però a dins del body, obviament), d’una mida de 10ems, aquest tindrà un valor de 100px aproximats (ja que depen únicament de la definició font-size del body).

Eines i enllaços útils sobre el tema:

• Controlando tus fuentes con CSS
• Em Calculator (eina pràctica per a transformar la mida d’una font en píxels a ems)
• Mayor control del tamaño de fuente
• How to size text using ems
• Relative font sizes and inheritance
• Elastic Design (at A List Apart)
• El tamaño es relativo
• Els Ems a la Wikipedia

Per últim, agraïr a l’Oriol tota la seva ajuda amb aquest tema (imprescindible!).
Segur que falten moltes dades en aquest post… així que, s’admeten aportacions!