Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

font-size

Resumen

La propiedad font-size especifica la dimensión de la letra. Este tamaño puede, a su vez, alterar el aspecto de alguna otra cosa, ya que se usa para calcular la longitud de las unidades em y ex.

Valor inicialmedium
Applies toall elements. It also applies to ::first-letter and ::first-line.
Heredableyes
Percentagesrefer to the parent element's font size
Mediavisual
Valor calculadoas specified, but with relative lengths converted into absolute lengths
Animatableyes, as a length
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

font-size: xx-small | x-small | small | medium | large | x-large | xx-large

font-size: smaller | larger

font-size: <longitud> | <porcentaje> | inherit

Valores

xx-small, x-small, small, medium, large, x-large, xx-large 
un grupo de palabras clave de dimensión absoluta en relación al que determina el usuario como tamaño por defecto (que es medium). De forma parecida a las sentencias HTML <font size="1"> hasta <font size="7"> donde el tamaño por defecto es <font size="3">.
larger, smaller 
más grande o más pequeño que el tamaño de letra del elemento padre, con aproximadamente el mismo ratio que el mencionado anteriormente.
<longitud> 
una unidad positiva de longitud.
<Porcentaje> 
un porcentaje positivo del cuerpo de letra del elemento padre.

Es aconsejable evitar el uso de valores que no sean relativos al tamaño por defecto definido por el usuario, tales como longitud absoluta en unidades distintas a em o ex. Sin embargo, si hay que usar ese tipo de valores, es preferible utilizar unidades px (píxel), ya que su significado no varía en función de las características del sistema operativo (casi siempre erróneas) como la resolución del monitor.

Ejemplos

Ver El Ejemplo Vivo

/* Ajusta el texto del párrafo a un cuerpo de letra muy grande. */
p { font-size: xx-large }

/* Ajusta la cabecera de nivel 1 (h1) a 2,5 veces del tamaño
 * del texto. */
h1 { font-size: 250% }

/* Ajusta el texto incluido en span a 16px */
span { font-size: 16px; }

Notas

Las unidades em y ex en la propiedad font-size son relativas al tamaño de letra del elemento padre (al contrario que todas las demás propiedades, en las que estas unidades son relativas al tamaño de letra del elemento). Esto quiere decir que las unidades em y los porcentajes se comportan de igual forma cuando hablamos de font-size.

Especificaciones

Etiquetas y colaboradores del documento

 Colaboradores en esta página: fscholz, teoli, Nathymig, RickieesES, HenryGR, Mgjbot
 Última actualización por: fscholz,