CSS: Dimensiones y tamaños de fuente en EM

El código CSS que se utilizará para obtener la equivalencia es el siguiente:

body, html{font-size: 62.5%;}
body {font-size: 101%;}
html>body {font-size: 100%;}
*:first-child+html body {font-size: 101%;}

Antes de crear ninguna regla la equivalencia de 1em es 16px. Por ello puede resultar un poco complicado hacer los cálculos para montar un CSS con medidas en EM.

Para simplificar el uso de dicha unidad de medida se da al elemento HTML un tamaño de fuente de 62.5%:

body, html{font-size: 62.5%;}

La siguiente cuenta aclara un poco la razón del uso del 62.5%:

Posteriormente se debe dar un tamaño de fuente del 100% al elemento BODY, aunque para Internet Explorer será de 101%, para que le salgan las cuentas:

body {font-size: 101%;}

Para los navegadores restantes si se define un 100% de tamaño de fuente, pero habrá que tirar de hack de selector CSS, para que Internet Explorer no lo pille:

html>body {font-size: 100%;}

Pero como este hack tiene efecto en Internet Explorer 7 hay dos opciones:

• Cambiar el hack anterior a uno que excluya a todas las versiones de Internet Explorer.
• Añadir un hack específico para Internet Explorer 7, que es lo que se ha hecho en el código expuesto al principio.

Si se opta por la primera opción, excluir todas las versiones de Internet Explorer 7, se usará esta regla:

html>/**/body {font-size: 100%;}

Y si se opta por el hack de Internet Explorer 7, se utilizará esta otra:

*:first-child+html body {font-size: 101%;}

Este documento está disponible en formato Texto OpenDocument.

Fuente: link