Fuentes relativas en CSS

En algún momento de nuestra carrera profesional, todos nosotros hemos oído o leido que debemos usar tamaños de fuentes relativos (si no es el caso, te lo digo yo: debes usar tamaños de fuentes relativos).

¿Por qué debo yo usar fuentes relativos?

Simple: por usabilidad.

Como diseñadores, tenemos que dar al usuario la posibilidad de usar el tamaño de fuente que ellos quieran. Usando un tamaño de fuente absoluto estamos quitando esta opción a los usuarios, a muchos usuarios (los que usan ese gran amigo de los diseñadores y desarrolladores web).

Cojamos una web cualquiera al azar, como por ejemplo elpais.com.

Ahora ir al menú Ver > Tamaño de fuente > La más grande.

Y podemos ver como el texto no cambia, tiene el mismo tamaño:

Para los listillos: sí, he usado la misma imagen para el "antes" y el "después". No me apetece gastar ancho de banda para enseñar otra vez lo mismo. Si no os fiáis, siempre podéis probarlo vosotros mismos.

Cómo usar fuentes relativas

Para poder usar tamaños relativos de fuente, debemos partir de la base de que casi todos los navegadores tienen un tamaño estándar de 16px. Sabiendo esto sólo tenemos que hacer algo de matemáticas y usar em como unidad para las fuentes.

Por definición, 1em equivale al tamaño de fuente que estemos utilizando (en nuestro caso 16px). Así 2em equivalen a 32px y 0.5em a 8px.

Si queremos que el tamaño de todos los &ld;p /> de nuestra página tengan un tamaño de fuente de 12px, tendremos que usar el siguiente CSS

p { font-size:.75em; }

Calcular el tamaño de todos los elementos puede ser una tarea tediosa (y odiosa). Podemos simplificarlo cambiando el tamaño de fuente del documento a 10px de forma que las conversiones sean más directas (1em = 10px, 1.2em = 12px, …)

html { font-size:62.5%; } /* 10/16 = 0.625. Usamos porcentajes por que hay navegadores que discriminan el tercer decimal */
p { font-size:1.2em; }

Mas allá: unidades relativas para las medidas

Podemos hacer que el layout de la página se adapte al tamaño de fuente del usuario usando unidades relativas para los anchos. Como hemos establecido un tamaño base de 10px la conversión es directa.

Supongamos el siguiente layout:

<div class="container">
	<div class="col1"><h2>lorem ipsum dolor sit amet</h2></div>
	<div class="col2"><h2>consequecter adipliscing elit</h2></div>
	<div style="clear:both;"></div>
</div>

.container { width:300px; margin:0 auto; }
.col1 { float:left; width: 100px; }
.col2 { float:right; width:200px; }
h2 { font-size:2em; }

Si aumentamos el tamaño de la fuente con el navegador, llegará un momento en el que el texto no entre en las columnas y se solapen. Sin embargo, si utilizamos el siguiente CSS

.container {width:30em;}
.col1 {width:10em;}
.col2 {width:20em;}

Al aumentar el tamaño de la fuente, aumentará de forma proporcional el ancho de las columnas, por lo que nunca se llegará a solapar el texto de una sobre el de otra.

Por cierto. Sí, lo que veis es Internet Explorer 6 sobre mac.