font-size — Frontend Classroom

font-size es la propiedad CSS que determina el tamaño de los caracteres de texto de un elemento. Establece lo que los diseñadores tipográficos llaman el cuerpo de la fuente: la altura de la caja em, el espacio vertical que la tipografía declara como propio. En la práctica, controla qué tan grande o pequeño se ve el texto en pantalla, y es la propiedad de tipografía que más impacto tiene en la legibilidad, la jerarquía visual y la accesibilidad de cualquier interfaz.

font-size hereda por defecto y es la base de dos sistemas de unidades relativas fundamentales en CSS. La unidad em se resuelve como múltiplo del font-size del elemento donde se aplica. La unidad rem (root em) se resuelve como múltiplo del font-size del elemento <html>. Esto significa que cualquier cambio en el font-size del elemento raíz escala automáticamente todos los valores en rem del documento — lo que hace a rem la unidad preferida para tipografía accesible.

El tamaño por defecto del navegador es 16px para el <html>, pero los usuarios pueden modificarlo en las preferencias del sistema o del navegador para mejorar su lectura. Si usás px absolutos para font-size, ignorás esa preferencia. Si usás rem, el texto escala respetando la configuración de accesibilidad del usuario. Esta distinción es uno de los motivos más importantes para preferir rem sobre px en tipografía. El sistema de unidades completo (em, rem, px, %, viewport) se documenta en css/unidades.

Cómo funciona

font-size establece el tamaño del texto del elemento y ese valor se hereda en la cascada. Los elementos hijos pueden sobreescribirlo con su propia declaración o expresarlo en términos relativos al padre usando em.

El valor computado de font-size siempre se resuelve a un valor en px absoluto. Si declarás font-size: 2rem y el <html> tiene 16px, el valor computado es 32px. Eso es lo que el navegador muestra en DevTools y lo que usan los cálculos de layout.

html { font-size: 16px; }  /* base del documento */

body {
  font-size: 1rem;         /* = 16px */
}

h1 { font-size: 2rem;    } /* = 32px */
h2 { font-size: 1.5rem;  } /* = 24px */
h3 { font-size: 1.25rem; } /* = 20px */
p  { font-size: 1rem;    } /* = 16px */

small { font-size: 0.875rem; } /* = 14px */

Título h2 — 2rem

Subtítulo h3 — 1.5rem

Párrafo normal — 1rem

Texto pequeño small — 0.875rem

Sintaxis

selector {
  font-size: <valor>;
}

Donde <valor> puede ser una longitud (con unidad), un porcentaje o una keyword.

Valores

Longitud absoluta — `px`

Especifica el tamaño en píxeles de dispositivo. Es predecible y fácil de razonar, pero ignora la preferencia de tamaño de texto del usuario porque no escala cuando el usuario amplía el tamaño base en su navegador.

p { font-size: 16px; }
h1 { font-size: 32px; }

Cuándo usar px: en CSS que sé que controlo completamente y donde el escalado no importa (decoraciones, elementos de tamaño fijo). Para el texto principal de una interfaz orientada a usuarios, preferí rem.

Longitud relativa al root — `rem`

La opción recomendada para tipografía web. 1rem equivale al font-size del elemento <html> (por defecto 16px en todos los navegadores). Escala automáticamente si el usuario cambia el tamaño base del navegador, lo que respeta configuraciones de accesibilidad.

/* Si html { font-size: 16px } (o sin declaración = 16px por defecto) */
h1   { font-size: 2rem;     } /* 32px */
p    { font-size: 1rem;     } /* 16px */
small{ font-size: 0.875rem; } /* 14px */

La tabla de conversión rem → px asumiendo base 16px:

rem	px
0.75rem	12px
0.875rem	14px
1rem	16px
1.125rem	18px
1.25rem	20px
1.5rem	24px
2rem	32px
3rem	48px

Cuándo usar rem: para el tamaño del texto de toda la interfaz. Es la práctica estándar en proyectos modernos por su accesibilidad.

Longitud relativa al padre — `em`

