Propiedad CSS font-size

La propiedad CSS font-size define el tamaño del texto. Es una de las propiedades tipográficas más utilizadas y, dado que unidades como em, ex y % se calculan en relación a ella, el valor que elijas también afecta al tamaño de otros elementos que dependen de ella.

Esta página cubre todas las formas de especificar un tamaño de fuente — palabras clave, longitudes y porcentajes —, explica cómo se calculan las unidades relativas (em, rem, ex, vw/vh) y muestra qué enfoque usar en cada situación.

Formas de establecer el tamaño de fuente

Puedes establecer font-size de cuatro maneras principales:

absolute-size — una palabra clave fija de una escala integrada.
relative-size — una palabra clave que ajusta el tamaño heredado hacia arriba o hacia abajo.
length — un número explícito junto con una unidad.
percentage — un valor relativo al tamaño de fuente del elemento padre.

Las palabras clave absolute-size corresponden a una escala fija definida por el navegador:

xx-small
x-small
small
medium (valor inicial)
large
x-large
xx-large

Las palabras clave relative-size ajustan el tamaño hacia arriba o hacia abajo respecto al valor heredado:

smaller
larger

Las lengths pueden ser relativas (em, ex, rem, ch, vw, vh, px) o absolutas (in, cm, mm, pt, pc). Un percentage establece el tamaño de fuente en relación al tamaño de fuente del elemento padre — 150% equivale a una vez y media el tamaño del padre.

¿Cuál debo usar?

Usa rem para la mayoría del texto. Se adapta a la configuración de tamaño de fuente del navegador del usuario (bueno para la accesibilidad) y es predecible, ya que siempre es relativo al elemento raíz en lugar del padre.
Usa em cuando quieras que el espaciado de un componente o el texto hijo escale junto con el tamaño de fuente propio del componente.
Evita los valores en píxeles (px) para el texto del cuerpo si la accesibilidad importa: los píxeles fijos ignoran el tamaño predeterminado preferido por el lector.

Valor inicial	medium
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredada	Sí.
Animable	Sí.
Versión	CSS1
Sintaxis DOM	object.style.fontSize = "15px";

Sintaxis

Sintaxis de la propiedad CSS font-size

font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit;

Ejemplo de la propiedad font-size:

Ejemplo de la propiedad CSS font-size con valores px, em, pt, x-small y % (porcentaje)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-size: 24pt;
      }
      h3 {
        font-size: 26px;
      }
      p {
        font-size: 1em;
      }
      a {
        font-size: 100%;
      }
      span {
        font-size: x-small;
      }
    </style>
  </head>
  <body>
    <span>This span is written with x-small value.</span>
    <p>This paragraph is written with 1em font-size.</p>
    <a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
    <h3>We used x-small font size for this heading.</h3>
    <h1>We set the font size 24pt  for this heading.</h1>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Uso de valores porcentuales

Los valores porcentuales son relativos al tamaño de fuente del elemento padre. En el ejemplo siguiente el encabezado es 125%, por lo que se renderiza a un cuarto y cuarto del tamaño de fuente heredado del cuerpo:

Ejemplo de la propiedad font-size especificada en porcentaje:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3 {
        font-size: 125%;
      }
    </style>
  </head>
  <body>
    <h3>This heading is 125% of the body font size.</h3>
    <span>This span uses the default (inherited) size.</span>
    <p>This paragraph uses the default (inherited) size.</p>
  </body>
</html>

Uso de la unidad em

La unidad em se considera una unidad relativa. Se basa en el valor calculado del tamaño de fuente del elemento padre. En el código siguiente, el párrafo tendrá 32px, porque 2×16=32, y el encabezado tendrá un tamaño de fuente de 48px porque 3×16=48px. Este método es muy útil porque podemos garantizar que todos los elementos hijos siempre serán relativos entre sí.

