Calculadora CSS clamp() & Tipografía Fluida

Calculadora CSS clamp() & Tipografía Fluida

Genera expresiones CSS clamp() listas para pegar para tipografía fluida y dimensiones responsive. Define un viewport mínimo y máximo, luego cualquier número de valores (tamaños de fuente, espaciado, altura de línea) con sus mínimos y máximos. La calculadora emite un clamp() que escala linealmente entre los dos anchos y fija en cada límite. Una vista previa en vivo renderiza texto de muestra en el viewport simulado para revisar la curva. Plantillas de escala tipográfica (Major Third, Perfect Fourth, Golden Ratio…) generan toda la jerarquía h1–h6 con un clic.

¿Qué es la función CSS clamp() y por qué usarla para tipografía?

clamp(MIN, PREFERRED, MAX) devuelve PREFERRED, salvo que esté por debajo de MIN (entonces MIN) o por encima de MAX (entonces MAX). Para tipografía, el truco es que PREFERRED sea una expresión fluida basada en unidades vw — el tamaño crece linealmente con el viewport entre los dos límites.

Ejemplo: font-size: clamp(1rem, 0.857rem + 0.714vw, 1.5rem) da 16px a 320px de ancho, 24px a 1440px y queda fijo fuera de ese rango.

Ventajas sobre las media queries:
- Una declaración en lugar de tres o cuatro.
- El tamaño realmente escala — sin saltos en los breakpoints.
- Respeta el zoom del usuario (cuando usas rem para MIN/MAX, lo que esta herramienta hace por defecto).
- Soporte de navegador desde 2020: Chrome 79, Safari 13.1, Firefox 75 — soporte universal en navegadores modernos.

¿Cómo funcionan las matemáticas?

Dado un tamaño mínimo en el viewport mínimo (m1, v1) y un máximo en el viewport máximo (m2, v2), queremos una función lineal f(x) = a·x + b que pase por ambos puntos.

- Pendiente: a = (m2 − m1) / (v2 − v1)
- Ordenada: b = m1 − a · v1

La expresión PREFERRED en clamp() debe ser CSS válido, así que usamos unidades vw. Como 1vw = viewport_width / 100, la fórmula queda:

PREFERRED = b + (a · 100) vw

Al usar rem, tanto b como MIN/MAX se dividen por el tamaño de fuente raíz (por defecto 16px). El coeficiente de pendiente se queda en vw porque vw es relativo al viewport y no se ve afectado por el tamaño raíz.

Es la misma fórmula detrás de Utopia y Modern Fluid Typography. La calculadora redondea a 3 decimales para mantener legible el CSS.

¿Conviene rem o px para MIN y MAX?

Usa rem en producción. Razones:

- Respeto al zoom del usuario. Cuando alguien configura el tamaño de fuente predeterminado a 20px (en vez de 16px) por accesibilidad, los valores rem escalan; los px no. Bloquear el texto a 16px ignorando la preferencia del usuario es un problema de accesibilidad WCAG.
- Consistencia de escala tipográfica. Definir tamaños en rem los mantiene proporcionales en el documento si después ajustas el tamaño raíz.
- El componente vw maneja la fluidez con cualquier unidad para las constantes — los límites MIN/MAX son donde rem importa.

Usa px cuando midas algo donde la salida pixel-perfect es la meta (un icono concreto, un grid fijo). Para texto, rem casi siempre gana.

¿Qué rango de viewport elegir para min y max?

El rango fluido va del dispositivo más pequeño que soportas al ancho típico mayor de tu diseño. Combinaciones comunes:

- 320 → 1440: muy común; cubre iPhone SE hasta una laptop / diseño 1440p.
- 360 → 1280: 'móvil moderno' a desktop estándar; mejor cuando no optimizas para pantallas diminutas.
- 375 → 1920: ancho de iPhone como referencia hasta full-HD ancho.

Idea clave: elige valores que coincidan con dónde vive tu contenido. Fuera del rango, clamp() fija en MIN o MAX — así que si tu max es 1440 y el usuario tiene un monitor ultra-wide de 3440px, el texto se queda en MAX. Suele ser lo que quieres — el texto no debería crecer indefinidamente en pantallas gigantes.

¿Qué es una 'escala tipográfica' y por qué usarla?

Una escala tipográfica es un pequeño conjunto de tamaños derivados de un tamaño base y una proporción. Elige una proporción (p. ej. 1.250 — Major Third) y aplícala iterativamente:

