Propiedad font-size

DefiniciónEstablece el tamaño de letra
Valores
permitidos
Uno y sólo uno de los siguientes valores:
Si se utilizan porcentajes, hace referencia al tamaño de letra del elemento contenedor
Valor inicialmedium
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredasi
Definición en
el estándar
w3.org/TR/CSS21/fonts.html#propdef-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>:

font-size: xx-large

Lorem ipsum dolor sit amet

font-size: x-large

Lorem ipsum dolor sit amet

font-size: large

Lorem ipsum dolor sit amet

font-size: medium

Lorem ipsum dolor sit amet

font-size: small

Lorem ipsum dolor sit amet

font-size: x-small

Lorem ipsum dolor sit amet

font-size: xx-small

Lorem ipsum dolor sit amet

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):

.5em .7em .9em 1em 1.5em 2em 3em 3.5em
50% 70% 90% 100% 150% 200% 300% 350%
9px 12px 14px 18px 24px 36px 48px
9pt 12pt 14pt 18pt 24pt 36pt 48pt

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.