Cómo calcular una escala tipográfica fluida paso a paso

Abre la hoja de estilos de muchos sitios fluidos y encontrarás treinta expresiones clamp(): una por tamaño, cada una con su propia pendiente e intercepto, y todas deben concordar para que la escala se mantenga coherente. Abre la hoja de estilos de un sistema fluido basado en la raíz y encontrarás una.

Una escala tipográfica fluida necesita cuatro decisiones —el tamaño base en el viewport más pequeño, el tamaño base en el más grande y los dos anchos de viewport— más la razón que ya tienes. Calcula una pendiente y un intercepto para el tamaño de fuente de la raíz, define todos los demás tamaños en rem y la escala entera se desliza con sus proporciones intactas. Este artículo recorre ese cálculo una vez, por completo. Forma parte de nuestra guía de tipografía fluida; la alternativa por tamaño también se cubre más abajo, porque te la encontrarás en la práctica.

¿Qué cuatro entradas necesita una escala tipográfica fluida?

El modelo de cuatro entradas es la metodología popularizada por Utopia, que planteó la tipografía fluida como el diseño de dos estados —una escala para pantalla pequeña y una escala para pantalla grande— dejando que el navegador interpole. Los mismos cuatro números impulsan la arquitectura de clamp en la raíz que se muestra aquí:

• base-min — el tamaño del cuerpo en el extremo pequeño. 16px es el suelo habitual; bajar de ahí cambia legibilidad por espacio.
• base-max — el tamaño del cuerpo en el extremo grande. 18px da un deslizamiento suave; valores mayores convienen a diseños centrados en la lectura que se ven desde más lejos.
• vp-min — el viewport donde empieza el deslizamiento, normalmente un teléfono pequeño (aquí 360px).
• vp-max — el viewport donde termina el deslizamiento, normalmente donde el contenedor de tu diseño llega a su tope (aquí 1280px).

16→18 a lo largo de 360→1280 es un punto de partida razonable: suficiente crecimiento para que las pantallas grandes resulten cómodas, y lo bastante sutil como para que nadie lo note.

¿Cómo se calcula el clamp de la raíz?

Dos números derivados convierten las cuatro entradas en una expresión clamp(). La pendiente es el crecimiento sobre el rango:

slope = (18 − 16) / (1280 − 360) = 2 / 920 ≈ 0.002174   → ×100 ≈ 0.2174vw

El intercepto ancla la recta en un punto conocido:

intercept = 16 − 0.002174 × 360 ≈ 15.22px

Ensamblado y aplicado a la raíz:

html {
  font-size: clamp(16px, 15.22px + 0.2174vw, 18px);
}

Verifica ambos extremos: a 360px, 15,22 + 0,2174 × 3,6 ≈ 15,22 + 0,78 = 16px ✓; a 1280px, 15,22 + 0,2174 × 12,8 ≈ 15,22 + 2,78 = 18px ✓. Ese es todo el cálculo: no volverás a necesitarlo para ningún otro tamaño.

¿Por qué no necesita cada tamaño su propio cálculo?

Porque rem se define en relación con la raíz, y la raíz es lo que se desliza. Un encabezado definido como 2.369rem (tres pasos por encima en una escala de razón 1,333) se renderiza a 2,369 × 16 ≈ 37,9px cuando la raíz está en su mínimo y a 2,369 × 18 ≈ 42,6px en su máximo: sin un segundo clamp, sin una segunda pendiente. Cada paso de la escala hereda el deslizamiento de la misma manera:

Lee la tabla en vertical y la razón se mantiene en ambos extremos: cada fila es 1,333× la anterior. Léela en horizontal y cada fila crece el mismo 12,5%, porque todas montan sobre la misma raíz. Proporciones intactas, una sola pendiente, sin deriva entre tamaños. Por eso tampoco hace falta una sesión de calculadora de escala tipográfica fluida por cada tamaño: los cuatro parámetros son toda la entrada. En el modo fluido de Scale Composer puedes verlo directamente — abre el conjunto completo de parámetros y la tabla de la escala muestra el valor en píxeles de cada paso en ambos extremos del viewport, recalculado a medida que arrastras cualquiera de las cuatro entradas.

La exportación de tokens DTCG lleva los mismos cuatro parámetros fluidos en su sección de escala, de modo que las herramientas posteriores pueden reconstruir el clamp en lugar de tener que parsear CSS.

¿Cuándo son los clamps por tamaño la mejor herramienta?

El modelo de clamp en la raíz da a cada tamaño el mismo crecimiento relativo. La salida al estilo de Utopia da a cada tamaño su propio clamp —su propio mínimo, máximo y pendiente—, lo que compra un poder legítimo: la pendiente por nivel. Un titular de display puede deslizarse de 40px a 64px (60% de crecimiento) mientras el texto del cuerpo se desliza de 16 a 18 (12,5%):

font-size: clamp(2.5rem, 1.913rem + 2.6087vw, 4rem); /* 40px @360 → 64px @1280 */

Verificado: 30,61 + 2,6087 × 3,6 ≈ 40px ✓; 30,61 + 2,6087 × 12,8 ≈ 64px ✓ (intercepto ≈30,61px ≈ 1,913rem). Si tu diseño quiere que la jerarquía se ensanche en pantallas grandes —cabeceras editoriales, secciones hero de marketing—, ese deslizamiento diferencial es la razón honesta para pagar el coste. El coste es superficie: una hoja de estilos que crece con el número de tamaños por clamp, donde treinta expresiones deben mantenerse mutuamente consistentes, y donde cambiar el rango de viewport significa regenerarlas todas en lugar de editar una sola línea.

¿Cómo se vuelve fluido el espaciado en la misma pasada?

Si la tipografía se desliza y el espaciado no, la composición se descuadra: el texto crece mientras el espacio a su alrededor se queda quieto. En la arquitectura de clamp en la raíz, el espaciado no necesita su propio clamp: los tokens de espaciado son simples valores en rem, y rem monta sobre la raíz deslizante exactamente igual que los tamaños de fuente. La exportación envuelve cada uno en un paso de redondeo:

--space-md: round(nearest, calc(1.5rem * var(--spacing-density)), 0.5rem); /* 24→27px (fluido) */

El token de 1,5rem se renderiza a 24px cuando la raíz está en 16 y a 27px cuando llega a 18 —el mismo 12,5% que gana la tipografía, manteniendo el espaciado y la tipografía en proporción— y round(nearest, …, 0.5rem) ajusta el valor en movimiento al medio rem más cercano, de modo que el espaciado fluido sigue cayendo sobre la rejilla de espaciado en lugar de derivar hacia valores fraccionarios. La exportación CSS comenta cada valor de espaciado fluido con su rango en píxeles, así los extremos diseñados siguen visibles en el código.

Prueba con tus propios números

Las cuatro entradas son decisiones sobre tu diseño, y la forma más rápida de hacerlas tuyas es cambiarlas: parte de los parámetros por defecto, ajusta base-max al tamaño del cuerpo en tu pantalla grande, mueve vp-max al tope de tu contenedor y lee la tabla de la escala en ambos extremos. Si el paso superior se ve bien en ambos anchos, los treinta clamps que no escribiste eran los treinta clamps correctos que había que ahorrarse.