Ejemplo de la propiedad font-size con el valor "em":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        font-size: 16px;
      }
      p {
        font-size: 2em;
      }
      h2 {
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Uso de la unidad rem

Con la unidad rem, el tamaño de fuente siempre es relativo al elemento raíz <html>, sin importar cuán profundamente anidado esté el elemento. En el ejemplo siguiente la raíz es 16px, por lo que el encabezado es 1.5rem = 1.5 × 16 = 24px. Como cada rem apunta al mismo valor raíz, se evita el problema de acumulación que pueden causar las unidades em dentro de elementos anidados.

Ejemplo de la propiedad font-size con el valor "rem":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        font-size: 16px;
      }
      h2 {
        font-size: 1.5rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Uso de la unidad ex

Con la unidad ex, 1ex equivale a la altura de la x — la altura de la letra minúscula "x" — de la fuente actual del elemento. Dado que la altura de la x varía de una fuente a otra, un tamaño basado en ex depende de la fuente que se esté usando, lo que lo hace menos predecible que em o rem. En el ejemplo siguiente el texto tiene un tamaño de 15 veces la altura de la x.

Propiedad CSS font-size

.exunit {
  font-size: 15ex;
}

Uso de unidades de viewport

Las unidades de viewport (vw y vh) se usan para establecer el tamaño de fuente de un elemento, que es relativo al tamaño del viewport.

1vw = 1% del ancho del viewport
1vh = 1% del alto del viewport

Propiedad CSS font-size

.viewport {
  font-size: 120vh;
}

Ejemplo de la propiedad font-size con el valor "length":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        color: green;
        font-size: 2vh;
      }
      p {
        color: red;
        font-size: 1em;
      }
      .length {
        color: orange;
        font-size: 30px;
      }
      h3 {
        color: lightblue;
        font-size: 3ex;
      }
      h1 {
        color: purple;
        font-size: 24pt;
      }
      a {
        color: blue;
        font-size: 120%;
      }
    </style>
  </head>
  <body>
    <h2>Font-size property</h2>
    <span>This text is written with 2vh font-size.</span>
    <p>This paragraph is written with 1em font-size.</p>
    <div class="length">Example with 30px font-size length </div>
    <h3>Example with 3ex font-size length.</h3>
    <h1>We set the font size 24pt  for this heading.</h1>
    <a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad font-size con valores absolute-size:

Ejemplo de la propiedad font-size (absolute-size):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .font-xxsmall {
        color: grey;
        font-size: xx-small;
      }
      .font-xsmall {
        color: grey;
        font-size: x-small;
      }
      .font-small {
        color: grey;
        font-size: small;
      }
      .font-medium {
        color: grey;
        font-size: medium;
      }
      .font-large {
        color: grey;
        font-size: large;
      }
      .font-xlarge {
        color: grey;
        font-size: x-large;
      }
      .font-xxlarge {
        color: grey;
        font-size: xx-large;
      }
    </style>
  </head>
  <body>
    <h1>Font-size property</h1>
    <div class="font-xxsmall">Example with font-size xx-small property</div>
    <div class="font-xsmall">Example with font-size x-small property</div>
    <div class="font-small">Example with font-size small property</div>
    <div class="font-medium">Example with font-size medium property</div>
    <div class="font-large">Example with font-size large property</div>
    <div class="font-xlarge">Example with font-size x-large property</div>
    <div class="font-xxlarge">Example with font-size xx-large property</div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad font-size con los valores "smaller" y "larger":

Ejemplo de la propiedad font-size con los valores "smaller" y "larger":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .smaller {
        color: red;
        font-size: smaller;
      }
      .larger {
        color: red;
        font-size: larger;
      }
    </style>
  </head>
  <body>
    <h1>font-size property</h1>
    <div class="smaller">Example with font-size smaller property</div>
    <div class="larger">Example with font-size larger property</div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
medium	Establece el font-size en medium. Este es el valor predeterminado de esta propiedad.	Pruébalo »
xx-small	Establece el font-size en xx-small.	Pruébalo »
x-small	Establece el font-size en x-small.	Pruébalo »
small	Establece el font-size en small.	Pruébalo »
large	Establece el font-size en large.	Pruébalo »
x-large	Establece el font-size en x-large.	Pruébalo »
xx-large	Establece el font-size en xx-large.	Pruébalo »
smaller	Hace el font-size más pequeño.	Pruébalo »
larger	Hace el font-size más grande.	Pruébalo »
length	Especifica el font-size en px, em, etc.	Pruébalo »
%	Establece el font-size como porcentaje del tamaño de fuente del elemento padre.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

Para controlar el resto de la tipografía de un elemento, combina font-size con estas propiedades:

font-family — elige el tipo de letra.
font-weight — establece el grosor del texto.
font-style — aplica estilo cursiva u oblicuo.
line-height — controla el espaciado vertical entre líneas.
font — la propiedad abreviada que establece varias de estas a la vez.

Práctica

¿Qué unidades se pueden usar para establecer la propiedad 'font-size' en CSS?