Font-size clamp() explicado: fórmula base, pendiente e intercepto

Gabriel Gómez Gómez ·

Font-size clamp() explicado: fórmula base, pendiente e intercepto

  • Este artículo explica la fórmula matemática detrás del FontClampGenerator y el significado real de los valores que aparecen como Pendiente e Intercepto. La meta es generar una regla CSS de tipografía fluida usando clamp(min, preferido, max) de forma correcta y predecible.

  • La idea central es simple: queremos que el tamaño de fuente crezca de forma lineal desde un valor mínimo hasta uno máximo, dentro de un rango de anchuras de viewport.

  • Definimos dos puntos en una gráfica donde:
    • Punto 1: ancho mínimo del viewport =     minVW y tamaño mínimo de fuente = minFS.
    • Punto 2: ancho máximo del viewport =     maxVW y tamaño máximo de fuente = maxFS.

  • Con esos dos puntos construimos una recta. En CSS, esa recta la expresamos como una forma compatible con unidades responsivas:
    font-size: clamp(minFS, calc(intercepto + pendiente * vw), maxFS).

  • El valor preferido es la parte fluida. Es decir, el bloque que cambia en función del ancho de la pantalla:
    calc(InterceptoPx + PendienteVw).

  • La fórmula que usa el generador es la estándar para convertir una recta definida en píxeles a un término en vw:

  • formula.jsJS
    // Datos de entrada en px
          // minVW, maxVW, minFS, maxFS

          // 1) Pendiente (coeficiente de vw)
          const slope = ((maxFS - minFS) / (maxVW - minVW)) * 100;

          // 2) Intercepto (término constante en px)
          const intercept = minFS - (slope * minVW) / 100;

          // 3) Expresión CSS final
          const preferred = `calc(${intercept}px + ${slope}vw)`;
          const clamp = `clamp(${minFS}px, ${preferred}, ${maxFS}px)`;

  • ¿Por qué multiplicamos por 100?
    Porque     1vw representa el 1% del ancho del viewport. Para que la recta pase exactamente por los dos puntos (minVW/minFS y maxVW/maxFS), convertimos la pendiente de “px por px” a “px por vw”.

  • En otras palabras, esta relación asegura que:
    • Cuando el viewport mide minVW, el cálculo devuelve minFS.
    • Cuando el viewport mide maxVW, el cálculo devuelve maxFS.

  • ¿Qué significa Pendiente?

  • En el generador, la Pendiente es el número que acompaña al vw dentro del calc().
    Ejemplo conceptual:
    calc(10px + 1.25vw) → aquí 1.25 es la pendiente.

  • Interpretación práctica:
    • Una pendiente más alta significa que el texto crece más rápido conforme aumenta el ancho del viewport.
    • Una pendiente más baja produce un crecimiento más suave.

  • Por eso en el panel de resultados verás algo como:
    Pendiente: xx.xx
    Ese valor es el coeficiente real que alimenta la parte     + xx.xxvw.

  • ¿Qué significa Intercepto?

  • El Intercepto es el valor fijo en píxeles que se suma a la parte responsiva.
    Ejemplo conceptual:
    calc(10px + 1.25vw) → aquí 10px es el intercepto.

  • Interpretación práctica:
    • Ajusta el punto de partida de la recta.
    • Permite que la fórmula siga siendo exacta en el ancho mínimo definido.

  • En el panel del generador normalmente lo verás así:
    Intercepto: xxx.xxx px
    Este valor alimenta el bloque     calc(InterceptoPx + PendienteVw).

  • Resumen de la regla final

  • El generador produce esta estructura:
    font-size: clamp(minFSpx, calc(interceptoPx + pendienteVw), maxFSpx);

  • Con esto consigues una tipografía que:
    • Nunca baja de minFS.
    • Escala de forma fluida entre anchos mínimos y máximos.
    • Nunca supera maxFS.