Tipografía fluida vs por breakpoints

Abre dos sitios bien hechos uno al lado del otro y arrastra la ventana del navegador lentamente hacia un ancho menor. En uno, el titular se mantiene en 40px, salta a 33px cuando cruzas los 1280px, se mantiene de nuevo, y salta a 28px en 768px — una escalera. En el otro, se desliza hacia abajo una fracción de píxel a la vez y nunca cambia de forma visible. Ambos son sistemas deliberados y coherentes; respondieron a la misma pregunta de manera distinta.

La tipografía por breakpoints define tamaños de fuente fijos por nivel de viewport y salta entre ellos en las media queries; la tipografía fluida define un rango de tamaños y deja que el navegador interpole de forma continua a lo largo de él. Los breakpoints compran predictibilidad y control por nivel; lo fluido compra suavidad y menos números — y muchos sistemas en producción acaban combinándolos: tipografía fluida dentro de layouts escalonados. Este es el capítulo comparativo de nuestra guía de tipografía fluida, y defiende ambos lados con honestidad.

¿Qué hace mejor la tipografía por breakpoints?

Predictibilidad. En un sistema por breakpoints, el h1 mide exactamente 33px en una pantalla de 768px. Esa es una afirmación testable: QA puede comprobarla, las capturas se pueden comparar píxel a píxel, y un reporte de bug puede decir “el encabezado está mal en tablet” y significar algo preciso. Los tamaños fluidos son funciones, y las funciones son más difíciles de verificar a ojo contra una especificación.

Coincide con cómo se hacen los mockups. Los diseñadores diseñan a anchos fijos — un marco de 375px, un marco de 768px, un marco de 1440px — y un sistema por breakpoints es una transcripción directa de esos artboards. El modelo escalonado está horneado en cómo se formuló originalmente el diseño responsive (mira los fundamentos del diseño responsive de web.dev para ese modelo de la era de los breakpoints); el flujo de trabajo y la técnica coevolucionaron, lo cual es parte de por qué la técnica persiste.

Control por nivel. Un sistema por breakpoints puede darle al móvil una jerarquía genuinamente distinta, no solo tamaños más pequeños. En el ejemplo trabajado más abajo, el h1 móvil es 1,75× el texto de cuerpo mientras que el h1 de escritorio es ≈2,22× — una jerarquía más plana y más calmada en pantallas pequeñas, que a menudo es la decisión editorial correcta. (Elegir esa proporción es la pregunta propia de la escala tipográfica.) El escalado puramente fluido no puede hacer esto: multiplica cada nivel por el mismo factor, así que la forma de la jerarquía se mantiene constante.

¿Qué hace mejor la tipografía fluida?

Sin la incomodidad de los tamaños intermedios. Un sistema por breakpoints es correcto en sus anchos de diseño y apenas tolerable entre ellos — en 1279px obtienes el nivel de tablet estirado al límite, un píxel antes de que encaje el nivel de escritorio. La tipografía fluida no tiene intermedios, porque cada ancho es un ancho de diseño.

Menos números mágicos. El ejemplo trabajado más abajo especifica la misma jerarquía como once números en tres contextos de media, o como siete números en uno. La brecha se ensancha con cada nivel y nivel que añades — tamaños × niveles crece de forma multiplicativa; cuatro parámetros fluidos no crecen en absoluto.

Suavidad donde los anchos son continuos. Plegables, tablets en pantalla dividida, ventanas de escritorio redimensionables: una porción creciente de sesiones ocurre en anchos que ningún artboard anticipó, y algunas cambian de ancho a mitad de sesión. Un sistema en escalera salta durante un arrastre para redimensionar; uno fluido simplemente respira.

¿Cómo se ve la misma jerarquía de ambas formas?

Tres niveles, especificados como niveles por breakpoint:

Superficie de mantenimiento: nueve declaraciones de tamaño más dos valores de breakpoint — once números repartidos en tres contextos de media. Añadir un cuarto nivel de texto significa tres números más; añadir un cuarto nivel significa volver a decidir cada nivel una vez más.

La misma jerarquía, especificada de forma fluida en el estilo root-clamp: cuerpo = 1rem, h2 = 1.75rem, h1 = 2.375rem, y un solo clamp de root deslizándose de 16→18px a lo largo de viewports 360→1280. Superficie de mantenimiento: tres tamaños en rem más cuatro parámetros fluidos — siete números en un solo contexto, sin media queries. El h1 se renderiza a 38px en el extremo estrecho, ≈40,4px en el rango medio, 42,75px en el extremo ancho.

Mira cómo se desliza esta jerarquía en Scale Composer — el simulador de viewport del modo fluido te deja arrastrar el ancho simulado a lo largo del rango y ver cada nivel moverse sobre la única pendiente compartida.

Un asterisco honesto: estas dos especificaciones están cerca, pero no son el mismo diseño. La versión por breakpoints aplana la jerarquía móvil (h1 a 1,75× el cuerpo); la versión fluida mantiene 2,375× en cada ancho. Si la jerarquía móvil más plana importa para tu contenido, el sistema fluido necesita una anulación por nivel encima — lo cual devuelve parte de su simplicidad. Cuenta ese costo honestamente en lugar de pretender que los siete números compran todo lo que compraban los once.

¿Qué envía en realidad la mayoría de los productos?

Un híbrido: tipografía fluida dentro de un layout escalonado. Las columnas, las barras laterales y la navegación quieren estados discretos — un layout de tres columnas no se degrada de forma continua, se reorganiza — así que el layout conserva sus breakpoints. El texto dentro de esas columnas no tiene tal restricción, así que se desliza. Los dos sistemas son independientes y componen con limpieza: el layout salta, la tipografía no, y ninguno necesita saber del otro. Los equipos que necesitan cambios de jerarquía por nivel los añaden como anulaciones en los breakpoints ya existentes del layout — excepciones escalonadas sobre una base fluida, en lugar de un sistema totalmente escalonado.

¿Cuál deberías elegir?

• Sitios de contenido y marketing: fluida. Lectura larga, un amplio abanico de dispositivos, y una jerarquía cuya forma puede mantenerse constante — la suavidad es pura ganancia y la cuenta de parámetros se mantiene diminuta.
• UI de aplicación densa: breakpoints — o nada de escalado. Los dashboards y las herramientas viven en rangos de ancho estrechos y predecibles donde la incomodidad de los tamaños intermedios apenas existe, y la testabilidad gana: “el encabezado de la tabla es de 13px” es una especificación que puedes exigir a alguien.
• Sistemas que sirven a ambos: tokens fluidos con anulaciones por nivel. Una base fluida, excepciones escalonadas donde un nivel necesita genuinamente una jerarquía distinta.

Y el costo de testing, dicho con claridad: fluido significa que no hay un conjunto finito de anchos en los que el sistema esté completamente verificado. En la práctica pruebas los extremos, un ancho de rango medio, y los anchos donde la tipografía deslizante se encuentra con un salto de layout — pero “en la práctica” está haciendo un trabajo en esa frase que las tres capturas de un sistema por breakpoints nunca necesitan.

Siente la diferencia en un solo arrastre

Toda la comparación se comprime en un único gesto: carga la misma escala con el modo fluido desactivado, lee los tamaños fijos, luego activa el interruptor a fluido y arrastra el simulador de viewport a lo largo del rango. La escalera y el deslizamiento coinciden en los extremos — todo lo que compara esta guía vive en lo que pasa entre ellos.