Escala tipográfica fluida

Genera una escala de tamaños de texto que crece suavemente del móvil al escritorio con clamp(), elige un par de fuentes del sistema y copia las variables CSS (o la configuración de Tailwind).

¿Qué es una escala tipográfica fluida?

Una escala tipográfica es un conjunto de tamaños relacionados entre sí por un mismo factor (el ratio). Si el texto base mide 16 px y el ratio es 1.25, cada nivel es 1.25 veces el anterior: 16 → 20 → 25 → 31.25… Así los títulos tienen una jerarquía armoniosa en lugar de tamaños elegidos al azar.

Que sea fluida significa que los tamaños no saltan de golpe con media queries, sino que crecen en línea recta según el ancho de la pantalla. Para eso se usa clamp(mínimo, preferido, máximo):

h1 {
  /* nunca menos de 2rem, nunca más de 3.5rem; en medio, crece con el ancho de la pantalla */
  font-size: clamp(2rem, 1.4783rem + 2.6087vw, 3.5rem);
}

• El mínimo se aplica en pantallas pequeñas.
• El valor preferido combina rem + vw: la parte en vw hace que crezca con la pantalla y la parte en rem mantiene el zoom del navegador funcionando.
• El máximo pone un tope en pantallas grandes.

Generador

Define el tamaño base y el ratio para móvil y escritorio. Mueve el control Simular ancho de pantalla para ver cómo cambian los tamaños.

Escala tipográfica fluida

Pantalla pequeña (móvil)

Ancho de pantallapxTamaño basepxRatio de escala 1.067 · Segunda menor1.125 · Segunda mayor1.2 · Tercera menor1.25 · Tercera mayor1.333 · Cuarta justa1.414 · Cuarta aumentada1.5 · Quinta justa1.618 · Proporción áurea

Pantalla grande (escritorio)

Ancho de pantallapxTamaño basepxRatio de escala 1.067 · Segunda menor1.125 · Segunda mayor1.2 · Tercera menor1.25 · Tercera mayor1.333 · Cuarta justa1.414 · Cuarta aumentada1.5 · Quinta justa1.618 · Proporción áurea

Fuentes

Títulos SistemaNeo-grotescaHumanistaGeométricaRedondeadaIndustrialSerif transicionalSerif clásicaDidone (elegante)MonoespaciadaCuerpo SistemaNeo-grotescaHumanistaGeométricaRedondeadaIndustrialSerif transicionalSerif clásicaDidone (elegante)Monoespaciada

Peso títulos 400500600700800900Espaciadoem

Interlineado títulosInterlineado cuerpo

Son pilas de fuentes del sistema: cada dispositivo usa la primera que tenga instalada, sin descargar nada.

Diseña sin límites

Tipografía que se adapta

Encabezado de nivel 3

Encabezado de nivel 4

Encabezado de nivel 5

Encabezado de nivel 6

Una buena escala tipográfica crea jerarquía y ritmo: el lector entiende de un vistazo qué es importante. Con clamp() los tamaños crecen suavemente entre el móvil y el escritorio, sin saltos ni media queries.

Texto pequeño · notas, leyendas y avisos legales.

Simular ancho de pantallapx

Variable	Móvil	Escritorio	Ahora
--fs-h1	32.4px	53.7px	48.7px
--fs-h2	28.8px	44.8px	41px
--fs-h3	25.6px	37.3px	34.6px
--fs-h4	22.8px	31.1px	29.1px
--fs-h5	20.3px	25.9px	24.6px
--fs-h6	18px	21.6px	20.8px
--fs-base	16px	18px	17.5px
--fs-small	14.2px	15px	14.8px

/* Escala fluida: de 16px (ratio 1.125) en pantallas de 320px
   a 18px (ratio 1.2) en pantallas de 1240px o más */
:root {
  --fs-h1: clamp(2.0273rem, 1.564rem + 2.3164vw, 3.3592rem);
  --fs-h2: clamp(1.802rem, 1.4551rem + 1.7345vw, 2.7994rem);
  --fs-h3: clamp(1.6018rem, 1.3475rem + 1.2713vw, 2.3328rem);
  --fs-h4: clamp(1.4238rem, 1.2429rem + 0.9046vw, 1.944rem);
  --fs-h5: clamp(1.2656rem, 1.1424rem + 0.6163vw, 1.62rem);
  --fs-h6: clamp(1.125rem, 1.0467rem + 0.3913vw, 1.35rem);
  --fs-base: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --fs-small: clamp(0.8889rem, 0.872rem + 0.0845vw, 0.9375rem);

  --font-titulos: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  --font-cuerpo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  font-family: var(--font-cuerpo);
  font-size: var(--fs-base);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titulos);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

small {
  font-size: var(--fs-small);
}

Consejos de uso

• Ratios pequeños en móvil, mayores en escritorio. En pantallas angostas un h1 enorme ocupa media pantalla; 1.125–1.2 en móvil y 1.25–1.333 en escritorio suele funcionar muy bien.
• El texto base debe medir al menos 16 px. Para lectura larga (blogs, documentación), 17–20 px en escritorio es más cómodo.
• Usa un interlineado de 1.5–1.7 para párrafos y de 1.1–1.3 para títulos.
• Limita el ancho de los párrafos a unos 60–75 caracteres con max-width: 65ch para que se lean sin cansar la vista.
• Contraste de fuentes: combina una fuente con personalidad para títulos con una muy legible para el cuerpo. Dos fuentes son suficientes.
• Las pilas de fuentes del sistema cargan al instante (no descargan nada). Si después quieres una fuente web, ponla al inicio de la pila y deja el resto como respaldo.

Buena práctica

Usa siempre las variables (var(--fs-h2)) en lugar de escribir tamaños sueltos en cada componente. Si mañana cambias la escala, todo el sitio se actualiza solo.

Error común

Usar sólo vw para el tamaño de letra (font-size: 4vw). En pantallas grandes el texto se vuelve gigante, en móviles diminuto, y el zoom del navegador deja de funcionar, lo que afecta la accesibilidad. Por eso se combina rem + vw dentro de clamp().