Keepdesk

Generador de fórmulas CSS clamp() para tipografía fluida

Elimina los saltos bruscos de las media queries escalando el tamaño de fuente suavemente entre pantallas móviles y de escritorio.

Paso a paso

  1. 1

    Define el rango de fuente

    Introduce el tamaño de fuente mínimo (ej. 16px) y máximo (ej. 32px).

  2. 2

    Establece los límites del viewport

    Especifica el límite inferior del viewport (ej. 375px) y el límite superior (ej. 1440px).

  3. 3

    Copiar código clamp()

    Haz clic en el botón de copiar para obtener tu fragmento de CSS clamp() generado.

Escalado lineal según el viewport

Calcula la pendiente y la intersección con el eje Y exactas en rem y vw para interpolar linealmente el tamaño de fuente al cambiar el tamaño del navegador.

CSS limpio para producción

Genera declaraciones CSS limpias en una sola línea, listas para copiar directamente en tu configuración de Tailwind o en tus hojas de estilo.

Guías según tu situación

Calculadora de CSS clamp() →
Calculadora de clamp() para espaciado y padding adaptableCalcula valores fluidos y adaptables de padding, margin y grid gap usando…

Artículos que usan esta herramienta

Todas las publicaciones →
Una escala tipográfica fluida con clamp(): títulos y cuerpo que crecen juntosAprende a crear una escala tipográfica fluida y coherente con CSS clamp() para que tus títulos y el texto del cuerpo escalen de forma suave en todos los viewports.Tipografía fluida con CSS clamp(): la fórmula, el reto de la accesibilidad y un ejemplo prácticoPor qué los tamaños de fuente dan saltos en los breakpoints, cómo funciona clamp(), por qué vw por sí solo rompe el zoom de texto y el cálculo de pendiente/intersección con números reales.

Preguntas frecuentes

¿Es compatible CSS clamp en todos los navegadores modernos?

Sí, CSS clamp() cuenta con compatibilidad universal en todos los principales navegadores web modernos.

¿Por qué usar rem en lugar de solo píxeles?

Combinar rem con vw respeta la configuración de zoom de fuente por accesibilidad del usuario mientras escala de forma dinámica.

Más herramientas

Todas las herramientas →
Visor HWPAbre HWP·HWPX coreanos en su diseño original; guarda como PDF o WordPDF → ImagenConvierte páginas de PDF a JPG·PNG·WebP en la resolución que elijasImágenes → PDFCombina fotos y escaneos en un solo PDF. Ajusta a A4, reordena páginasUnir PDFCombina varios PDF en uno solo. Reordena, gira