Propiedad font-size

Ejemplos de uso

La propiedad font-size permite establecer el tamaño de letra del texto. Además de todas las unidades de medida absolutas y relativas conocidas (em, ex, px, %, in, cm, mm, pt, pc) también se pueden utilizar palabras clave que hacen referencia a tamaños de letra absolutos y relativos.

Los tamaños de letra absolutos se establecen mediante las palabras clave xx-small, x-small, small, medium, large, x-large, xx-large. Aunque depende de cada navegador decidir el tamaño de las palabras clave, normalmente coinciden con los tamaños de los títulos de sección <h1> a <h6>:

Como son tamaños de letra absolutos, el texto del ejemplo anterior siempre se ve con el mismo tamaño, independientemente de la resolución de la pantalla o del tamaño de otros elementos de la página.

Además de los tamaños absolutos, la propiedad font-size permite establecer el tamaño del texto de forma relativa mediante las palabras clave larger y smaller. La referencia que se toma para calcular un tamaño más grande (larger) o más pequeño (smaller) es el tamaño de letra del elemento contenedor.

De esta forma, si el elemento contenedor tiene un tamaño de letra equivalente a medium, el tamaño utilizado si se indica un valor larger será large y si se indica un valor smaller será small. Si el contenedor tiene un tamaño igual a x-small, el valor larger será small y el valor smaller será xx-small y así sucesivamente. Si el elemento contenedor no tiene un tamaño de letra que coincida exactamente con uno de los valores absolutos, el navegador lo redondea al valor absoluto más cercano.

Hace unos años, era muy común utilizar los valores absolutos (x-small, small, etc.) para establecer el tamaño de letra del texto. No obstante, hoy en día su uso se ha reducido drásticamente. El uso de los valores relativos (larger, smaller) siempre ha sido residual.

De todas las unidades de medida absolutas y relativas disponibles, se recomienda utilizar la unidad em para establecer el tamaño del texto. El motivo es que al tratarse de una unidad de medida relativa, se adapta fácilmente sin realizar cambios a cualquier dispositivo de acceso utilizado por los usuarios.

En el siguiente ejemplo se muestran diferentes tamaños de texto establecidos mediante unidades relativas (em, %, px) y absolutas (pt):

Como se explica en el apartado de unidades de medida relativas y absolutas, el tamaño del texto establecido mediante em toma como referencia el tamaño de letra del elemento contenedor. De esta forma, si se modifica el tamaño de letra de la página o de alguno de sus elementos contenedores, el tamaño de letra del texto también se modifica. El mismo comportamiento se produce en el tamaño de texto establecido mediante porcentanjes.

Cuando se establece el tamaño del texto mediante píxel, su tamaño real en pantalla puede ser grande o pequeño en función de la resolución de la pantalla, por lo que también se considera una unidad de medida relativa. Por su parte, el texto cuyo tamaño se establece en puntos (unidad pt) siempre se muestra del mismo tamaño, independientemente de la resolución de la pantalla o del tamaño de letra de otros elementos de la página.