Tamaño de fuente - Trucos CSS

La font-sizepropiedad especifica el tamaño o la altura de la fuente. font-sizeafecta no solo 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-sizepuede 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 fontpropiedad abreviada, font-sizees un valor obligatorio. Si no se incluye en la taquigrafía, se ignora toda la línea.

Los valores de longitud (por ejemplo, px, em, rem, ex, etc.) que se aplican a font-sizeno 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 tamaños de fuente específicos según los calcula el navegador. Pero también puede usar dos valores de palabras clave que son relativos al tamaño de fuente del elemento principal.

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

Palabras clave relativas

.element ( font-size: larger; )

• larger
• smaller

Por ejemplo, si el elemento principal tiene un tamaño de fuente de small, un elemento secundario con un tamaño relativo definido de largerhará que el tamaño de fuente sea igual al mediumdel elemento secundario.

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 principal, como se muestra en la siguiente demostración:

Vea Pen qdbELL de 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 fuente del elemento principal. Esto significa que los elementos secundarios siempre dependen de su padre para establecer su tamaño de fuente. Por ejemplo:

 
This is a heading
This is some text.

.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )

En el ejemplo anterior, el párrafo tendrá un tamaño de fuente 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 según el tamaño de fuente del elemento principal, es decir, podemos envolver elementos dentro de un contenedor y saber que todos los elementos secundarios siempre serán relativos entre sí:

Vea el lápiz Descubriendo cómo funciona la unidad em mediante CSS-Tricks (@ css-tricks) en CodePen.

La unidad remota

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

html ( font-size: 16px; ) p ( font-size: 1.5rem; )

En el ejemplo anterior, la unidad rem es igual a 16px (porque se hereda del htmlelemento / root) y, por lo tanto, el tamaño de fuente para todos los elementos de 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 compatible con los siguientes navegadores:

Cromo	Safari	Firefox	Ópera	ES DECIR	Androide	iOS
Trabajos	Trabajos	Trabajos	Trabajos	10+	Trabajos	Trabajos

La ex unidad

.element ( font-size: 20ex; )

Para unidades ex, 1ex sería igual a la altura calculada de la letra minúscula x del elemento raíz. Entonces, en el siguiente ejemplo, el htmlelemento está configurado en 20pxy todos los demás tamaños de fuente están determinados por la altura x de esa fuente en particular.

Vea el lápiz Averigüe cómo funciona la unidad ex mediante CSS-Tricks (@ css-tricks) en CodePen.

Experimentar con la demo por encima de mi sustitución de la font-familydel htmlelemento para ver cómo la otra tamaños de fuente del cambio.

Unidades de ventana gráfica

.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )

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

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

Entonces, si tomamos el siguiente ejemplo:

.element ( font-size: 100vh; )

Luego, esto indicará que el tamaño de fuente del elemento siempre debe ser el 100% de la altura de la ventana gráfica en todo momento (50vh sería 50%, 15vh sería 15% y así sucesivamente). En la siguiente demostración, intente cambiar el tamaño de la altura del ejemplo para ver cómo se extiende el tipo:

Vea el tipo de tamaño de lápiz con unidades vh por CSS-Tricks (@ css-tricks) en CodePen.

vw Las 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 siguiente demostración, deberá cambiar el tamaño de la ventana del navegador horizontalmente para ver estos cambios:

Vea el tipo de tamaño de lápiz con unidades vw de CSS-Tricks (@ css-tricks) en CodePen.

Estas unidades son compatibles con los siguientes navegadores:

Cromo	Safari	Firefox	Ópera	ES DECIR	Androide	iOS
31+	7+	31+	27+	9+	4.4+	7.1+

Es importante tener en cuenta que hay otras dos unidades de ventana gráfica: vminy vmax. El primero encontrará los valores de vhy vwy establecerá el tamaño de fuente como el más pequeño de los dos, mientras que vmaxestablece el tamaño de fuente en el mayor de estos dos valores.

La unidad ch

.element ( font-size: 24ch; )

La chunidad es similar a la exunidad en que establecerá el tamaño de fuente de un elemento en relación con el ancho del glifo 0 (cero) de la fuente:

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

Esta unidad es compatible con:

Cromo	Safari	Firefox	Ópera	ES DECIR	Androide	iOS
27+	Trabajos	10+	Trabajos	9+	Trabajos	Trabajos