¿Qué es la Tipografía Fluida?

La tipografía fluida hace que tu texto se escale suavemente en diferentes tamaños de pantalla en lugar de saltar entre puntos de quiebre fijos. Usando la función CSS clamp(), el font-size y line-height se ajustan proporcionalmente a medida que cambia el ancho del viewport — sin necesidad de media queries.

Enfoque Tradicional

Puntos de Quiebre Fijos

Cambios de tamaño abruptos en los puntos de quiebre
Se requieren múltiples media queries
Mantener muchos valores por elemento
Escalado inconsistente entre puntos de quiebre

Tipografía Fluida

Solución clamp()

Escalado suave y continuo
No se necesitan media queries
Una sola declaración por elemento
Tamaño perfecto en cualquier viewport

Entendiendo clamp()

La función clamp(min, preferred, max) acepta tres valores: un tamaño mínimo, un tamaño preferido basado en el ancho del viewport, y un tamaño máximo. El navegador calcula automáticamente el tamaño correcto para cualquier viewport.

Ejemplo: font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem) escala suavemente el texto de 16px en viewport de 320px a 24px en viewport de 1440px.

¿Por Qué Usar Esta Calculadora?

Calcular el valor preferido (el parámetro del medio) requiere matemáticas complejas: convertir valores de píxeles a rem, calcular la pendiente e intersección en y de una función lineal. Esta calculadora maneja todos los cálculos y te proporciona código CSS listo para producción al instante.

Cálculos Automáticos

Fórmulas matemáticas complejas calculadas al instante con resultados precisos.

Vista Previa en Vivo

Ve exactamente cómo se escala tu tipografía en diferentes tamaños de viewport.

Código Listo para Usar

Copia código CSS listo para producción directamente a tu proyecto.

Table of Contents

1. ¿Qué es la Tipografía Fluida?
2. Cómo Usar
3. Características
4. Preguntas Frecuentes

Cómo Usar

Sigue estos pasos simples para generar CSS de tipografía fluida para tu proyecto. La calculadora te guía a través de cada parámetro con vista previa en tiempo real y generación de código instantánea.

Establece Tu Rango de Viewport

Ingresa los anchos de viewport mínimo y máximo para tu diseño. Los valores comunes son 320px (móvil más pequeño) y 1440px (escritorio estándar). El texto se escalará linealmente entre estos puntos de quiebre.

Rango recomendado: 320px–1440px cubre el 95% de dispositivos desde móvil hasta escritorio.

Establece el Tamaño de Fuente

Usa los deslizadores o escribe los tamaños de fuente mínimo y máximo. El mínimo es el tamaño en el viewport más pequeño, el máximo es el tamaño en el viewport más grande.

También puedes hacer clic en un preset (H1–H6, Body, Small) para cargar valores de tipografía comunes basados en mejores prácticas.

Ajusta la Altura de Línea

Establece los valores de line-height mínimo y máximo. El texto más grande generalmente necesita line-height más ajustado (p. ej., 1.1–1.2 para encabezados), mientras que el texto de cuerpo necesita más espaciado (p. ej., 1.5–1.7).

Consejo: Si ambos valores son iguales, se genera un line-height estático en lugar de clamp() para código más limpio.

Elige la Unidad de Salida

Selecciona rem (recomendado) o px para la salida. Cuando uses rem, establece el tamaño de Fuente Base para que coincida con el font-size raíz de tu proyecto (típicamente 16px).

rem: Respeta la configuración del navegador del usuario (mejor accesibilidad)
px: Tamaño fijo independiente del font-size raíz

Vista Previa y Copia

Arrastra el deslizador de viewport para ver una vista previa de cómo se escala el texto en diferentes tamaños de pantalla. Cuando estés satisfecho, haz clic en Copiar para copiar el código CSS a tu portapapeles.

Características

Esta calculadora proporciona herramientas completas para crear tipografía fluida con precisión y facilidad. Cada característica está diseñada para optimizar tu flujo de trabajo y garantizar resultados precisos.

Generación CSS clamp()

Genera CSS listo para producción usando la función clamp() tanto para font-size como para line-height.

Valores de pendiente (vw) calculados correctamente
Valores de intersección (rem o px) precisos
Salida limpia y optimizada

Presets de Tipografía

Ocho presets integrados cubren necesidades de tipografía comunes basadas en mejores prácticas de la industria.

Encabezados H1 a H6
Texto de cuerpo y texto pequeño
Rangos de tamaño y line-height optimizados

Vista Previa Interactiva

Un deslizador de viewport te permite simular cualquier ancho de pantalla de 320px a 1920px.

