Razones para utilizar medidas em en la tipografía de tu web

Siempre han existido dos tipos de maquetación diferenciados por la manera en que se definían los anchos del sitio; el ancho fijo que se definía con píxeles y el ancho variable o dinámico (también fluido) que se definía con porcentajes.

Como bien sabrá cualquiera que se haya dedicado a maquetar una página web (o lo haya intentado), definir anchos dinámicos a golpe de porcentajes es una tarea, además de muy laboriosa, lenta y de gran precisión.

Para maquetar debidamente con porcentajes se necesita conocer muy bien las hojas de estilos, resoluciones y contenidos del sitio web, tarea que no es para nada sencilla teniendo en cuenta que hoy día la mayoría de sitios webs tienen contenidos dinámicos (cambian y varian constantemente).

Con la aparición de las hojas de estilos en cascada (CSS) apareció otra forma de medida además de las dos anteriores llamada relativa que se expresa como em y ha dado lugar a un tercer tipo de maquetación; la maquetación elástica.

Hablando de medidas relativas para las fuentes, el funcionamiento de este tipo de medidas se basan en definir un ancho fijo para la tipografía de todo el documento (en la etiqueta body con font-size) y trabajar en el resto de elementos con medidas em, donde 1em sería exáctamente el número de píxeles que hayamos puesto en nuestra etiqueta body.

Un mejor uso de las medidas relativas es definir un ancho dinámico general con porcentajes para la tipografía en vez de fijo con pixeles.; pero el motivo de esta entrada no es explicar cómo funcionan las medidas relativas (para eso ya habrá otra entrada en un futuro no muy lejano) sino explicar por qué es mejor el uso de estas que el de medidas fijas.

Pongámonos en la situación de que una página web ha sido maquetada utilizando una resolución de 1024×768 pixeles (resolución minima utilizada hoy en día y la más utilizada a la hora de maquetar) y toda la tipografía del contenido está definida con un tamaño de 12 pixeles fijos.

Si nos vamos a una resolución de 1920×1080 (full hd) la web la veremos perfectamente maquetada (si está bien hecha), pero la tipografía será realmente pequeña y nos obligará a acercarnos al monitor para poder leer el contenido.

Si por el contrario utilizamos medidas relativas en la capa que contempla el contenido, la fuente automáticamente será elástica y se adaptará a las preferencias de nuestro navegador, permitiendo que el usuario, con tan sólo cambiar el tamaño de fuente en su navegador, pueda variar el tamaño de la fuente de tu sitio web.

Esto puede parecer algo absurdo o no realmente útil, pero recordemos que nuestra meta es que la web que hacemos sea visible desde el máximo numero de equipos posible, sean cuales sean sus condiciones.

Otra de las ventajas de las medidas relativas en la maquetación web es que el tamaño es relativo a la tipografía que se está utilizando y no al ancho de la ventana del usuario.

Aunque actualmente la maquetación se hace con anchos fijos para la web y relativas para las tipografías, es posible hacer maquetas elásticas con medidas relativas para los anchos de las capas, aunque con ciertos problemas con la adaptación de las imágenes (requiere un tamaño grande para ellas).