En años pasados, los diseñadores de páginas web utilizaban principalmente el em para definir el tamaño o dimensión de la fuente tipográfica (en lugar de píxeles), ya que las versiones primeras de Internet Explorer no permitían realizar un Zoom al texto que estuviera diseñado en píxeles.
Desde hace un tiempo, los navegadores modernos son capaces de ampliar el texto de la pantalla, incluso si los valores de tamaño del texto (font-size) están declarados en píxeles. Así que, ¿Por qué preferimos y recomendamos usar ems en vez de píxeles otra vez? He aquí las razones.
Razones por las que se recomienda usar ems en vez de píxeles
- Por una parte, todavía hay gente que usa Internet Explorer 6, quienes automáticamente van a ser capaces de ampliar el texto sin problemas (Algo evidente, ¿no?).
- Y por otra, facilita la vida del diseñador / desarrollador; ya que el tamaño de un em esta en relación con el tamaño de su contexto. Así, si por ejemplo, definimos el tamaño de la fuente a 100% en el body y usamos ems para todas las tipografías del sitio, si un cliente nos pide que reduzcamos el tamaño de la letra de todo el sitio, simplemente reducimos el tamaño de fuente del body y los cambios se aplicarán a todas las tipografías del sitio proporcionalmente.
La formula que debes recordar
Si haz creado tu diseño en píxeles hay una sencilla formula para adaptarlo a ems sin demora:
Elemento ÷ Contexto = Resultado
Si vamos a convertir cada fuente basada en pixeles a ems, debes saber que todos los navegadores modernos de escritorio usan 16px como el tamaño de fuente por defecto (a menos que explícitamente lo modifiquemos). Entonces, siguiendo la formula, podemos concluir que las siguientes reglas (aplicadas a body) producirán el mismo resultado:
font-size: 100%;
font-size: 16px;
font-size: 1em;
Caso práctico
Imaginemos que la diseñadora de tu equipo te pide que conviertan un diseño simple en html y css. Tu aceptas y le das un vistazo al PSD que ella te envió:
Bueno, de momento no hay mucho contenido, es cierto; pero, incluso los trabajos más cortos requieren de nuestra atención a los detalles. Por lo que nos ponemos a trabajar. Después de un cuidadoso análisis llegamos a la conclusión de que el HTML que representa esa imagen es el siguiente:
<h1>¿Qué tipo de relación prefieren las tipografías? <span>La Open Type</span></h1>
Un título con un span dentro, semánticamente correcto no? Después de aplicarle la hoja de estilos de reset.css, el contenido se vería de la siguiente manera.
Este es definitivamente un inicio modesto. Pero con nuestro html bien puesto, podemos empezar a añadirle la capa de estilo.
Empecemos por aplicar unas reglas básicas al elemento body.
body {
background-color: #F1EFBF;
padding: 20px;
color: #3F3D01;
font: normal 100% Cambria, Georgia, serif;
}
Nada demasiado lujoso: Estamos aplicando un color de fondo (#F1EFBF) al documento entero, un padding para separar el texto de los bordes de la ventana y un color oscuro al texto (#3F3D01). Finalmente, definimos algunas características de la fuente: Su peso por defecto (weight: normal) y su familia (font-family: Cambria, Georgia, serif).
Hmm! Probablemente ya te haz percatado que el font-size ha sido definido a 100%. Con esto, simplemente estamos diciendo que queremos utilizar el tamaño por defecto del navegador, que como ya vimos anteriormente, en la mayoría de los casos es de 16 píxeles. Ahora ya podemos usar ems para incrementar o disminuir el tamaño de nuestro texto. Pero antes de hacer esto, veamos como esta quedando nuestro titular.
¿Nuestro titular se ve muy pequeño? Recuerda que estamos usando una hoja de estilos para sobreescribir los estilos por defecto que el navegador aplica a los elementos. Esta es una manera sencilla de empezar a trabajar con una línea base para todos los navegadores. Una de las hojas de estilos que recomiendo es la de Eric Meyer, pero hay muchas más si buscamos una alternativa.
Sin ningún cambio adicional, podemos decir que nuestra etiqueta h1 luce pequeña: Esta heredando el tamaño de 100% que definimos al elemento body, es decir 16px.
Ahora, si deseamos manejar el texto con pixeles, simplemente precisamos los valores en el CSS:
h1 {
font-size: 24px;
font-style: italic;
font-weight: normal;
}
h1 span {
color: #63633B;
font-size: 20px;
}
El resultado:
Y esto estaría bien, no hay nada malo en hacerlo así. Pero, para los propósitos de nuestro ejemplo, vamos a expresar estos tamaños de fuente basados en píxeles en valores relativos. Por lo que en lugar de px, usaremos em.
Muy bien, teniendo nuestra fórmula a la mano, vamos definir el tamaño del título de 24px a em:
24 ÷ 16 = 1.5
Entonces: 24px es 1.5 veces más grande que 16px, por lo que nuestro tamaño de fuente debe ser 1.5em. Y voilà! Nuestro titular tiene el tamaño perfecto, pero en valores relativos y escalables.
Es una práctica común colocar la operación matemática al lado de la declaración y en comentario; para tenerla siempre presente por si en el futuro debemos hacerle algún cambio.
Bueno, con la pregunta del titular terminada, es el turno de la respuesta. Actualmente, como se puede ver de la imagen, no es más chica y ese es el problema. Nosotros queremos que se vea un poco más pequeña que la pregunta, a fin de distinguir "Open Type".
Este es el momento de tener en cuenta algo importante. Ya que definimos el tamaño del texto del titular a 1.5em, cualquier elemento dentro del titular necesita ser expresado en relación a tal valor. En otras palabras, nuestro contexto a cambiado.
Por lo que, para definir el tamaño de fuente de nuestra etiqueta span a ems, tenemos que dividir nuestro objetivo de 20px no entre 16px, el valor definido en el body, sino entre 24px, el valor definido para el título (nuestro nuevo contexto):
20 ÷ 24 = 0.833
Ahora puedes sentirte tentado a redondear el 0.833em a su valor más cercano, por ejemplo, 0.83em; pero no presiones la tecla Delete! Podrías provocar que la tipografía no se vea igual. Recuerda que 0.833 (igual si fuera 0.8294333333 representa exactamente el tamaño de nuestra fuente en términos relativos.
h1 {
font-size: 1.5em; /*24/16=1.5*/
font-style: italic;
font-weight: normal;
}
h1 span {
color: #63633B;
font-size: 0.833em; /*20/24=0.833*/
}
Además, los navegadores están perfectamente equipados para redondear los decimales de exceso y convertirlos internamente en pixeles. Así que dejémosles más información, no menos, para que puedan mostrarnos un mejor resultado.
Y así llegamos al final del artículo, espero que te haya agradado. Antes de entrar a tallar temas de media queries y layouts fluidos, quise tocar primero el tema de las tipografías, que son tan importantes para el diseño web.
Si te gustó este artículo también te gustará...
He usado mucho tiempo los tamaños de fuente al 100% en body y en EM los internos.
Y siempre he usado la fórmula de pxSize / 16px = emSize. Sin embargo, éste tip de conversión a EM usando el px del elemento contenedor es bueno... lo empezaré a usar. Gracias por el tip.
Hola, desde hace buen tiempo dejé de usar los px para el tamaño de la letra; por el contrario uso pt (puntos).
Mi pregunta es ¿Cual de los dos tipos de sistema relativo (em y pt) es mejor usar para tipografías web?
Gracias de antemano.
Em es mejor, ya que es escalable y más amigable con los dispositivos móviles.
CSS3 trae un nuevo tipo de medida "REM", que aunque no está soportada por los navegadores antiguos, en un futuro puede facilitar mucho el trabajo de diseño web.
La unidad de medida de REM toma el valor del tamaño de fuente definido en html o body.