font-size

La propiedad font-size especifica el tamaño, o altura, de la fuente. font-size no sólo afecta a la fuente a la que se aplica, sino que también se utiliza para calcular el valor de las unidades de longitud em, rem y ex.

p { font-size: 20px;}

font-size puede aceptar palabras clave, unidades de longitud o porcentajes como valores. Sin embargo, es importante tener en cuenta que cuando se declara como parte de la propiedad abreviada fontfont-size es un valor obligatorio. Si no se incluye en el shorthand, se ignora toda la línea.

Los valores de longitud (por ejemplo, px, em, rem, ex, etc) que se aplican a font-size no pueden ser negativos.

Palabras clave y valores absolutos

.element { font-size: small;}

Acepta los siguientes valores absolutos de palabras clave:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Estos valores absolutos se asignan a los tamaños de fuente específicos calculados por el navegador. Pero también puede utilizar dos valores de palabras clave que son relativos al tamaño de la fuente del elemento padre.

Otros valores absolutos incluyen mm (milímetros), cm (centímetros), in (pulgadas), pt (puntos) y pc (picas). Un punto equivale a 1/72 de pulgada, mientras que una pica equivale a 12 puntos; estos valores se suelen utilizar para documentos impresos.

Palabras clave relativas

.element { font-size: larger;}

• larger
• smaller

Por ejemplo, si el elemento padre tiene un tamaño de fuente de small, un elemento hijo con un tamaño relativo definido de larger hará que el tamaño de fuente sea igual a medium para el elemento hijo.

Valores porcentuales

.element { font-size: 110%;}

Los valores porcentuales, como establecer un tamaño de fuente del 110%, también son relativos al tamaño de fuente del elemento padre, como se muestra en la demostración siguiente:

Vea el qdbELL de Pen por CSS-Tricks (@css-tricks) en CodePen.

La unidad em

.element { font-size: 2em;}

La unidad em es una unidad relativa basada en el valor calculado del tamaño de la fuente del elemento padre. Esto significa que los elementos hijos siempre dependen de su padre para establecer su tamaño de fuente. Por ejemplo:

<div class="container"> <h2>This is a heading</h2> <p>This is some text.</p></div>

.container { font-size: 16px;}p { font-size: 1em;}h2 { font-size: 2em;}

En el ejemplo anterior, el párrafo tendrá un font-size de 16px porque 1 x 16 = 16px mientras que el encabezado será de 32px porque 2 x 16 = 32px. Hay muchas ventajas de escalar el tipo en función del font-size del elemento padre, es decir, podemos envolver elementos dentro de un contenedor y saber que todos los hijos serán siempre relativos entre sí:

Ver el Pen Figuring out how the em unit works por CSS-Tricks (@css-tricks) en CodePen.

La unidad rem

En el caso de las unidades rem, sin embargo, el tamaño de la fuente depende del valor del elemento raíz (o del elemento html).

html { font-size: 16px;}p { font-size: 1.5rem;}

En el ejemplo anterior, la unidad rem es igual a 16px (porque se hereda del elemento html/raíz) y, por tanto, el tamaño de la fuente para todos los elementos del párrafo se calculará en 24px (1,5 x 16 = 24). A diferencia de las unidades em, el párrafo ignorará el estilo de todos sus padres además de la raíz.

Esta unidad es soportada por los siguientes navegadores:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Trabajos	Trabajos	Trabajos	Trabajos	10+	Trabajos

La unidad ex

.element { font-size: 20ex;}

Para las unidades ex, 1ex sería igual a la altura calculada de la letra x minúscula del elemento raíz. Así que en el ejemplo de abajo el elemento html se establece en 20px y todos los demás tamaños de letra están determinados por la altura x de esa letra en particular.

Vea la pluma Averiguar cómo funciona la unidad ex por CSS-Tricks (@css-tricks) en CodePen.

Experimenta con la demo de arriba mi sustituyendo el font-family en el elemento html para ver cómo cambian los otros tamaños de fuente.

Unidades de ventana gráfica

.element-one { font-size: 100vh;}.element-two { font-size: 100vw;}

Las unidades de ventana gráfica, como vw y vh, establecen el tamaño de la fuente de un elemento en relación con las dimensiones de la ventana gráfica:

• 1vw = 1% de la anchura de la ventana gráfica
• 1vh = 1% de la altura de la ventana gráfica

Así que si tomamos el siguiente ejemplo:

.element { font-size: 100vh;}

Entonces esto indicará que el font-size del elemento debe ser siempre el 100% de la altura del viewport en todo momento (50vh sería el 50%, 15vh sería el 15% y así sucesivamente). En la demostración de abajo prueba a redimensionar la altura del ejemplo para ver cómo se estira el tipo:

Ver el tipo Pen Sizing with vh units by CSS-Tricks (@css-tricks) on CodePen.

vwLas unidades son diferentes en el sentido de que establece la altura de las formas de las letras por el ancho de la ventana gráfica, por lo que en la demostración de abajo tendrá que cambiar el tamaño de la ventana del navegador horizontalmente para ver estos cambios:

Ver el tipo de tamaño Pen con unidades vw por CSS-Tricks (@css-tricks) en CodePen.

Estas unidades son soportadas por los siguientes navegadores:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31+	7+	31+	27+	9+	4.4+	7,1+

Es importante tener en cuenta que hay otras dos unidades de viewport: vmin y vmax. El primero encontrará los valores de vh y vw y establecerá el font-size como el menor de los dos mientras que vmax establece el font-size al mayor de estos dos valores.

La unidad ch

.element { font-size: 24ch;}

La unidad ch es similar a la unidad ex en el sentido de que establecerá el font-size de un elemento en relación con el ancho del glifo 0 (cero) de la fuente:

Vea el tipo de tamaño de pluma con unidades ch por CSS-Tricks (@css-tricks) en CodePen.

Esta unidad es soportada por:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
27+	Trabajos	10+	Trabajos	9+	Trabajos

Propiedades relacionadas

• font
• font-family
• font-stretch
• font-style
• font-variant
• font-weight

.