Cómo crear una escala tipográfica fluida con CSS clamp()

Una escala tipográfica fluida son dos escalas fijas, una para el teléfono y otra para el escritorio, unidas por una línea recta. clamp() es la forma en que CSS traza esa línea y la detiene en los dos extremos. La aritmética lleva cuatro pasos, y vale la pena hacerla una vez a mano para que los números de una hoja de estilos generada dejen de parecer magia.

Primero, dos términos

Una escala tipográfica es un conjunto ordenado de tamaños de fuente que se obtiene multiplicando un tamaño base por una razón, una vez por paso. Con una razón de 1.25, un texto base de 19px da 23.75px para el paso siguiente, 29.69px para el que sigue, y así sucesivamente.

Un tamaño fluido es un tamaño que crece en línea recta con el viewport entre dos anchos y se queda fijo fuera de ellos. En CSS se escribe clamp(minimum, preferred, maximum), donde el valor preferido combina una longitud fija con una unidad de viewport.

Crea la escala con la herramienta

1. Abre el Type scale generator y elige primero la tipografía en Typeface (tipografía). Cada familia de la lista muestra su altura de x, y todas las medidas de más abajo dependen de la familia, así que elegirla al final significa leer los números dos veces.
2. Ajusta Body size, narrow (tamaño base, angosto; de 12 a 24px, empieza en 16) y Body size, wide (tamaño base, ancho; de 14 a 28px, empieza en 19).
3. Elige Ratio, wide (razón, ancho) entre siete botones, desde 1.125 (Major second) hasta 1.618 (Golden ratio). El extremo angosto usa 1.2, como indica el panel debajo de los botones.
4. Ajusta Steps up (pasos hacia arriba, de 1 a 8) y Steps down (pasos hacia abajo, de 0 a 4). Los valores predeterminados son cinco y dos.
5. Ajusta Column width (ancho de columna) como porcentaje del viewport, y lee Body line length (longitud de línea del texto base), que cuenta los caracteres por línea a 360, 768, 1024, 1280 y 1440px.
6. Lee cada fila de la escala: su tamaño en el extremo angosto y en el ancho, y después su altura de mayúsculas y su altura de x en píxeles.
7. Elige un formato de salida: CSS custom properties, Tailwind v4 @theme, SCSS map o Design tokens (W3C DTCG). Presiona Copy scale en la barra inferior. El botón Cap at …rem de esa barra copia un max-width que deja el texto base en 66 caracteres por línea.

La aritmética de clamp(), completa

Toma los valores predeterminados de la herramienta para el paso base: 16px en un viewport de 360px, 19px en un viewport de 1440px, y el tamaño raíz predeterminado del navegador, 16px.

Paso 1, la pendiente. Cuántos píxeles de tamaño de fuente por cada píxel de viewport: (19 − 16) ÷ (1440 − 360) = 3 ÷ 1080 = 0.0027778.

Paso 2, la pendiente como unidad de viewport. 1vw es el 1% del ancho del viewport, así que multiplica por 100: 0.0027778 × 100 = 0.2778vw.

Paso 3, la ordenada al origen. El tamaño de fuente que daría la línea en un viewport de ancho cero: 16 − 0.0027778 × 360 = 16 − 1 = 15px, y 15 ÷ 16 = 0.9375rem.

Paso 4, los extremos. 16 ÷ 16 = 1rem y 19 ÷ 16 = 1.1875rem.

Todo junto: clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem).

Para comprobarlo, vuelve a meter anchos de viewport. El valor preferido es 15px más 0.0027778 por el viewport:

Viewport	Valor preferido	Lo que devuelve clamp()
320px	15 + 0.89 = 15.89px	16px, el mínimo
360px	15 + 1 = 16px	16px
768px	15 + 2.13 = 17.13px	17.13px
1440px	15 + 4 = 19px	19px
1920px	15 + 5.33 = 20.33px	19px, el máximo

El paso siguiente funciona igual, con números más grandes. Angosto: 16 × 1.2 = 19.2px. Ancho: 19 × 1.25 = 23.75px. La pendiente es 4.55 ÷ 1080 = 0.0042130, o sea 0.4213vw. La ordenada al origen es 19.2 − 0.0042130 × 360 = 19.2 − 1.5167 = 17.6833px, o sea 1.1052rem. Los extremos son 19.2 ÷ 16 = 1.2rem y 23.75 ÷ 16 = 1.4844rem.

Estas son esas dos líneas tal como la herramienta las escribe en su salida CSS con los ajustes predeterminados (emite todos los pasos, del más grande al más chico, con la regla de recorte al final):

:root {
  --step-md: clamp(1.2rem, 1.1052rem + 0.4213vw, 1.4844rem);
  --step-base: clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem);
}

h1, h2, h3, h4, .trim {
  text-box: trim-both cap alphabetic;
}

