clamp(min, preferido, max) mantiene un valor entre un mínimo y un máximo mientras permite que el valor preferido escale entre ellos — perfecto para el tamaño responsivo.

¿Por qué es mejor que usar solo vw?

El vw simple sigue encogiéndose o creciendo sin límite. clamp() lo acota para que el texto siga siendo legible en pantallas muy pequeñas y muy grandes.

¿Por qué rem en lugar de px?

rem respeta la configuración de tamaño de fuente del navegador del usuario, lo que es mejor para la accesibilidad que los píxeles fijos.

¿Es accesible la tipografía fluida?

Puede serlo cuando se mantiene un mínimo razonable y se evitan pendientes extremas. Usar rem también permite que los usuarios escalen el texto. Prueba siempre con zoom y ajustes de texto grande.

¿Se envían mis datos a un servidor?

No. El valor clamp() se genera completamente en tu navegador.

Generador CSS clamp()

Tamaño mínimo (px)

Tamaño máximo (px)

Fuente raíz (px)

Viewport mínimo (px)

Viewport máximo (px)

font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);

Tamaño calculado según el ancho del viewport

360px

16,3px

768px

19,7px

1024px

21,9px

1440px

24px

Herramientas externas relacionadas

Algunos enlaces son enlaces de afiliados.

AmazonEl mayor mercado en línea del mundo para compras, electrónica, libros, software y más. El envío rápido, las devoluciones sencillas y el vasto catálogo de productos lo convierten en el favorito para las compras diarias. La membresía Prime añade streaming, envío gratuito y ofertas exclusivas.UdemyUn mercado de aprendizaje en línea con más de 250.000 cursos sobre programación, diseño, negocios y más. Los cursos son impartidos por expertos del sector y disponibles a tu propio ritmo. Las frecuentes ofertas lo convierten en una de las formas más económicas de aprender.

Herramientas relacionadas

Formateador JSONFormatea, comprime y valida JSON online de forma gratuita. ¿JSON roto? Muestra la línea y columna exacta del error con resaltado. Nada se sube.Base64 Codificar / DecodificarCodifica texto a Base64 o decodifica Base64 al instante — tildes y emojis sin errores (UTF-8), Base64 seguro para URL, imagen a data URL. Todo en el navegador.Probador de RegexPrueba expresiones regulares con resaltado de coincidencias en vivo, grupos de captura, flags y vista previa de reemplazo. Todo en tu navegador, sin subir nada.JSON a TypeScriptPega JSON y obtén interfaces o tipos de TypeScript: objetos anidados, arrays combinados y campos opcionales o nulos. En tu navegador, sin subir nada.

Crea un valor CSS clamp() fluido que escala suavemente entre un tamaño mínimo y uno máximo a lo largo de un rango de viewport, ideal para tipografía y espaciado responsivos. Introduce los tamaños, copia el resultado y comprueba la vista previa en tiempo real. Todo se ejecuta en tu navegador.

Cómo usar

Establece el tamaño mínimo y máximo en píxeles.
Define el rango de viewport en el que debe escalarse.
Copia el valor clamp() generado y comprueba la vista previa a diferentes anchos.

Cómo funciona

La herramienta traza una línea recta entre dos puntos: tu tamaño mínimo en el viewport más pequeño y el máximo en el más grande. Esa línea se convierte en el valor preferido, expresado con un desplazamiento rem más una pendiente vw. clamp() lo bloquea para que nunca caiga por debajo del mínimo ni supere el máximo, dando un escalado suave entre los dos puntos de ruptura.

Características

Escalado verdaderamente fluido

Los tamaños se interpolan suavemente entre puntos de ruptura en lugar de saltar con media queries.

Salida rem + vw

La salida usa rem y vw para respetar la configuración de fuente del usuario y mantener la accesibilidad.

Vista previa en tiempo real

Consulta el tamaño en píxeles calculado para varios anchos de viewport habituales.

Raíz personalizada

Configura el tamaño de fuente raíz para que los valores rem coincidan con tu proyecto.

Listo para copiar

Copia una declaración completa de font-size directamente en tu CSS.

Cuándo usarlo

Tipografía fluida

Escala encabezados y texto de cuerpo suavemente desde móvil hasta escritorio.

Espaciado y huecos

Aplica la misma idea fluida al padding, los márgenes y los huecos de cuadrícula.

Escala tipográfica

Construye una escala tipográfica responsiva donde cada paso escala con el viewport.

Consistencia

Reemplaza pilas de media queries con un único clamp() predecible.

Notas

El viewport máximo debe ser mayor que el mínimo.
Los valores usan rem basados en el tamaño de fuente raíz (16px por defecto).
Las pendientes muy pronunciadas pueden dificultar la legibilidad en tamaños intermedios.
Todo se ejecuta en tu dispositivo; no se sube nada.

Preguntas frecuentes

¿Qué hace clamp()?: clamp(min, preferido, max) mantiene un valor entre un mínimo y un máximo mientras permite que el valor preferido escale entre ellos — perfecto para el tamaño responsivo.
¿Por qué es mejor que usar solo vw?: El vw simple sigue encogiéndose o creciendo sin límite. clamp() lo acota para que el texto siga siendo legible en pantallas muy pequeñas y muy grandes.
¿Por qué rem en lugar de px?: rem respeta la configuración de tamaño de fuente del navegador del usuario, lo que es mejor para la accesibilidad que los píxeles fijos.
¿Es accesible la tipografía fluida?: Puede serlo cuando se mantiene un mínimo razonable y se evitan pendientes extremas. Usar rem también permite que los usuarios escalen el texto. Prueba siempre con zoom y ajustes de texto grande.
¿Se envían mis datos a un servidor?: No. El valor clamp() se genera completamente en tu navegador.