CSS clamp(): tipografía fluida sin dramas

Gabriel Gómez Gómez ·

CSS clamp(): tipografía fluida sin dramas

  • clamp() es uno de los recursos modernos más útiles de CSS. Con una sola línea obtienes texto fluido, legible y controlado en todo rango de pantallas.

  • Esta línea dice: “nunca seas más chico que 1.9rem, intenta ser 3vw (fluido) y nunca pases de 2.4rem”.

  • styles.cssCSS
    font-size: clamp(1.9rem, 3vw, 2.4rem);

  • ¿Qué es clamp()?

  • SintaxisCSS
    clamp(MIN, IDEAL, MAX)
  • IdeaTEXT
    clamp(a, b, c) = min( max(b, a), c )

  • Traducción: se toma el valor IDEAL; si es menor que MIN, usa MIN; si es mayor que MAX, usa MAX. Solo acota el valor a un rango lógico.

  • Desglose del ejemplo

  • • Mínimo: 1.9rem → garantiza legibilidad.
    • Fluido: 3vw → escala con el ancho de pantalla.
    • Máximo: 2.4rem → evita tamaños desproporcionados en monitores grandes.

  • ¿Cuándo cambia cada tramo?

  • Asumiendo 1rem = 16px: 1.9rem ≈ 30.4px y 2.4rem ≈ 38.4px.
    • Por debajo de ~1013px de ancho, 3vw es menor al mínimo → 1.9rem.
    • Entre ~1013px y ~1280px, el tamaño fluye con 3vw.
    • Por encima de ~1280px, se fija en 2.4rem.

  • Ventajas

  • Reduce media queries, mantiene accesibilidad y ofrece una escala tipográfica predecible entre móvil y desktop.

  • Antes vs. ahora

  • antes.cssCSS
    h2 { font-size: 1.9rem; }
@media (min-width: 1000px) { h2 { font-size: 3vw; } }
@media (min-width: 1280px) { h2 { font-size: 2.4rem; } }
  • ahora.cssCSS
    h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); }

  • Buenas prácticas

  • • Define MIN y MAX en rem (accesibilidad).
    • Usa vw/vh en el valor central para fluidez.
    • Elige conscientemente: mínimo legible, ideal que escala, máximo cómodo.

  • Recetas listas

  • patterns.cssCSS
    /* Título hero */
.heroTitle { font-size: clamp(2rem, 6vw, 4rem); }

/* Subtítulo */
.subTitle { font-size: clamp(1.25rem, 3.5vw, 2rem); }

/* Párrafo base */
.bodyText { font-size: clamp(1rem, 2.2vw, 1.125rem); }