Cómo usar ems en vez de pixeles para la tipografía de nuestro diseño web

Balu30 Septiembre 2012 - 7:50pm 4 comentarios
Enviar por Email Imprimir

Cómo usar ems en vez de pixeles para la tipografía de nuestro diseño web

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ó:

Diseño Web en PSD

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.

Diseño Web de la tipografía sin estilos
Ver ejemplo

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.

Diseño web de la tipografía con estilos CSS
Ver ejemplo

¿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:

Diseño web de la tipografía con píxeles
Ver ejemplo

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.

Diseño web de la tipografía del titular con em
Ver ejemplo

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.

Diseño web de la tipografía en em
Ver ejemplo

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.

Comentarios

Imagen de Fernando Magro
Fernando Magro

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.

Imagen de Oscar Contreras
Oscar Contreras

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.

Imagen de baluart
baluart

Em es mejor, ya que es escalable y más amigable con los dispositivos móviles.

Imagen de Diseño Web
Diseño Web

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.

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más