Vista previa de escalado de texto en tiempo real
Simulación exacta del tamaño de viewport
Retroalimentación visual instantánea

Desglose de Fórmula

La sección de fórmula muestra el cálculo paso a paso para total transparencia.

Detalles del cálculo de pendiente
Coeficiente de ancho de viewport
Cálculo de intersección en y

Salida Flexible

Alterna entre salida rem y px con tamaño de fuente base configurable.

Selección de unidad rem o px
Tamaño de fuente base personalizable
Conversiones precisas

Altura de Línea Fluida

Genera valores de line-height fluida usando clamp() para legibilidad óptima en todos los tamaños.

Se escala proporcionalmente con font-size
Salida estática cuando los valores coinciden
Mantiene legibilidad en todos los viewports

Preguntas Frecuentes

¿Qué es CSS clamp()?

clamp(min, preferred, max) es una función CSS que limita un valor entre un mínimo y un máximo. El valor preferido (generalmente usando unidades vw) se escala con el viewport, pero nunca cae por debajo del mín ni por encima del máx.

Ejemplo de Sintaxis clamp()

/* font-size: clamp(minimum, preferred, maximum) */
font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem);

¿Debo usar rem o px?

Usa rem en la mayoría de casos. Las unidades rem respetan la configuración de tamaño de fuente del navegador del usuario, mejorando la accesibilidad. Solo usa px si necesitas que el tamaño sea independiente del font-size raíz.

Mejor práctica: Las unidades rem proporcionan mejor accesibilidad y respetan las preferencias del usuario, haciendo tu tipografía más inclusiva.

¿Qué rango de viewport debo usar?

Un rango de 320px a 1440px funciona bien para la mayoría de proyectos. 320px cubre las pantallas móviles más pequeñas comunes, y 1440px es un ancho de escritorio estándar. Ajusta según los datos analíticos o especificaciones de diseño de tu proyecto.

320px: Dispositivos móviles más pequeños (iPhone SE, Android antiguo)
1440px: Pantallas de escritorio/portátil estándar
Rangos personalizados: Usa datos analíticos para tu audiencia específica

¿Qué es la configuración "Fuente Base"?

Este es tu font-size raíz (el valor establecido en el elemento <html>). El valor predeterminado es 16px. Si tu proyecto usa un font-size raíz diferente, cámbialo para que las conversiones rem sean precisas.

Estableciendo el Tamaño de Fuente Raíz

html {
  font-size: 16px; /* Base font for rem calculations */
}

¿Por qué mi salida de line-height muestra un valor estático en lugar de clamp()?

Cuando los valores de line-height mínimo y máximo son iguales, no hay escalado necesario. La calculadora genera un valor estático simple en lugar de un clamp() innecesario para CSS más limpio y eficiente.

Ejemplo: Si tanto el line-height mín como máx se establecen en 1.5, la salida será line-height: 1.5; en lugar de line-height: clamp(1.5, 1.5, 1.5);

¿Es clamp() compatible con todos los navegadores?

CSS clamp() es compatible con todos los navegadores modernos incluyendo Chrome 79+, Firefox 75+, Safari 13.1+ y Edge 79+. Para soporte de navegadores antiguos, considera proporcionar un font-size alternativo antes de la declaración clamp().

Navegador	Versión Mínima	Fecha de Lanzamiento	Compatibilidad
Chrome	79+	Dic 2019	Compatibilidad Total
Firefox	75+	Abr 2020	Compatibilidad Total
Safari	13.1+	Mar 2020	Compatibilidad Total
Edge	79+	Ene 2020	Compatibilidad Total

Ejemplo de Alternativa

h1 {
  font-size: 2rem; /* Fallback for older browsers */
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem); /* Modern browsers */
}

¿Puedo usar esto para espaciado y otras propiedades?

Las matemáticas detrás de clamp() funcionan para cualquier propiedad CSS que acepte valores de longitud — padding, margin, gap, width, etc. Usa la fórmula generada como referencia y ajusta el nombre de la propiedad en tu CSS.

Propiedades de Espaciado

padding
margin
gap
border-radius

Propiedades de Tamaño

width / max-width
height / max-height
column-gap / row-gap
border-width

Ejemplo de Espaciado Fluido

.container {
  /* Fluid padding */
  padding: clamp(1rem, 0.5rem + 2vw, 3rem);
  
  /* Fluid gap */
  gap: clamp(0.5rem, 0.25rem + 1vw, 2rem);
  
  /* Fluid max-width */
  max-width: clamp(320px, 90vw, 1200px);
}