En el anterior artículo te dábamos nuestra opinión sobre que medida es mejor usar px o em, y te comentábamos que haríamos un segundo artículo para comprender el uso de los em’s y como pasar nuestra web de píxeles a em sin sufrir demasiado. Pues bien, ya ha llegado la hora de daros las claves básicas para ello.
Pero antes de empezar a trabajar con los em en nuestras CSS, necesitamos saber el tamaño de fuente por defecto del navegador. Por suerte, esto es fácil de saber. Todos los navegadores tienen por defecto el tamaño de fuente en 16px, o lo que es lo mismo, 1em.
Muchos diseñadores modifican el tamaño de la fuente a 10px (0.625em o 62.5%) en el <body>, para así seleccionar más fácilmente el tamaño de fuente de los hijos. Pero a nuestro parecer, nos parece más correcto dejar la fuente por defecto a 16px, y transformar la medida únicamente en los elementos que lo necesitemos, ya que así, sabremos en todo momento, que el tamaño por defecto será 16px, el mismo que los navegadores. Y así, si alguien ha modificado el tamaño por defecto del navegador, nuestro interface elástico no se romperá y seguirá ajustado perfectamente.
Para conseguir esto definimos esto en nuestra hoja de estilos:
body {
font-size:1em;
}
El problema, como casi siempre, es Internet Explorer. IE, tiene un problema, y es que redimensiona el texto em de forma mucho mayor de lo normal. Por lo que es necesario colocar la siguiente línea en nuestras CSS:
html {
font-size:100%;
}
Con esta línea, incluso IE redimensionará correctamente nuestra web.
Ahora viene lo “duro”, como convertimos de px a em nuestro diseño?
Como seguramente no somos expertos en matemáticas… será bueno apuntarnos o recordar solo una fórmula, no? No te asustes aun, que es facilita. Si eres diseñador/a seguro que conoces bien a los píxeles, por lo que partimos sobre esta base.
1 ÷ tamaño de fuente del padre × tamaño deseado en píxeles = valor en em
Esta fórmula funciona de la siguiente manera, calculamos cuanto mide un píxel en ems y lo multiplicamos por el tamaño en píxeles que necesitemos para obtener cada medida en ems.
Es decir, que si queremos crear un <div> que tenga de ancho 540px, sabiendo que el tamaño por defecto no lo hemos modificado, aplicaremos la fórmula así:
1 ÷ 16 × 540 = 33.75em
Pero si te quieres ayudar un poco con una tabla de conversión en la que seleccionando el tamaño de fuente por defecto, te devuelve la tabla con proporciones a esa medida… te recomendamos visitar, PXtoEM.
Pues creo que con esto ya tenéis la base para empezar a pasar vuestros diseños a ems. Es algo más de trabajo, pero mejora mucho la accesibilidad a la página web y a sus contenidos.
Suerte con los próximos diseños!
