Tipografía fluida con clamp - Sin media queries#

Si buscás que tus títulos escalen sin escribir media queries para cada breakpoint, clamp es la solución definitiva. Esta función CSS permite definir escalas tipográficas que se adaptan al viewport de forma fluida y sin saltos .

El Snippet#

:root {
  /* Escala fluida: mínimo, preferido, máximo */
  --font-size-2xl: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  --font-size-xl: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
}

h1 {
  font-size: var(--font-size-2xl);
}
h2 {
  font-size: var(--font-size-xl);
}
p {
  font-size: var(--font-size-base);
}

Por qué funciona#

La función clamp actúa como un guardián triple:

• Mínimo: El piso. Tu texto nunca bajará de este valor, garantizando accesibilidad.
• Máximo: El techo. Evitás que los títulos se desproporcionen en monitores gigantes.
• Preferido: La fluidez. 1.5rem + 3vw escala suavemente con la ventana.

Esta técnica es pilar en la ingeniería de mi portfolio para lograr un Lighthouse impecable.

Generador Visual#

Para no calcular manualmente, Utopia.fyi genera la escala completa lista para copiar.