Tamaño relativo de la fuente

Usar valores absolutos para el tamaño de la fuente es sencillo, aunque no muy flexible. Sirve para los casos más simples.

Por ejemplo, supongamos que establecemos este tamaño para todo el documento:

body { font-size: 16px; }

En el ejercicio sobre herencia vimos que los elementos descendientes que no tengan un tamaño de fuente declarado heredarán este valor, es decir, 16px.

Al encabezado de la página le daremos otro tamaño fijo:

h1 { font-size: 32px; }

Hasta aquí, todo bien. Pero imagina que ahora tenemos que aumentar el tamaño de la fuente del documento de 16px a 20px en pantallas grandes. Si lo cambiamos en body, también cambiará en los elementos que lo heredan. El encabezado, en cambio, conservará su tamaño fijo de 32px.

Queremos que, al cambiar el tamaño de la fuente del elemento padre —en este caso, body—, el de sus descendientes cambie de forma proporcional. Para eso existe la unidad em.

Al usarla en font-size, 1em equivale al mismo tamaño de fuente que tiene el elemento padre. Si queremos que la fuente de un elemento hijo siempre tenga el doble de tamaño, podemos usar 2em:

h1 { font-size: 2em; }

Esta forma de escribir los estilos hace que el código sea más flexible.

Además de las palabras clave de tamaño absoluto, existen dos de tamaño relativo: larger y smaller. Hacen que la fuente del elemento sea más grande o más pequeña que la de su elemento padre. Puedes consultar más detalles en la especificación.