Tipografía fluida con clamp() — Frontend Classroom

El problema con `font-size` fijo

font-size: 2rem se ve bien en un escritorio de 1440px pero puede ser demasiado grande para una pantalla de 375px, y demasiado pequeño para un monitor ultra-ancho.

La solución tradicional son breakpoints:

h1 { font-size: 1.5rem; }             /* móvil */

@media (min-width: 768px) {
  h1 { font-size: 2rem; }             /* tablet */
}

@media (min-width: 1200px) {
  h1 { font-size: 2.5rem; }           /* desktop */
}

Funciona, pero el tamaño salta de forma abrupta en cada breakpoint. No escala suave entre pantallas.

`clamp()`: tipografía que escala fluidamente

h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  /*         mínimo  preferido  máximo  */
}

Cómo leerlo: “la fuente escala con el ancho del viewport, pero nunca sale del rango [1.5rem, 2.5rem]”.

Los tres valores:

Mínimo (1.5rem): en pantallas muy angostas, la fuente nunca baja de 1.5rem. El texto siempre es legible.
Preferido (4vw): 4% del ancho del viewport. En una pantalla de 1000px → 40px. En 375px → 15px. Escala suave con el ancho.
Máximo (2.5rem): en pantallas muy anchas, la fuente nunca supera 2.5rem. El texto no se vuelve absurdamente grande.

Resultado: la fuente crece y decrece con el ancho del viewport de forma fluida, sin saltos bruscos en breakpoints.

Por qué mínimo y máximo van en `rem`

El rem es relativo a la fuente base del documento — que el usuario puede configurar en su navegador. Si alguien configuró 20px como fuente base (por accesibilidad o preferencia), 1.5rem ya son 30px.

Si usás px en el mínimo y máximo, ignorás esa preferencia del usuario. Con rem, clamp() respeta la configuración de accesibilidad del usuario.

/* Recomendado: respeta la fuente base del usuario */
font-size: clamp(1rem, 2.5vw, 2rem);

/* Desaconsejado: ignora la preferencia del usuario */
font-size: clamp(16px, 2.5vw, 32px);

Anatomía del “preferido”

El valor preferido necesita usar una unidad que escale con el viewport — de ahí el vw. Para una transición más suave podés combinar rem y vw con calc():

/* Más preciso: escala desde una base rem más una fracción del viewport */
font-size: clamp(1rem, calc(0.5rem + 2vw), 2rem);

Esto hace que la escala comience desde 0.5rem y crezca 2vw por cada 100px de ancho. El resultado es una curva de escalado más controlada.

Probalo en el sandbox

Pegá esto en el sandbox y arrastrá el borde del preview:

<article class="nota">
  <h1>Diseño responsive</h1>
  <p>Este texto mantiene sus proporciones en cualquier pantalla. El título crece y decrece fluidamente con el ancho disponible.</p>
</article>

body { margin: 0; font-family: system-ui, sans-serif; padding: 2rem; }

.nota h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 0.5rem;
  color: #1e3a5f;
}

.nota p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: #334155;
  max-width: 65ch;
}

Al arrastrar el borde notarás que el texto escala suavemente entre los límites — sin saltos. En pantallas muy angostas se detiene en el mínimo; en pantallas muy anchas, en el máximo.

Sobre el motor de checks: clamp(1.5rem, 4vw, 3rem) computa a un valor en px que cambia con el ancho del iframe en el momento del check. No hay forma de fijar un equals estable. Por eso esta lección es de observación: el aprendizaje es ver la escala fluida, no confirmar un píxel exacto.

Resumen

Técnica	Cuándo usarla
`font-size` fijo en `rem`	Cuando el tamaño debe ser constante en cualquier pantalla
`font-size` con `@media`	Cuando el tamaño salta en breakpoints definidos
`font-size: clamp(min, pref, max)`	Cuando querés escala fluida entre un mínimo y un máximo

clamp() no es solo para font-size — también funciona para padding, gap, width, y otras propiedades donde un valor fluido entre límites tiene sentido.

Hacia CAT-28: un sitio real tiene decenas de reglas CSS con font-size: clamp(1rem, 2.5vw, 2rem) repetido en varios lugares. Si querés cambiar el tamaño base, tenés que buscarlo en todas partes. La siguiente lección (Custom properties) te da la herramienta para declarar ese valor una sola vez en :root y reutilizarlo en todo el CSS: --fs-heading: clamp(1.5rem, 4vw, 3rem).

El problema con font-size fijo

clamp(): tipografía que escala fluidamente