Los extremos van en rem para que quien haya configurado un tamaño de fuente predeterminado más grande en su navegador lo siga recibiendo. Solo el término del medio usa vw. La regla text-box elimina el espacio que la fuente reserva por encima de las mayúsculas y por debajo de la línea base, para que un título se apoye en su caja. Alcanzó el estado Baseline en todos los motores de navegador en agosto de 2026.

Por qué los dos extremos usan razones distintas

Con cinco pasos hacia arriba, el extremo angosto llega a 16 × 1.2⁵ = 16 × 2.48832 = 39.81px y el ancho a 19 × 1.25⁵ = 19 × 3.0518 = 57.98px. Si el teléfono también usara 1.25, su título más grande mediría 16 × 3.0518 = 48.83px, 9px más alto en una pantalla de 360px de ancho. Una razón más plana en el extremo angosto mantiene usable la parte alta de la escala en el teléfono sin volver tímida la escala de escritorio.

El tamaño que defines no es el tamaño que ves

font-size define la caja eme, que es invisible. Lo que el lector ve son las letras que hay dentro, y sus proporciones dependen de la tipografía. La altura de mayúsculas es la altura de una mayúscula plana como la H, expresada como fracción del tamaño de fuente.

Los datos de fuentes de la herramienta le dan a Inter una altura de mayúsculas de 0.728 y una altura de x de 0.546, y a EB Garamond 0.650 y 0.400. Aplica la misma escala a cada una:

Tipografía	Mayúsculas a 57.98px	Altura de x a 19px	Caracteres por línea del texto base a 1440px
Inter	57.98 × 0.728 = 42.21px	19 × 0.546 = 10.37px	98
EB Garamond	57.98 × 0.650 = 37.69px	19 × 0.400 = 7.60px	122

Igualar las mayúsculas de 42.21px de Inter en EB Garamond requiere 42.21 ÷ 0.650 = 64.94px. Los mismos valores de clamp() producen dos escalas de aspecto distinto, y por eso la herramienta muestra la altura de mayúsculas y la altura de x junto a cada paso. Para ver cuánto varía la altura de x entre familias, consulta la altura de x en 872 familias tipográficas.

La falla que clamp() esconde: la longitud de línea

Un tamaño de fuente fluido y una columna definida como porcentaje del viewport crecen a ritmos distintos, así que la línea se alarga a medida que la pantalla se ensancha, y nada en la página se ve roto.

Con los valores predeterminados de la herramienta (Inter, texto base de 19px en el extremo ancho, columna al 62% del viewport), Body line length marca 29, 58, 74, 89 y 98 caracteres en los cinco anchos, cada uno medido con el tamaño base que da clamp() en ese ancho. La última cifra sale de 1440 × 0.62 = 892.8px de columna, divididos entre el ancho promedio de carácter de Inter, 0.478 × 19 = 9.082px, lo que da 98; la primera es 360 × 0.62 = 223.2px con el texto base de 16px del extremo angosto, 223.2 ÷ (0.478 × 16) = 29. WCAG 1.4.8, un criterio AAA, pone el techo en 80. Dos de los cinco anchos lo superan. (Hasta octubre de 2026, el barrido medía todos los anchos con el tamaño del extremo ancho y marcaba 25 en el extremo angosto; escribir esta guía lo detectó.)

Una tipografía más estrecha lo empeora. El carácter promedio de EB Garamond mide 0.385 em, así que la misma columna aloja 892.8 ÷ (0.385 × 19) = 122 caracteres.

La solución es limitar la columna, no achicar el texto. La sugerencia de la herramienta con los valores predeterminados es 0.478 × 19 × 66 = 599.4px, que equivale a 599.4 ÷ 16 = 37.46rem, y su botón Cap at 37.46rem copia eso como una línea max-width.

Otras formas de hacerlo

Ningún sistema operativo tiene un método integrado para crear una escala tipográfica. La alternativa es la aritmética de arriba, y cabe en una hoja de cálculo: una fila por paso y una columna para el tamaño angosto, el tamaño ancho, la pendiente, la ordenada al origen y el clamp() terminado. Lo que una hoja de cálculo no te va a dar es la altura de mayúsculas ni la longitud de línea, porque para eso hacen falta las métricas propias de la fuente.

Cómo comprobar qué sale de la página

La escala se calcula en la pestaña. La única solicitud que hace es la de la tipografía que eliges: para cualquier familia que no sea una de las pocas fuentes de sistema comunes, como Arial y Georgia, carga la hoja de estilos de la fuente desde Google Fonts, lo que significa que se envía el nombre de la familia. Tus tamaños y tu razón no se envían. Quedan en la barra de direcciones después de un #, la parte de una URL que el navegador no envía, y puedes confirmarlo en el panel Network de las herramientas para desarrolladores mientras mueves los controles deslizantes.

Siguiente paso

Abre el Type scale generator con tu propia tipografía y tu tamaño base. Para saber cuál es el tamaño base más chico que tus colores y tu fuente pueden sostener, usa primero el Type legibility checker.