Tipografía y espaciado fluidos: la guía práctica
La tipografía fluida reemplaza el salto en el breakpoint por un
deslizamiento: los tamaños de fuente son funciones del ancho del viewport,
deslizándose con suavidad entre un mínimo y un máximo, de modo que la
jerarquía es correcta en cada ancho en lugar de correcta en tres anchos y
tolerable entre ellos. El clamp() de CSS hizo que la técnica ocupara una
sola línea; el oficio está en los números que contiene. Este hub reúne
nuestras guías; la imagen en movimiento es
todo un sistema en modo fluido.
Una pendiente, no treinta clamps
La versión ingenua de la tipografía fluida escribe un clamp aparte para cada tamaño y confía en que las pendientes concuerden. La versión sistemática —la que Scale Composer implementa en su modo fluido— pone un solo clamp sobre el tamaño de fuente raíz y deja que cada valor basado en rem lo siga: toda la escala tipográfica, y el espaciado derivado de esa misma escala, respiran juntos con una única pendiente de viewport. Las guías de aquí cubren tanto las matemáticas por valor (te las encontrarás en la práctica) como la arquitectura basada en la raíz que hace innecesaria la mayor parte de ellas. Si la idea es nueva, qué es la tipografía fluida es la planta baja y tipografía fluida frente a breakpoints la comparación honesta: lo fluido no es automáticamente mejor, es mejor para el contenido continuo con anchos impredecibles. Espaciado fluido: una pendiente para todo extiende el argumento basado en la raíz al espacio entre elementos, donde la única pendiente rinde de forma más visible: el texto y el espacio que lo rodea siguen siendo proporcionales en lugar de separarse a mitad del redimensionado.
Los números dentro del clamp
Un tamaño fluido son cuatro decisiones: el tamaño en el extremo pequeño, el
tamaño en el extremo grande y el rango de viewport que abarca el
deslizamiento. Todo lo demás —la pendiente, la ordenada al origen, la mezcla
de vw/rem— es aritmética derivada, y derivarla con honestidad es lo que
separa a los sistemas fluidos de los accidentes fluidos. Las guías de cálculo
lo recorren con números reales, incluido el término de accesibilidad que
mantiene funcionando el zoom del navegador.
clamp() de CSS explicado
asienta la función en sí;
calcular una escala tipográfica fluida
deriva una escala completa paso a paso; y
elegir los viewports mínimo y máximo
cubre la decisión sobre el rango que la mayoría de los tutoriales se salta: el
deslizamiento debe abarcar los anchos reales de tu layout, no los de una tabla
de dispositivos. Lo que está en juego en accesibilidad es concreto: un tamaño
en vw puro ignora por completo el zoom del navegador, que es
la trampa de la unidad vw, y
la prueba de zoom frente a la WCAG 1.4.4
es cómo verificas que el término en rem realmente hace su trabajo.
Interlineado, Tailwind y cuándo decir que no
Dos detalles prácticos deciden si un sistema fluido se siente cuidado. El interlineado en los sistemas fluidos se encarga de la interacción que crea el deslizamiento: a medida que los tamaños se deslizan, los interlineados sin unidad los siguen proporcionalmente, lo cual es correcto para el texto de cuerpo y ligeramente incorrecto para los titulares grandes salvo que se corrija. Y la tipografía fluida en Tailwind traslada la técnica a un flujo de trabajo de utilidades, donde el enfoque basado en la raíz resulta necesitar menos configuración que los clamps por tamaño. El contrapeso honesto es cuándo no usar la tipografía fluida: las interfaces de aplicación densas —paneles, tablas, barras de herramientas— quieren tamaños predecibles y comprobables, y un deslizamiento que nadie nota es complejidad que nadie necesitaba.
Donde lo fluido se encuentra con el resto del sistema
El modo fluido es una decisión de renderizado sobre la misma escala que usa todo lo demás: la escala tipográfica define los tamaños, el sistema de espaciado define las distancias, y el modo fluido hace que ambos dependan del viewport sin tocar sus proporciones. Los breakpoints de la rejilla de maquetación no desaparecen —las columnas siguen cambiando por pasos— pero la tipografía dentro de ellas deja de saltar.
Guías de este hub
- ¿Qué es la tipografía fluida?
La tipografía fluida convierte los tamaños de fuente en una función del ancho del viewport: un mínimo, un máximo y un deslizamiento suave entre ambos. La fórmula, el sistema y lo que permanece fijo.
- Cómo calcular una escala tipográfica fluida paso a paso
Construye una escala tipográfica fluida a partir de cuatro entradas: tamaños base y rango de viewport. Un clamp en la raíz y cada tamaño en rem lo sigue — tabla trabajada más espaciado fluido.
- Cómo elegir el viewport mínimo y máximo
Cómo elegir el rango de viewport de la tipografía fluida: dónde empieza y termina el deslizamiento, por qué los clamps se mantienen planos fuera de él, y tres pendientes reales calculadas en su totalidad.
- CSS clamp() explicado con números reales
CSS clamp() explicado calculando por completo un ejemplo real — pendiente, intersección y el valor preferido vw + rem — verificado a 360px, 800px y 1280px.
- Cuándo NO usar tipografía fluida
Las desventajas de la tipografía fluida, con honestidad: UI de aplicación densa, QA por capturas, rangos extremos y públicos que dependen del zoom — cuándo los tamaños fijos son la decisión correcta.
- Espaciado fluido: una sola pendiente para todo
Una escala de espaciado fluido hace que el espaciado se deslice junto con la tipografía fluida sobre una misma pendiente, para que las proporciones se mantengan en cada ancho. Las matemáticas, el detalle de round() y valores reales.
- Interlineado en sistemas fluidos
Interlineado fluido: qué debe hacer el interlineado cuando los tamaños se deslizan — multiplicadores sin unidad, múltiplos de línea base en rem que bloquean proporciones y clamps por valor, comparados.
- La trampa de la unidad vw
Por qué el tamaño de fuente en vw puro falla: sin límites, sordo al zoom, un solo número que bloquea tamaño y pendiente. 4vw evaluado en cinco anchos, y el clamp() acotado que lo reemplaza.
- Tipografía fluida en Tailwind
Tipografía fluida en Tailwind sin plugin: valores clamp() calculados en el bloque @theme de la v4, o un único clamp en la raíz que hace fluir cada utilidad basada en rem.
- Tipografía fluida vs por breakpoints
Tipografía responsive vs fluida: los tamaños por breakpoint son predecibles y testables, clamp() se desliza entre ellos. Cuándo gana cada uno — y el híbrido que envía la mayoría de productos.
- Tipografía fluida y WCAG 1.4.4: la prueba del zoom
La accesibilidad de la tipografía fluida depende del reparto rem/vw dentro de clamp(). Por qué el zoom necesita el término en rem, el protocolo de prueba del 200% y los números que cumplen la WCAG 1.4.4.
Observa el deslizamiento
La tipografía fluida es una de esas raras técnicas que se explican solas en movimiento: alterna el mismo sistema entre fijo y fluido: los tamaños mantienen sus relaciones mientras sus valores absolutos empiezan a seguir el viewport. Un solo redimensionado con la opción activada enseña el concepto más rápido que cualquier fórmula.