La tipografía por breakpoints salta: 32px en un teléfono y de pronto 48px a partir de 768px. La tipografía fluida crece suavemente con el ancho de la pantalla, así que cada tamaño de pantalla recibe una medida que encaja, con menos CSS.
La pieza clave: clamp()
font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
clamp(mínimo, preferido, máximo) nunca baja del mínimo ni sube del máximo, y entre ambos sigue el valor preferido. La parte preferida es una línea recta: una cantidad fija en rem más una fracción del ancho de la pantalla.
El cálculo, una sola vez
Elige un tamaño para una pantalla pequeña (por ejemplo 32px a 360px) y otro para una grande (48px a 1280px). La pendiente es (48 − 32) / (1280 − 360) ≈ 0.0174, es decir, 1.74vw. La ordenada es 32 − 0.0174 × 360 ≈ 25.7px ≈ 1.61rem. Entonces:
font-size: clamp(2rem, 1.61rem + 1.74vw, 3rem);
Escala la proporción, no solo el tamaño
Los títulos necesitan más diferencia con el texto en una pantalla grande que en un teléfono. Un buen patrón: una proporción más compacta en móvil (como 1.2) y una más marcada en escritorio (como 1.333). Los pasos pequeños casi no cambian y los tamaños grandes crecen mucho.
Mantenla accesible
- Incluye siempre una parte en rem en el valor preferido. Los valores solo en vw ignoran el tamaño de letra que configuró la persona y el zoom deja de funcionar (WCAG 1.4.4).
- Usa rem para el mínimo y el máximo, nunca px, por la misma razón.
- Reduce el interlineado a medida que crece el tamaño: alrededor de 1.5 para el texto, 1.1–1.2 para títulos grandes.
- Prueba con zoom al 200%: el texto debe seguir creciendo.
Conviértela en tokens
Guarda cada paso como una variable CSS (--text-sm, --text-base, --text-xl…) o como design tokens, para que diseño y desarrollo hablen de los mismos tamaños. El generador exporta ambos.