Propiedad CSS font-size
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
* Some parts of this feature may have varying levels of support.
La propiedad CSS font-size establece el tamaño de la fuente. Cambiar el tamaño de la fuente también actualiza el tamaño de las unidades <length> relativas a él, como em, ex, etc.
Pruébalo
font-size: 1.2rem;
font-size: x-small;
font-size: smaller;
font-size: 12px;
font-size: 80%;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
Sintaxis
/* Valores <absolute-size> */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;
/* Valores <relative-size> */
font-size: smaller;
font-size: larger;
/* Valores <length> */
font-size: 12px;
font-size: 0.8em;
/* Valores <percentage> */
font-size: 80%;
/* Valor math */
font-size: math;
/* Valores globales */
font-size: inherit;
font-size: initial;
font-size: revert;
font-size: revert-layer;
font-size: unset;
Valores
Esta propiedad se especifica con un único valor de la lista siguiente:
xx-small,x-small,small,medium,large,x-large,xx-large,xxx-large-
Palabras clave de tamaño absoluto, basadas en el tamaño de fuente predeterminado de quien usa el navegador (que es
medium). larger,smaller-
Palabras clave de tamaño relativo. La fuente será mayor o menor con respecto al tamaño de fuente del elemento padre, aproximadamente en la misma proporción que separa las palabras clave de tamaño absoluto anteriores.
<length>-
Un valor
<length>positivo. Para la mayoría de las unidades relativas a la fuente (comoemyex), el tamaño de fuente es relativo al del elemento padre.Para las unidades relativas a la fuente que se basan en la raíz (como
rem), el tamaño de fuente es relativo al de la fuente que usa el elemento<html>(el elemento raíz). <percentage>-
Un valor
<percentage>positivo, relativo al tamaño de fuente del elemento padre.Nota: Para maximizar la accesibilidad, por lo general es mejor usar valores relativos al tamaño de fuente predeterminado de quien usa el navegador.
math-
Se aplican reglas de escalado al determinar el valor calculado de la propiedad
font-sizeen los elementos matemáticos, con respecto alfont-sizedel padre que los contiene. Consulta la propiedad math-depth para más información.
Descripción
Hay varias formas de especificar el tamaño de la fuente, con palabras clave o con valores numéricos en píxeles o en ems. Elige el método adecuado según las necesidades de cada página web.
Palabras clave
Las palabras clave son una buena manera de fijar el tamaño de las fuentes en la web. Al establecer un tamaño de fuente con palabra clave en el elemento <body>, puedes fijar tamaños relativos en el resto de la página, lo que te permite escalar con facilidad la fuente hacia arriba o hacia abajo en toda ella.
Píxeles
Fijar el tamaño de fuente en píxeles (px) es una buena opción cuando necesitas precisión exacta. Un valor en px es estático. Es una forma independiente del sistema operativo y del navegador de indicarle literalmente al navegador que dibuje las letras con exactamente la altura en píxeles que has especificado. Los resultados pueden variar ligeramente entre navegadores, porque pueden usar algoritmos distintos para lograr un efecto similar.
Los ajustes de tamaño de fuente también se pueden combinar. Por ejemplo, si un elemento padre está fijado en 16px y su elemento hijo en larger, el hijo se muestra más grande que el padre en la página.
Nota:
Definir los tamaños de fuente en px no es accesible, porque en algunos navegadores no se puede cambiar el tamaño de la fuente. Por ejemplo, quien tenga visión reducida puede querer un tamaño de fuente mucho mayor que el elegido por quien diseñó la web. Evita usarlos para los tamaños de fuente si quieres crear un diseño inclusivo.
Ems
Usar un valor em crea un tamaño de fuente dinámico o calculado (históricamente la unidad em derivaba del ancho de una «M» mayúscula en una tipografía dada). El valor numérico actúa como multiplicador de la propiedad font-size del elemento sobre el que se usa. Fíjate en este ejemplo:
p {
font-size: 2em;
}
En este caso, el tamaño de fuente de los elementos <p> será el doble del font-size calculado que heredan. Por extensión, un font-size de 1em equivale al font-size calculado del elemento sobre el que se usa.
Si no se ha fijado ningún font-size en los ancestros del <p>, entonces 1em equivaldrá al font-size predeterminado del navegador, que suele ser 16px. Así que, por defecto, 1em equivale a 16px y 2em a 32px. Si fijaras un font-size de 20px en el elemento <body>, entonces 1em en los elementos <p> equivaldría a 20px, y 2em a 40px.
Para calcular el equivalente en em de cualquier valor en píxeles, puedes usar esta fórmula:
em = valor en píxeles deseado para el elemento / tamaño de fuente del padre en píxeles
Por ejemplo, supongamos que el font-size del <body> de la página está fijado en 16px. Si el tamaño de fuente que quieres es 12px, debes especificar 0.75em (porque 12/16 = 0,75). De igual modo, si quieres un tamaño de fuente de 10px, especifica 0.625em (10/16 = 0,625); para 22px, especifica 1.375em (22/16).
El em es una unidad muy útil en CSS, ya que adapta automáticamente su longitud a la fuente que elija usar quien lee.
Un dato importante que conviene recordar: los valores en em se componen. Fíjate en el HTML y el CSS siguientes:
html {
font-size: 100%;
}
span {
font-size: 1.6em;
}
<div>
<span>Exterior <span>interior</span> exterior</span>
</div>
El resultado es:
Suponiendo que el font-size predeterminado del navegador sea 16px, las palabras «exterior» se dibujarían a 25,6px, pero la palabra «interior» se dibujaría a 40,96px. Esto se debe a que el font-size del <span> interior es de 1.6em, relativo al font-size de su padre, que a su vez es relativo al font-size del suyo. Esto es lo que se suele llamar composición.
Rems
Los valores rem se inventaron para sortear el problema de la composición. Los valores rem son relativos al elemento raíz html, no al elemento padre. Dicho de otro modo, te permiten especificar un tamaño de fuente de forma relativa sin verte afectado por el tamaño del padre, lo que elimina la composición.
El CSS siguiente es casi idéntico al del ejemplo anterior. La única diferencia es que la unidad ha cambiado a rem.
html {
font-size: 100%;
}
span {
font-size: 1.6rem;
}
Y aplicamos este CSS al mismo HTML, que queda así:
<span>Exterior <span>interior</span> exterior</span>
En este ejemplo, las palabras «exterior interior exterior» se muestran todas a 25,6px (suponiendo que el font-size del navegador se haya dejado en su valor predeterminado de 16px).
Ex
Igual que con la unidad em, el font-size de un elemento fijado con la unidad ex es calculado o dinámico. Se comporta exactamente igual, salvo que al fijar la propiedad font-size con unidades ex, el font-size equivale a la altura de la x de la primera fuente disponible que se use en la página. El valor numérico multiplica el font-size heredado por el elemento, y el font-size se compone de forma relativa.
Consulta el borrador editorial del W3C para una descripción más detallada de las unidades de longitud relativas a la fuente como ex.
Definición formal
| Valor inicial | medium |
|---|---|
| Applies to | all elements and text. It also applies to ::first-letter and ::first-line. |
| Heredable | yes |
| Percentages | refer to the parent element's font size |
| Valor calculado | absolute <length> |
| Animation type | by computed value type |
Sintaxis formal
font-size =
<absolute-size> |
<relative-size> |
<length-percentage [0,∞]> |
math
<absolute-size> =
xx-small |
x-small |
small |
medium |
large |
x-large |
xx-large |
xxx-large
<relative-size> =
larger |
smaller
<length-percentage> =
<length> |
<percentage>
Ejemplos
Establecer tamaños de fuente
CSS
.small {
font-size: xx-small;
}
.larger {
font-size: larger;
}
.point {
font-size: 24pt;
}
.percent {
font-size: 200%;
}
HTML
<h1 class="small">H1 pequeño</h1>
<h1 class="larger">H1 más grande</h1>
<h1 class="point">H1 de 24 puntos</h1>
<h1 class="percent">H1 al 200%</h1>
Resultado
Especificaciones
| Specification |
|---|
| CSS Fonts Module Level 4 # font-size-prop |