Docs ejecutables de CSS: Tamaño de letra

Q: ¿Cómo cambio el tamaño de letra en CSS?

Define la propiedad font-size en el elemento: p { font-size: 18px; }. Acepta longitudes (px, rem, em), porcentajes y palabras clave como large.

Q: ¿Cómo cambio el tamaño de letra en HTML?

Con CSS, en una hoja de estilo o en un atributo style: . La vieja etiqueta está obsoleta en HTML5 y no se debe usar.

Q: ¿Uso px, em o rem para el tamaño de letra?

Usa rem para la mayoría del texto: escala con la configuración de fuente del navegador del usuario y no se acumula. Usa em cuando un tamaño deba seguir a su padre, como un ícono dentro de un botón. px no sigue el tamaño de letra por defecto que el lector elige en el navegador, así que evítalo para el texto del cuerpo.

Q: ¿Por qué mi tamaño de letra en em sigue creciendo?

Porque em es relativo al tamaño de letra del padre, así que los elementos anidados se multiplican: 1.2em dentro de 1.2em es 1.44 veces la base. Cambia a rem, que siempre es relativo al elemento raíz.

Cómo definir el tamaño de letra en CSS

La propiedad font-size define el tamaño del texto. Ponla en cualquier elemento y todo el texto que contiene hereda ese tamaño, salvo que un hijo defina el suyo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

Para cambiar el tamaño de letra en HTML también se usa CSS. Agrega un atributo style () o una regla en una hoja de estilo. La etiqueta  de los años 90 está obsoleta y no tiene lugar en una página moderna.

Las unidades que acepta font-size

Valor	Ejemplo	Respecto a qué es relativo
`px`	`16px`	A nada: un tamaño fijo
`rem`	`1.25rem`	Al tamaño de letra del elemento raíz `<html>` (16px por defecto)
`em`	`1.2em`	Al tamaño de letra del elemento padre
`%`	`120%`	Al tamaño de letra del padre, como `em` (`120%` es `1.2em`)
Palabra clave	`large`	Una escala predefinida alrededor del valor por defecto `medium`
Palabra clave relativa	`smaller`, `larger`	Un paso desde el tamaño del padre
Viewport	`4vw`	Al ancho del viewport (el 4% de él)
Función	`clamp(1rem, 4vw, 2rem)`	Fluido entre un mínimo y un máximo

Escribe un valor y mira el tamaño que calcula el navegador:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Prueba 20px, 2em, 150%, x-large, smaller y 5vw. Un valor inválido, como big, se ignora y el texto conserva su último tamaño válido.

rem vs em: la diferencia que sorprende

rem siempre mira al elemento raíz, así que 1.2rem tiene el mismo tamaño dondequiera que aparezca. em mira al padre, así que los tamaños se multiplican cuando los elementos están anidados:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

La caja em más interna mide 16 × 1.2 × 1.2 × 1.2 = 27.648px. La caja rem más interna sigue midiendo 19.2px. Esa acumulación es útil en un componente cuyas partes deben escalar juntas, y una sorpresa en todos los demás casos. La página de unidades compara todas las unidades de longitud.

Palabras clave: de xx-small a xx-large

Las palabras clave absolutas corresponden a una escala fija alrededor de medium, que equivale al tamaño por defecto del usuario (16px salvo que lo haya cambiado):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

Con los 16px por defecto, small es 13px, large es 18px, x-large es 24px y xx-large es 32px. Las palabras clave sirven para trabajo rápido, pero un sistema de diseño suele querer su propia escala en rem.

Tamaño de letra fluido con clamp()

Un título que debe crecer con la pantalla pero nunca quedar demasiado pequeño ni demasiado grande es una sola llamada a clamp(): el mínimo, un tamaño preferido que escala y el máximo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

En una vista previa de 800px de ancho, 5vw son 40px, que queda entre 24px y 48px, así que gana. La página de clamp explica la tipografía fluida en detalle.

Definir un tamaño base para toda la página

Define el tamaño una vez en body (o en html) y todo lo demás de forma relativa a él:

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

Evita trucos como html { font-size: 62.5%; } salvo que después todos los tamaños de la página estén en rem, y nunca pongas un tamaño fijo en px en html: sobrescribe el tamaño de letra que el lector eligió en su navegador, y algunas personas dependen de él para poder leer.

Notas de accesibilidad

Un texto del cuerpo de 16px o más es un buen mínimo para leer en pantalla.
Los tamaños en rem y em siguen la configuración de fuente por defecto del usuario. Los tamaños en px siguen el zoom de la página, pero no esa configuración.
En iPhone, Safari hace zoom en la página cuando enfocas un input con un tamaño de letra menor de 16px. Dale a los campos de formulario font-size: 1rem o más para evitarlo.

Errores comunes

Usar la etiqueta . Está obsoleta. Usa la propiedad font-size.
Tamaños em anidados que crecen o se encogen sin control. Usa rem salvo que quieras la acumulación.
Un tamaño fijo en px en html. Sobrescribe la configuración de fuente del propio lector.
Olvidar que los títulos ya tienen un tamaño. <h1> es 2em por defecto, así que necesitas h1 { font-size: 1em; } si lo quieres del tamaño del texto del cuerpo.
Unidades de viewport solas. font-size: 3vw se vuelve ilegible en un teléfono y enorme en un monitor ancho. Envuélvelo en clamp().

Preguntas frecuentes

¿Cómo cambio el tamaño de letra en CSS?

Define la propiedad font-size en el elemento: p { font-size: 18px; }. Acepta longitudes (px, rem, em), porcentajes y palabras clave como large.

¿Cómo cambio el tamaño de letra en HTML?

Con CSS, en una hoja de estilo o en un atributo style: . La vieja etiqueta  está obsoleta en HTML5 y no se debe usar.

¿Cuál es el tamaño de letra por defecto en los navegadores?

16px para el texto del cuerpo, salvo que el usuario lo haya cambiado en la configuración del navegador. Ese valor es el que equivalen por defecto 1rem y la palabra clave medium.

¿Uso px, em o rem para el tamaño de letra?

Usa rem para la mayoría del texto: escala con la configuración de fuente del navegador del usuario y no se acumula. Usa em cuando un tamaño deba seguir a su padre, como un ícono dentro de un botón. px no sigue el tamaño de letra por defecto que el lector elige en el navegador, así que evítalo para el texto del cuerpo.

¿Por qué mi tamaño de letra en em sigue creciendo?

Porque em es relativo al tamaño de letra del padre, así que los elementos anidados se multiplican: 1.2em dentro de 1.2em es 1.44 veces la base. Cambia a rem, que siempre es relativo al elemento raíz.

Conceptos relacionados