1em equivale al font-size del elemento padre. Eso lo hace útil para crear componentes que escalan internamente con su propio tamaño de texto, pero también lo vuelve impredecible en estructuras anidadas: si un elemento tiene font-size: 1.2em y su padre también, el tamaño se multiplica en cascada.

.componente { font-size: 1.2em; }
.componente .sub { font-size: 1.2em; } /* 1.2 × 1.2 = 1.44em del ancestro */

Cuándo usar em: en componentes autocontenidos donde querés que los elementos internos escalen proporcionalmente al tamaño del componente, no al root.

Porcentaje — `%`

100% equivale al font-size del padre. Es conceptualmente igual a em pero expresado como porcentaje. 1.5em y 150% son equivalentes para font-size.

p { font-size: 112.5%; } /* = 18px si el padre es 16px */

Cuándo usar %: equivalente a em; preferí em por mayor claridad.

Keywords absolutas

CSS incluye keywords de tamaño absoluto que mapean a valores en px fijos según la escala tipográfica del navegador:

small  { font-size: small;  } /* ≈ 13px */
p      { font-size: medium; } /* ≈ 16px — es el valor inicial */
h2     { font-size: large;  } /* ≈ 18px */
h1     { font-size: x-large;} /* ≈ 24px */

Los valores de la escala: xx-small, x-small, small, medium (initial), large, x-large, xx-large, xxx-large.

Cuándo usar keywords: raramente en producción; su tamaño exacto varía entre navegadores. Útiles para prototipado rápido.

Keywords relativas — `larger` / `smaller`

larger y smaller aumentan o reducen el tamaño relativo al del padre, un paso en la escala tipográfica del navegador.

small { font-size: smaller; }
big   { font-size: larger;  }

Cuándo usar: en componentes donde querés “un poco más grande que el contexto” sin fijar valores. Uso nicho.

Cuándo usar qué

Situación	Unidad recomendada	Por qué
Texto general de la interfaz	`rem`	Respeta preferencias de accesibilidad del usuario
Componente que escala internamente	`em`	Todo el componente crece/encoge junto
Tamaño decorativo fijo (icono, badge)	`px`	No debe escalar con el texto
Prototipado rápido	keywords (`small`, `large`)	Rápido de escribir, sin cálculos

Notas, gotchas e interacción

px en font-size ignora el zoom de texto del usuario. El zoom de página (Ctrl+scroll o ⌘+/-) escala todo incluyendo px. Pero “aumentar tamaño de texto” en las preferencias del navegador solo escala las unidades relativas. Con rem, ambas formas de zoom funcionan; con px, solo el zoom de página.
em anidado se multiplica — fácil de perder el control. Si el padre tiene font-size: 1.2em y el hijo también tiene font-size: 1.2em, el hijo es 1.44× el abuelo. Evitá em para tamaños de texto en estructuras profundamente anidadas; usá rem para mantener el control.
font-size es la base del em en esa misma regla. Cuando escribís font-size: 1.2em y en la misma regla tenés padding: 1em, el padding usa el font-size computado del padre (no el que acabás de declarar). font-size se calcula primero.
No modifiques el font-size del <html> en px para cambiar la escala de rem. Poner html { font-size: 62.5% } (para que 1rem = 10px) rompe la accesibilidad por la misma razón que usar px: si el usuario cambió la base a 20px, el 62.5% lo fuerza de vuelta a 10px. Si querés trabajar con rem = 10px, usalo en los valores (1.6rem en lugar de 16px) pero no rompas la base.
El color del texto se controla con color, no con font-size. Ver css/color.

Vigente / legacy

font-size está vigente desde CSS1. No hay valores legacy. La función clamp() permite definir un rango fluido: font-size: clamp(1rem, 2.5vw, 2rem) — el tamaño escala entre 1rem y 2rem según el viewport. Se documenta en css/unidades.

Aprendelo en el recorrido

Esta propiedad se trabaja en el módulo Tipografía y texto, lección La fuente: family, size, weight, style.