body = 16px
h6 = body × 1 = 16px
h5 = body × 1.25 = 20px
h4 = body × 1.25² = 25px
h3 = body × 1.25³ = 31.25px
h2 = body × 1.25⁴ = 39px
h1 = body × 1.25⁵ = 48.83px

Usar una escala en vez de tamaños arbitrarios aporta ritmo y consistencia visual. El botón 'Cargar Escala Tipográfica' siembra las filas con una jerarquía de seis pasos usando tu proporción en min y max. Luego ajustas filas individuales. Proporciones populares:

- Minor Third (1.200) — sutil, denso.
- Major Third (1.250) — equilibrado, predeterminado para UI.
- Perfect Fourth (1.333) — editorial clásico.
- Augmented Fourth (1.414) — titulares marcados.
- Perfect Fifth (1.500) — jerarquía fuerte.
- Golden Ratio (1.618) — dramático, portadas editoriales.

¿Qué tan precisa es la vista previa en vivo?

La vista previa renderiza el texto de cada fila en el tamaño que produciría clamp() al ancho simulado (el deslizador). Ese valor se calcula en JavaScript con la misma interpolación lineal que hace el navegador:

value = intercept + slope × viewport_px
limitado entre minPx y maxPx

Arrastra el deslizador entre 280 y tu viewport máximo para ver crecer el texto; pásate de cualquier límite y el tamaño se fija. La vista previa es pixel-perfecta para el ancho simulado, pero no cambia con tu ventana real — eso lo hace tu navegador. Redimensiona tu ventana o abre el modo dispositivo de DevTools para verificar en un viewport real una vez que el CSS esté en tu hoja de estilos.

¿Diferencia entre tipografía fluida y enfoque con media queries?

Enfoque media query (antiguo):

h1 { font-size: 32px; }
@media (min-width: 768px) { h1 { font-size: 40px; } }
@media (min-width: 1280px) { h1 { font-size: 56px; } }

El tamaño salta en tres pasos discretos en los breakpoints. Entre breakpoints es estático.

Enfoque fluido (clamp):

h1 { font-size: clamp(2rem, 1.4rem + 1.875vw, 3.5rem); }

El tamaño escala continuamente de 32px a 56px cuando el viewport va de ~320px a ~1440px, luego se fija en ambos extremos. Una declaración sustituye tres media queries.

Lo fluido se prefiere hoy porque: (1) sin breakpoints intermedios incómodos, (2) menos CSS, (3) sensación más natural. Mantén las media queries cuando necesites un layout completamente distinto — la tipografía fluida maneja el tamaño, no la estructura.

¿Dónde puedo usar las clamp() generadas?

En cualquier lugar donde CSS acepte un valor length:

- font-size — el caso canónico.
- padding, margin, gap — para espaciado fluido que escala con el viewport.
- width, max-width — para secciones hero que crecen con la pantalla.
- line-height — aunque suele dejarse sin unidad y dejar que escale con font-size.
- border-radius, gap de grid, cualquier otra cosa que acepte length.

El Bloque CSS Completo usa custom properties (--fs-h1, --fs-body, …) para referenciarlas en toda la hoja de estilos: font-size: var(--fs-h1). Mantiene una sola fuente de verdad para tu escala fluida.

No se necesita paso de build ni preprocesador; los navegadores modernos manejan clamp() nativamente.

Características Principales

• Calcula clamp(MIN, PREFERRED, MAX) para cualquier par viewport/valor
• Soporte multi-fila — define h1 hasta small en un mismo lugar
• Vista previa en vivo que renderiza cada fila en un viewport simulado deslizante
• Escalas predefinidas: Minor Third, Major Third, Perfect Fourth, Augmented Fourth, Perfect Fifth, Golden Ratio
• Salida rem (por defecto) o px para MIN y MAX
• Tamaño de fuente raíz configurable (por defecto 16px) para conversión rem exacta
• Genera un bloque CSS completo con custom properties (--fs-h1, --fs-body, …)
• clamp() por fila con copia en un clic
• Cálculo pixel-perfecto en cualquier viewport simulado
• Defaults sensatos: viewport 320 → 1440, jerarquía h1–small
• Añade y elimina filas al vuelo
• JavaScript puro, sin librerías externas
• Funciona offline después de la primera carga
• UI responsive y compatible con modo oscuro
• 100% en el cliente — nada se envía al servidor