Blog what I write

Diseñar en unidades EM con el porcentaje magico

post - - 3 replies -

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.

  • Hola otra vez!
    Escribí hace un tiempo un post sobre esto, ya que el 62.5% aplicado al body presenta un problemilla para IE, y es que ignora el porcentaje en decimales, con lo que la equivalencia conseguida no es de 10px sino de 9.92px. Puede parecer una pijada pero se nota.

    Yo uso esta, que establece en 20px el tamaño de fuente para el HTML y en la mitad para el body, consiguiendo la equivalencia exacta en 10px para todos los navegadores.

    html{ font-size: 125%; }
    body{ font-size: .5em; }

    Con esta técnica la conversión sigue siendo tan sencilla como dividir la medida en píxeles por 10.

    • Eso es Kus, te doy la razón totalmente.
      En un proyecto reciente lo viví en mis propias carnes y lo solucione de forma similar.
      Muchísimas gracias por tu aportación.

  • Chris

    Hola. Esto se sigue haciendo igual o ha evolucionado a día de hoy?
    Yo usé hace un tiempo otra manera que no consigo encontrar…
    Saludos