Ni fijo, ni líquido. Elástico - Aplicando el ancho óptimo a la web

Aquí empieza lo bueno. Las hojas de estilo admiten el uso de “em” como unidad de medida, lo cual nos permite escribir textos definiendo un tamaño de tipografía relativo sin depender de impredecibles porcentajes. La ventaja número uno es que el tamaño es relativo a la tipografía que se use y no al ancho de la ventana del usuario. La ventaja número dos es que, felizmente, usar “em” como unidad para tamaños de tipografía permite que el usuario pueda variar el tamaño desde el control de tamaño de letra de su navegador preferido.

Una práctica que se usa últimamente es usar anchos fijos (px) para definir los bloques de una página y “em” para el tamaño de la tipografía. Ésto permite al usuario ver el texto en el tamaño que prefiera, eso es bueno… pero… el problema es que alguien necesite ampliar la tipografía dos o más veces y el ancho del contenedor quede como estaba originalmente. Nuestro ancho óptimo de línea da por lo suelos.

Ahora bien, ¿qué sucedería si usásemos “em” como unidad de medida para los anchos de los elementos también? Obtendríamos lo que se conoce como diagramación elástica donde todo lo que se defina basado en “em” dependerá del tamaño de letra que el usuario use.

Obviamente, no todo son rosas en este camino. IE da problemas para manejar distintos tamaños (especialmente cuando se hereda un tamaño definido por un elemento “padre"). Afortunadamente, hay una solución muy simple a este problema. Basta con definir un tamaño de letra basado en porcentaje al BODY de la página. Además, “hilando fino” hay que marcar que, al posicionar con float, IE de Mac necesita que se defina el ancho de al menos uno de los bloques un poco más pequeño de lo que la lógica matemática podría decir. Cosas de la vida.