Las unidades EM son una solución excelente para que el diseño web sea realmente flexible. Pero plantean un problema de base puesto que la conversión de pixeles a ems no es nada amigable.

En un post anterior titulado Convertir PX en EM con Em Calculator ya hemos mencionado una herramienta que nos puede ayudar en esta tarea, también comentábamos como los diferentes programas de edición web no tienen este tema en cuenta para ayudar en el trabajo del diseñador web.

Otra forma de conversión de PX a EM es hacer uso del viejo porcentaje «mágico» 62.5% en body. La sorprendente idea y el calculo se lo debemos a Richard Rutter.

Ejemplo del porcentaje mágico

body { font-size: 62.5%; }
#wrapper { width: 100em; }
#header { width: 20em; }
#logo { width: 2.5em; }

Donde:

• 1000px = 100em
• 200px = 20em
• 25px = 2.5em
• etc.

Una evolución del porcentaje mágico

body { font-size: 100%; }
#wrapper { width: 62.5em; }
#header { width: 12.5em; }
#logo { width: 1.5625em; }

Donde:

• 1000px = 1000 / 16 = 62.5em
• 200px = 200 / 16 = 12.5em
• 25px = 25 / 16 = 1.5625em
• etc.

Con ello tenemos una forma más amigable de lograr la conversión PX > EM.