Tamaño de texto/fuente en la web usando em, la mejor opción

Portada

Tecnología

Web y Servidores

Detalles: Categoría: Web y Servidores; Última actualización el Jueves, 26 Mayo 2011 00:59; Escrito por cybnet; Visto: 1929

El tamaño de texto de una página web es definido a través del CSS en píxeles, em o tanto por ciento. Como la mayoría sabemos, definir el tamaño en pixels es lo más fácil: tomas el selector del contenedor del texto, le das un font-size y listo, no hay que tener nada más en cuenta. Definir el tamaño del texto usando porcentajes o em es un poco más complicado y requiere de un diseño del trabajo y un objetivo final claro pero, por suerte, estas técnicas están bien documentadas y son fáciles de encontrar en la red usando el todopoderoso google. Se pueden encontrar muchas opiniones en contra del uso de em para definir el tamaño del texto de una web, en este artículo intentaré explicar que usar em puede ser tan fácil, efectivo y rápido como usar pixels pero con alguna ventaja añadida.

¿Por qué usar em?

Si el mundo fuese un lugar homogeneo todos usaríamos pixels, pero el mundo no es homogeneo, lo cual personalmente me encanta. El motivo principal de no usar pixels en el entorno principal en el que nos movemos hoy en día es mejorar la accesibilidad a nuestra web y permitir que el usuario pueda variar el tamaño del texto si lo necesita cuando visite tu web, y si está definido en pixels hay varias circunstancias en la que este zoom del texto no estará permitido, como por ejemplo si el usuario usa IE y Win.

Definir el tamaño del texto de tu web usando % o em permitirá a todos los navegadores, en todos los sistemas operativos, poder modificar el tamaño del texto (y no me refiero a hacer un zoom de la web). Y em, al igual que los pixels, permite una alta precisión en la elección del tamaño que queramos y es mucho más fácil, como intentaré explicar aquí, que el uso de %.

Usando em para definir el tamaño del texto

Asumamos que el navegador de partida va a tener configurado el tamaño del texto en "medio", lo cual es la configuración por defecto de los navegadores y, sin duda, la usado por el 99% de los visitantes de tu web. El tamaño para "texto medio" en todos los navegadores modernos es 16px. El primer paso que voy a hacer es reducir este tamaño para toda la página a 62.5%.

body {font-size:62.5%;}

Este paso reduce el tamaño de 16px a 10px (62.5% de 16). Elijo 10px para facilitar los ejemplos de este artículo, 10px es demasiado pequeño para un texto de uso habitual. A partir de ahora será muy fácil definir el tamaño usando em pero poder seguir pensando en pixels: 1em serán 10px, 0.8 son 8px, 1.6em son 16px, etc. Aplica el tamaño deseado a cada contenedor que hayas puesto en tu html y el trabajo estará practicamente hecho. Supongamos la siguiente maquetación:

<div id="menu">...</div> 
  
<div id="contenido">...</div> 
  
<div id="lateral">...</div> 
  
<div id="pie">...</div>

#menu {font-size:1em}
#contenido {font-size:1.2em}
#lateral {font-size:1em}
#pie {font-size:0.9em}

Esto nos dará una página donde el menu y el div lateral tendrá un tamaño de texto de 10px, el contenido de 12px y el pie de 9px. Ahora tendremos que definir el tamaño de otros elementos para obtener consistencia en todos los navegadores, por ejemplo, definimos el tamaño del texto mostrado en los tags h1, h2, h3 y h4 que aparecerán en el div #contenido:

h1 {font-size:2em;} //mostrado a 24px 
h2 {font-size:1.5em;} //mostrado a 18px 
h3 {font-size:1.25em;} //mostrado a 15px 
h4 {font-size:1em;} //mostrado a 12px

Como ves, ahora 1em son 12 px pues estamos dentro del div #contenido y la unidad em hace referencia al tamaño del elemento padre y esta es la regla que hay que tener siempre muy clara al diseñar en em.

Paso a paso:

Hemos el texto de body en 10px, el 62.5% del tamaño "medio" que es la configuración por defecto de los navegadores:

16 x 0.625 = 10

El contenido del div #contenido tendría un tamaño de 10px heredado de body, lo hemos modificado a 12 px usando em teniendo en cuenta que em se refiere al tamaño del elemento padre (en este caso el body cuyo tamaño era 10px):

pixels hijo / pixels padre = em hijo

12 / 10 = 1.2

Lo siguiente que queríamos es que los elementos h1 del div #contenido se mostrasen a 24px; hacemos la misma operación:

pixels hijo / pixels padre = em hijo

24 / 12 = 2

Si ahora queremos mostrar otro elemento del div #contenido a 10px, por ejemplo el elemento li, llegaríamos a:

#contenido li {font-size:0.8333em;}// 10 / 12 = 0.8333

¿Y que pasará en una lista que contenga otra lista? Pues que los elementos li de la segunda lista no estarán a 10px, sino más pequeños pues el elemento padre del segundo li no es div #contenido, sino el primer li. Por tanto necesitamos definir otra regla css para prevenir esta herencia en disminución:

li li {font-size:1em;}

Esta última regla simplemente indica que un li anidado en otro li debe tener el mismo tamaño que su elemento padre.

Puedes definir un completo set de elementos que deben tener el tamaño de texto del elemento padre a modo de prevención aunque no tengas planeado usarlos, por ejemplo:

li li, li p, td p, blockquote p {font-size:1em;}

Y así se irá trabajando de forma fácil con em, asegurando la accesibilidad a tu página, con alta precisión y pudiendo pensar en pixels, simplemente recuerda esta regla:

pixels hijo / pixels padre = em hijo

Antes de terminar, ¿qué es un em?

Un em es una unidad tipográfica de espaciado horizontal y medida relativa. Un em es una distancia igual al tamaño del texto; es decir, en una tipografía de 10px, 1em son 10px; en una tipografía de 18px, 1em son 18px; etc. Por tanto, usar em nos asegura que usemos la misma distancia proporcional en cualquier tamaño de tipografía; de esto modo, por ejemplo, un padding de 1em será proporcionalmente igual para cualquier tamaño de texto.

+1 -1 Reportar