Fluid type scale: variables CSS con clamp()
Esta fluid type scale convierte cinco números en un bloque de propiedades personalizadas de CSS, una por cada tamaño de letra, escritas como clamp() con unidades rem y vw. Indicas el rango de anchos de pantalla, el tamaño base en cada extremo y una razón de escala, y cada paso, de --text-xs a --text-4xl, crece con suavidad según la pantalla, sin media queries. No se sube nada: el CSS se genera en tu navegador.
Cómo crear la escala paso a paso
Rellena los cinco campos de arriba. Viewport mínimo (por defecto 320) y Viewport máximo (1200) son los anchos de pantalla, en píxeles, donde el texto es más pequeño y más grande. Tamaño base mínimo (16) y Tamaño base máximo (20) son el tamaño del texto de párrafo en esos dos anchos. La Razón de escala (1,25) indica cuánto crece cada paso respecto al anterior. Cada campo tiene una casilla numérica y un deslizador.
- Escribe el rango de anchos de pantalla.
- Indica el tamaño base para pantallas estrechas y anchas.
- Elige la razón de escala.
- El recuadro de CSS se actualiza mientras escribes, así que no hay botón de envío. Cuando el resultado te convenza, pulsa Copiar CSS y pega el bloque :root en tu hoja de estilos.
Si un campo no se puede usar, aparece un mensaje: el viewport máximo debe ser mayor que el mínimo, el tamaño base máximo mayor que el mínimo, la razón 1 o más y cada número mayor que 0. Usa un paso donde fijes un tamaño, por ejemplo h1 { font-size: var(--text-3xl); }
Vista previa con cualquier ancho
En Vista previa, arrastra Ancho de la vista previa entre el viewport mínimo y el máximo. Cada paso se muestra como la línea de ejemplo «Texto que escala con suavidad» con el tamaño que tiene en ese ancho, junto a su nombre de variable y su tamaño en píxeles, con el paso más grande arriba.
Así puedes valorar el salto entre el texto de párrafo y los títulos en un teléfono pequeño y en un escritorio ancho antes de copiar nada.
Cómo se calcula el tamaño con clamp()
Para cada paso, la herramienta calcula el tamaño en el extremo estrecho (tamaño base mínimo por la razón elevada al número del paso) y en el extremo ancho (tamaño base máximo por esa misma potencia). Después traza una recta entre los dos puntos: la pendiente es el cambio de tamaño dividido entre el cambio de ancho, y la ordenada es el tamaño mínimo menos el viewport mínimo por la pendiente. La pendiente pasa a ser la parte en vw, la ordenada la parte en rem, y los dos tamaños de los extremos son el mínimo y el máximo de clamp(). Los valores se redondean a 4 decimales.
Con los valores por defecto, a 320, 760 y 1200 px los pasos valen:
- --text-sm: 12,8 / 14,4 / 16 px
- --text-base: 16 / 18 / 20 px
- --text-lg: 20 / 22,5 / 25 px
- --text-xl: 25 / 28,13 / 31,25 px
Por qué rem y vw en lugar de px
Un tamaño escrito solo en vw ignora el tamaño de letra que la persona haya elegido en su navegador y no crece al hacer zoom. Como aquí cada número se divide en una parte en rem y otra en vw, el texto sigue respetando el tamaño base del usuario y admite zoom, lo que lo mantiene usable para quien necesita letra más grande. La herramienta nunca genera px.
Si tu sitio usa html { font-size: 62.5% } o una raíz distinta de 16 px, abre Avanzado y cambia Tamaño de fuente raíz para que 1rem coincida.
Qué viewports, tamaños base y razón elegir
El rango por defecto, de 320 a 1200, cubre desde un teléfono pequeño hasta un portátil. Elige como máximo el ancho donde quieres que el texto deje de crecer, porque a partir de ahí se mantiene en su tamaño máximo. Para el texto de párrafo, el par 16 px y 20 px es habitual. La razón da carácter a la escala:
- 1,2 (tercera menor): pasos suaves y cercanos
- 1,25 (tercera mayor): equilibrada, el valor por defecto
- 1,333 (cuarta justa): contraste claro
- 1,5 (quinta justa): títulos dramáticos
- 1,618 (razón áurea): saltos muy grandes
Con una razón de 1, todos los pasos miden lo mismo. La razón es un único número para ambos extremos, así que la escala a 320 px y a 1200 px tiene las mismas proporciones; solo cambia el tamaño base.
En Avanzado, Prefijo de variable (por defecto --text) renombra todas las propiedades. Nombres de los pasos alterna entre sm, lg, xl (--text-sm, --text-base, --text-lg y así sucesivamente) y -1, 1, 2 (--text--1, --text-0, --text-1…). Pasos menores (de 0 a 4, por defecto 2) y Pasos mayores (de 0 a 8, por defecto 5) deciden cuántos tamaños hay por debajo y por encima de la base.
Qué no hace esta herramienta
Solo genera la escala de tamaños. No hay exportación a Tailwind ni a otros formatos, ni ajustes por paso, ni una razón distinta para el extremo estrecho y el ancho, ni salida en px.
Preguntas frecuentes
¿Qué es una fluid type scale?
Es un conjunto de tamaños de letra que crecen con suavidad según el ancho de la pantalla en vez de saltar en los breakpoints. Cada paso, como pequeño, base, grande y extragrande, tiene un tamaño mínimo para pantallas estrechas y uno máximo para anchas, y el tamaño intermedio sigue una recta. El generador escribe cada paso como una propiedad personalizada de CSS que puedes reutilizar en todo el sitio.
¿Cómo usar clamp en CSS para el tamaño de letra?
clamp(mín, preferido, máx) recibe tres valores. El navegador usa el valor preferido, pero nunca baja del mínimo ni sube del máximo. Para texto, el valor preferido es una cantidad en rem más otra en vw, por ejemplo clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem). Guárdalo en una propiedad personalizada y escribe font-size: var(--text-base) donde lo necesites.
¿Cómo hago que el tamaño de letra se adapte a la pantalla en CSS?
Declara los tamaños una vez como variables con clamp() y el texto cambiará de forma continua al variar la ventana, sin media queries. Ajusta «Viewport mínimo» y «Viewport máximo» a los anchos donde quieres el tamaño más pequeño y el más grande, indica «Tamaño base mínimo» y «Tamaño base máximo» y copia el CSS. Por debajo del viewport mínimo el texto se queda en su tamaño menor, y por encima del máximo en el mayor.
¿Por qué no funciona mi clamp() de tamaño de letra?
Las causas habituales son una unidad que falta en un valor, no dejar espacios alrededor del signo más dentro de clamp(), un mínimo mayor que el máximo o un valor preferido escrito solo en vw, que ignora el tamaño de letra del usuario. Las líneas generadas evitan las cuatro: todos los valores llevan unidad, el signo más va con espacios y el mínimo siempre es menor que el máximo.
¿Funciona como el Utopia fluid type scale calculator?
Usa la misma idea: los tamaños se interpolan de forma lineal entre un viewport estrecho y uno ancho, y cada paso es un múltiplo del tamaño base según la razón. Las diferencias: aquí hay una sola razón para ambos extremos, no hay ajustes por paso y solo genera propiedades personalizadas de CSS, sin exportar a Tailwind ni a otros formatos. Elígela si quieres el bloque :root rápido.
¿Tercera mayor o cuarta justa: qué razón de escala elijo?
La tercera mayor (1,25) es un buen valor por defecto para páginas con mucho texto, porque los pasos están lo bastante cerca como para que los títulos no ahoguen el párrafo. La cuarta justa (1,333) da más contraste entre pasos y va bien en páginas promocionales con titulares grandes. La tercera menor (1,2) es aún más suave. Escribe la razón en «Razón de escala» y mira la «Vista previa» antes de copiar.
¿Se puede usar clamp() en todos los navegadores?
clamp() funciona en todas las versiones actuales de Chrome, Edge, Firefox y Safari, y lo hace desde 2020. Los navegadores muy antiguos ignoran una declaración que no entienden, así que si tienes que darles soporte, pon antes de la línea con clamp() otra con un font-size fijo como alternativa.
¿Es un fluid type scale generator o una calculadora de clamp?
Las dos cosas. Como fluid type scale generator crea la escala completa de tamaños, y como calculadora de clamp te da cada valor ya calculado. Hay quien lo busca como «calculadora css clamp» o «calculadora clamp css», y quien escribe «fluid typography generator», «css fluid typography generator» o «clamp css online»: todas esas búsquedas llevan a lo mismo, que es escribir cinco números y copiar el resultado.
¿Se envía al servidor algo de lo que escribo?
No. Tu navegador convierte los números en CSS en la propia página y no se sube ni se guarda nada. No hay cuenta ni registro.
Recomendado
-
Cuaderno de wireframes UX/UIEsboza en papel la jerarquía de títulos y texto antes de fijar la escala.
-
Monitor portátil KYY de 15,6"Comprueba tus tamaños clamp() en una segunda pantalla, con ancho de móvil y de escritorio.
-
Soporte para portátil Rain Design mStandSube el portátil a la altura de los ojos en las sesiones largas con el CSS de tu sistema de diseño.
Ayuda a mantener las herramientas gratis. ✨
Imágenes meramente ilustrativas. En calidad de Afiliado de Amazon, obtengo ingresos por las compras adscritas que cumplen los requisitos aplicables.
