Medidas relativas

Veamos el siguiente gráfico explicativo:

Colocando varios párrafos dentro de un div con una fuente en una medida absoluta de 12px, y dándole a los mismos medidas relativas obtendríamos el resultado que se observa en el tercer cuadro titulado "resultado":

<div class="relativas">
	<p class="par1">Primer párrafo en 1.2em.</p>
	<p class="par2">Segundo párrafo en 4ex.</p>
	<p class="par3">Tercer párrafo en 10px.</p>
</div>

div.relativas { font-size: 12px; }
p.par1 { font-size: 1.2em }
p.par2 { font-size: 4ex }
p.par3 { font-size: 10px }

em

La unidad em es igual al valor computado de la propiedad 'font-size' del elemento en el que se usa. La excepción es cuando 'em' aparece en el valor de la propiedad 'font-size' en sí misma, en cuyo caso se refiere al tamaño de la fuente del elemento padre. Puede usarse para longitudes verticales u horizontales y es también denominada como cuadratín.

En el siguiente ejemplo, al DIV contenedor se le ha asignado un font-size de 12px y por lo tanto:

• el primer párrafo tendrá el mismo tamaño del letra que el div (12px) y la altura de línea será un 20% mayor que el tamaño de fuente del párrafo.
• el segundo párrafo tendrá un tamaño de fuente 50% mayor que el del div contenedor.
• el tercer párrafo tendrá un tamaño de fuente 100% mayor que el padre.

Por ser una medida relativa, em varía de acuerdo al tamaño de la fuente relevante, entonces si le cambiamos el tamaño de fuente al div contenedor, de 12px a 8px, el resultado sería el siguiente:

ex

La unidad ex es definida por la 'altura-x' de la fuente, es decir que es igual a la altura de la letra "x" minúscula (incluso en aquellas fuentes que no contienen la letra "x").

Hay que tener en cuenta que esta medida no se calcula en relación con otra medida existente en un padre y otra propiedad, sino en relación con la altura de x de la fuente asignada al elemento.

Como se puede notar en el ejemplo, los tres párrafos tienen un tamaño de 2em, pero al variar la tipografía asignada, varía la altura de "x" y por lo tanto la altura designada.

Pixel (px)

Las unidades píxeles están relacionadas con la resolución de los dispositivos visuales, como un monitor.