Tipografía fluida y adaptable con funciones de CSS de Baseline

Miriam Suzanne

Publicado el 16 de diciembre de 2025

El diseño web adaptable es un enfoque para crear sitios web que se vean bien y funcionen correctamente en una variedad de navegadores, dimensiones de viewport, dispositivos y preferencias del usuario. Cuando se aplica a la tipografía, la principal preocupación suele ser ajustar font-size según el ancho del navegador, lo que también puede tener implicaciones para los valores de espaciado, como line-height y margin.

Como diseñadores, tiene sentido pensar en el espacio disponible en el navegador y ajustar la tipografía en consecuencia. También es importante recordar que los diferentes usuarios tendrán diferentes necesidades de font-size en una variedad de dispositivos, según las circunstancias personales que estén fuera de tu alcance o conocimiento. Por lo tanto, es peligroso hacer cualquier cosa que le quite al usuario el control del resultado final. Existen dos entradas principales que las personas pueden usar para influir en el tamaño de la fuente mientras navegan por la Web:

• Proporcionar una preferencia font-size predeterminada en todos los sitios web
• Acercar o alejar el zoom en cada sitio

El objetivo de esta demostración es hacer que la tipografía responda tanto al tamaño del viewport del navegador como a las entradas del usuario. Sin embargo, es importante comprender que cuanto más responda tu tipografía al viewport, menos responderá a las preferencias del usuario. Si vas a implementar la tipografía adaptable, es importante que lo hagas con cuidado y que pruebes que los resultados sigan siendo accesibles.

Nota: Esta demostración también está disponible en GitHub.

Negociar un font-size básico en función de las preferencias del usuario

El primer paso para definir cualquier tipografía en línea es negociar un tamaño de fuente inicial según la preferencia de font-size del usuario. Se usará para la mayoría del texto de la página y como base para otros tamaños de fuente, como los encabezados. La opción más sencilla aquí es darle al usuario control total con 1em, sin ningún ajuste. Cuando no estableces ningún otro valor de font-size, 1em hace referencia a la preferencia del usuario. En el otro extremo del espectro, establecer un font-size en píxeles o en otras unidades absolutas (e incluso en unidades relativas al viewport) anulará por completo la configuración del usuario, lo que se debe evitar.

Sin embargo, los diferentes casos de uso requieren diferentes tipografías. Un artículo puede ser más fácil de leer con texto grande, mientras que los sitios con muchos datos pueden requerir un diseño más compacto con texto más pequeño. En cualquier caso, es posible que desees sugerir un valor predeterminado que se ajuste al diseño y, al mismo tiempo, permitir que el usuario ajuste el resultado según su situación particular.

Opción 1: Calcula un multiplicador en función de las suposiciones

Una solución común es definir un font-size ajustado en unidades de em o %, en relación con el font-size predeterminado del usuario. En general, este enfoque comienza con la suposición de que los navegadores proporcionan un valor predeterminado de 16px y que la mayoría de los usuarios dejarán ese valor predeterminado. Si crees que un tamaño de fuente de 20px funcionará mejor en tu sitio, un font-size de 1.25em o 125% suele dar el resultado que deseas:

html {
  /* 20px preferred, 16px expected: 20/16 = 1.25 */
  font-size: 1.25em;
}

También puedes usar una función calc() aquí para mostrar las operaciones matemáticas, pero debes saber cuál es la ecuación: el tamaño objetivo dividido por el tamaño esperado, multiplicado por 1em:

html {
  font-size: calc(20 / 16 * 1em);
}

Los usuarios con una preferencia mayor o menor tendrán cierta capacidad para influir en el resultado, ya que tu valor predeterminado ahora es relativo al suyo (1.25 veces su preferencia en este caso). Sin embargo, puede ser extraño si tanto tú como el usuario solicitan valores predeterminados de 20px y el resultado es 25px (sus valores predeterminados ajustados por 1.25 nuevamente), un tamaño que nadie solicitó.

Opción 2: Deja que clamp() haga el trabajo

Un enfoque más matizado implica el uso de funciones de comparación de CSS, sin necesidad de realizar cálculos. En lugar de suponer que 1 em es igual a 16px y realizar conversiones poco confiables de px a em, puedes considerar que 1em es una variable que hace referencia a la preferencia del usuario. Sin importar el valor de píxel que represente 1em, un font-size de max(1em, 20px) siempre devolverá el valor más grande entre tu preferencia de diseño (20px) y la preferencia del usuario (1em). Esto permite que el usuario elija tamaños de fuente más grandes, pero no más pequeños.

Si cambias a una función clamp(), puedes permitir que el usuario ajuste el tamaño en ambas direcciones cuando su tamaño preferido se aleje demasiado del valor predeterminado que elegiste. Por ejemplo, un font-size de clamp(1em, 20px, 1.25em) se establecerá de forma predeterminada en 20px siempre que sea mayor que el valor predeterminado del usuario, pero no más del 125% de su valor predeterminado.

Esto permite que tu diseño tenga prioridad cuando esté cerca de la preferencia del usuario, pero el usuario sigue teniendo prioridad cuando su preferencia está fuera del rango especificado. No se incluyen cálculos de conversión, no se hacen suposiciones sobre el tamaño de preferencia del usuario ni se multiplican los valores del diseñador y del usuario.

Si estableces esto como el font-size raíz en el elemento html, ahora puedes hacer referencia a 1rem en cualquier parte del sitio, como el tamaño base negociado.

Cómo agregar capacidad de respuesta

Para que este font-size responda al viewport, una opción sería agregar puntos de interrupción de consultas de medios (o de contenedores). Por ejemplo, podrías cambiar el valor sujetado según el tamaño de la pantalla:

html {
  font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
  @media (width > 30em) { --base-font-size: 18px; }
  @media (width > 45em) { --base-font-size: 20px; }
}

La otra opción es agregar unidades de viewport o de contenedor al valor base estático:

html {
  font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}

Las unidades vw (ancho del viewport) o vi (tamaño intercalado del viewport) representan el 1% del viewport total, es decir, la parte del navegador que renderiza tu sitio. Del mismo modo, las unidades cqw y cqi representan el 1% de un contenedor de tamaño intercalado en la página. Consulta la demostración de unidades y consultas de contenedores para obtener más detalles.

Este enfoque a menudo se conoce como tipografía fluida, ya que el cambio en font-size es constante en un rango de anchos de viewport, en lugar de saltar de un valor a otro en los puntos de interrupción de medios o contenedores. Sin embargo, no te distraigas con la fluidez de la transición, ya que esa distinción solo se ve en las pruebas, si ajustas el tamaño de la ventana de forma fluida. Los usuarios rara vez ven ese efecto (si es que lo ven). Si bien los usuarios pueden cambiar el tamaño del navegador o el nivel de zoom con regularidad, tendrían que realizar esos ajustes de forma lenta y fluida para notar la diferencia entre un punto de interrupción y una unidad de viewport. Solo afecta la transición, no el resultado después del cambio de tamaño.

La principal ventaja del ajuste fluido del tamaño de la fuente es que elimina la necesidad de calcular o especificar puntos de interrupción de forma manual, ya que proporciona un resultado interpolado en cualquier tamaño determinado. Solo debes establecer el punto de partida (16px) y la tasa de cambio (0.25vw proporcionará un aumento de 0.25px en font-size por cada aumento de 100px en la ventana gráfica), y, posiblemente, los valores mínimo y máximo. Cuando la ventana gráfica tiene un ancho de 1000px, el font-size será 16px + 2.5px o 18.5px, pero el navegador se encarga por completo de ese cálculo. Este es el enfoque que se usa en la demostración, con unidades de cqi para mostrar la capacidad de respuesta basada en contenedores. Cuando se usa en el elemento raíz (html), en el que no hay un contenedor definido, las unidades cqi siguen haciendo referencia al tamaño del viewport.

Si prefieres pensar en términos del font-size especificado en un tamaño de viewport determinado, considera usar el enfoque más directo de la consulta de medios, que es un poco más claro. Las cosas se complican cuando intentas calcular las unidades de viewport en función de los puntos de interrupción previstos. Muchas personas lo hacen copiando y pegando valores de herramientas de terceros, pero el código resultante es mucho más difícil de entender o cambiar directamente. En general, con CSS, la mejor opción es la que expresa con mayor claridad tus intenciones.

Advertencia: Los cambios en el viewport no siempre significan lo mismo.

Si bien las consultas de medios y las unidades vi se aplican de diferentes maneras, ambos enfoques se basan en la misma medición de la ventana gráfica. Si la ventana gráfica tiene un ancho de 600px, 100vw será igual a 600px y se aplicarán los estilos dentro de la consulta de medios (width > 500px).

Pero, ¿qué significa que la ventana gráfica tenga un ancho de 600px? En realidad, un píxel no tiene un tamaño fijo con un solo significado en todas las situaciones. Si bien parece natural que un viewport con menos píxeles de ancho se encuentre en una pantalla más pequeña (como la de un teléfono) o en una ventana del navegador estrecha, esa no es una suposición confiable. De hecho, acercar la imagen y reducir la ventana del navegador tendrán el mismo impacto en el ancho del viewport medido. Una acción (zoom) cambia el tamaño de un píxel, mientras que la otra (cambio de tamaño) cambia el tamaño del navegador en sí, pero ambas cambian la cantidad de píxeles a lo ancho del navegador. Lo que obtenemos de la medición del viewport es una relación entre el tamaño actual en píxeles y la ventana del navegador actual.

Para el usuario, hacer zoom y cambiar el tamaño tienen propósitos muy diferentes. Un usuario que cambia el nivel de zoom intenta agrandar o achicar el contenido de la página, pero un usuario que cambia el tamaño del navegador solo administra el espacio en diferentes pantallas. Aunque la intención del usuario es diferente, el resultado en las mediciones de CSS es el mismo. A medida que la ventana se hace más pequeña o el píxel se hace más grande, hay menos píxeles a lo ancho del navegador.

Esa desconexión hace que la tipografía adaptable no sea confiable. Si el texto está configurado para cambiar de tamaño solo en función de un viewport o contenedor, el zoom del usuario no tendrá ningún efecto.

Si cambias el valor de la unidad relativa al viewport a 1vw o 100vw, cambiará la relación exacta entre el tamaño de la fuente y el viewport. Una fuente 1vw crecerá 1px por cada 100px de tamaño del viewport, mientras que una fuente 100vw tendrá exactamente el mismo tamaño que el viewport. Puedes cambiar ese valor para que la fuente crezca más lenta o más rápido en relación con el navegador. Sin embargo, cualquier valor relativo al viewport permanecerá constante a medida que el usuario acerque o aleje la imagen, y no responderá en absoluto a los controles del usuario.

Del mismo modo, ninguna de las cuentas 1vw ni 100vw tiene en cuenta el valor predeterminado del usuario font-size.

Usar unidades relativas al viewport o al contenedor por sí solas para font-size siempre es hostil para el usuario. Cuando un font-size responde completamente a su contenedor, no puede responder también a los valores predeterminados o ajustes del usuario. Incluso con las mejores intenciones y medidas de seguridad, se debe evitar quitarles a los usuarios ese control final de font-size. No solo es una mala experiencia del usuario, sino que también puede incumplir las instrucciones de accesibilidad que, a menudo, son obligatorias por ley. Específicamente, la sección 1.4.4 de los Lineamientos sobre accesibilidad al contenido web requiere que "el texto se pueda redimensionar sin tecnología de asistencia hasta un 200%".

Cómo garantizar que los valores de font-size respondan al zoom

Para garantizar que un font-size relativo al viewport responda al zoom, el valor relativo al viewport debe aplicarse como un ajuste a algún otro valor. Esto es posible en CSS con la función calc() o cualquier otra función matemática que acepte cálculos, como min(), max() y clamp(). Un font-size de calc(16px + 1vw) se basa tanto en el tamaño del viewport como en el tamaño actual (relativo al zoom) de un píxel. Si bien la unidad vw no se verá afectada por el zoom, sí lo hará el valor base.

El resultado es un font-size que responde tanto al tamaño del viewport como a la configuración de zoom del usuario. Si el usuario acerca la imagen a 200%, el valor base se renderizará dos veces más grande (32px), mientras que el valor adaptable permanecerá sin cambios. Un viewport de 1000px inicialmente te daría un font-size de 16px + 10px = 26px, pero con un zoom de 200%, el tamaño de la fuente solo crecería a 42px, un poco más de 160%. Esto puede no parecer un problema extremo, pero cuanto más se base tu font-size en la ventana gráfica, menos efectivo será el zoom.

En pantallas pequeñas, el font-size provendrá principalmente del valor de píxel base y responderá bien al zoom. Sin embargo, en pantallas más grandes, el tamaño de la ventana gráfica se convierte en una fracción mayor del tamaño de la fuente renderizada, lo que hace que el zoom sea menos efectivo. Esto se vuelve particularmente peligroso en el punto en el que el zoom del 500% (el máximo en la mayoría de los navegadores) ya no puede proporcionar el aumento del 200% en el tamaño de la fuente que requiere el WCAG 1.4.4, pero incluso antes de ese punto, puede ser frustrante que el zoom se vuelva ineficaz.

El eje horizontal representa el tamaño del viewport, desde 0 hasta 2600px de ancho. El eje vertical de font-size también está en píxeles y muestra el resultado de calc(17px + 2.5vw). La línea de zoom 500% usa el mismo eje horizontal de ancho de la ventana gráfica, pero trata el eje vertical como un porcentaje.

En el borde izquierdo del gráfico (ancho del viewport 0), el zoom 500% es completamente efectivo. Sin embargo, esa efectividad disminuye rápidamente a medida que aumenta el tamaño del navegador, y las unidades de viewport (sin zoom) se convierten en un factor más importante en font-size. Cuando el navegador tiene un ancho de 2040px, el zoom máximo de 500% solo puede lograr un aumento de 200% en el tamaño de la fuente. Después de ese punto, ya no es posible el 200% de zoom de fuente efectivo.

Si mueves este cálculo a una función clamp(), con valores mínimos y máximos, puedes aplicar límites que garanticen texto con capacidad de zoom. Según Maxwell Barvian:

Si el tamaño de fuente máximo es menor o igual que 2.5 veces el tamaño de fuente mínimo, el texto siempre aprobará el criterio de conformidad 1.4.4 de las WCAG, al menos en todos los navegadores modernos.

Dado que las consultas de @media y @container se basan en las mismas medidas que las unidades de vw y cqw, se aplica la misma lógica cuando se usa un breakpoint para cambiar el tamaño de la fuente. Cuando el aumento de tamaño es demasiado drástico, el zoom deja de ser eficaz. Puedes experimentar con la forma en que interactúan estos valores en la siguiente visualización:

Cómo garantizar que los valores de font-size respondan a los valores predeterminados del usuario

Sin embargo, calc(16px + 1vw) aún no responde a la configuración de fuente predeterminada del usuario. Para lograrlo, puedes establecer una base (o valores mínimos y máximos) con unidades de em o rem en lugar de px. Si juntas todo, obtendrás un resultado familiar que coincide con la demostración vinculada:

html {
  font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}

Ten en cuenta lo siguiente:

• Tanto el mínimo como el máximo usan unidades em, que se basan en la preferencia del usuario (y responden al zoom).
• El valor vw adicional se mantiene al mínimo para que el zoom no se vea demasiado afectado.
• El tamaño máximo (1.125em) es muy inferior a 2.5 veces el mínimo (1em), lo que garantiza que siempre sea posible un valor de font-size efectivo de 200%.

Escalas tipográficas con pow()

La mayoría de los diseños usan más de un tamaño de fuente. Una escala tipográfica describe la relación entre varios tamaños de fuente. Esto se puede expresar como un tamaño base y una serie de multiplicadores para calcular los demás tamaños. CSS proporciona una escala tipográfica integrada relativa a la palabra clave medium, que hace referencia a la preferencia de tamaño de fuente del usuario, o un valor predeterminado de 16px. La escala de palabras clave completa es la siguiente:

• xx-small: 3/5 (0.6)
• x-small: 3/4 (0.75)
• small: 8/9 (0.89)
• medium: 1 (el tamaño base por el que se multiplican los demás)
• large: 6/5 (1.2)
• x-large: 3/2 (1.5)
• xx-large: 2/1 (2)
• xxx-large: 3/1 (3)

Esta escala es relativa al valor predeterminado del usuario en lugar de la font-size raíz, por lo que no funciona tan bien una vez que cambias la font-size raíz de tu sitio. La mayoría de los autores terminan recreando una escala de escritura similar con propiedades personalizadas, a veces usando los mismos nombres de tallas de camisetas y, otras veces, prefiriendo una serie de pasos hacia arriba y hacia abajo en una escala matemática. Existen muchas herramientas de terceros para generar estas escalas basadas en proporciones comunes, en su mayoría tomadas de una escala musical occidental:

html {
  /* musical ratios */
  --minor-second: calc(16/15);
  --major-second: calc(9/8);
  --minor-third: calc(6/5);
  --major-third: calc(5/4);
  --perfect-fourth: calc(4/3);
  --augmented-fourth: sqrt(2);
  --perfect-fifth: calc(3/2);
  --major-sixth: calc(5/3);

  /* the golden ratio*/
  --golden-ratio: calc((1 + sqrt(5)) / 2);
}

Sin embargo, no necesitas herramientas externas para crear tu propia escala en CSS. La nueva función pow() puede generar tu escala con 1rem como tu propio tamaño base.

html {
  /* choose a ratio */
  --scale: 1.2;

  /* generate the scale using pow() */
  --xx-small: calc(1rem * pow(var(--scale), -0.5));
  --x-small: calc(1rem * pow(var(--scale), -0.25));
  --small: calc(1rem * pow(var(--scale), -0.125));
  --medium: 1rem;
  --large: calc(1rem * pow(var(--scale), 1));
  --x-large: calc(1rem * pow(var(--scale), 2));
  --xx-large: calc(1rem * pow(var(--scale), 3));
  --xxx-large: calc(1rem * pow(var(--scale), 4));

  /* change the ratio for different viewport sizes */
  @media (width > 50em) {
    --scale: var(--perfect-fourth);
  }
}

No es necesario que uses pasos enteros para mantener la coherencia de la escala. De hecho, la escala de tipografía 12pt común usa aproximadamente 5 fracciones por paso. Si bien los tamaños grandes aquí usan pasos completos en la escala, los tamaños pequeños usan fracciones para escalar a un ritmo más lento.

Las funciones y mixins de CSS permiten condensar aún más esa lógica, mientras que otras herramientas integradas, como progress(), facilitan la creación de escalas que se ajustan de forma fluida de un valor a otro. Sin embargo, esas funciones no se incluyen en esta demostración.

Cómo responder al tamaño de los contenedores en la página

Puedes hacer que todos estos cálculos funcionen en las consultas de contenedores usando la unidad cqi en lugar de vw o vi, pero también ayuda a dejar el font-size del usuario en el elemento html, de modo que cada contenedor de composición tipográfica pueda hacer referencia a esa preferencia del usuario como 1rem. En la demostración, verás que toda la escala de escritura se aplica al elemento body en lugar del elemento raíz html para la escritura global y, luego, se restablece según el tamaño del contenedor para cada elemento con el atributo type-set.

Esto siempre es una compensación con los tamaños de fuente relativos al contenedor. Logras un tamaño de fuente más fluido para cada elemento en contexto, pero a expensas de la coherencia en toda la página. La importancia de cada uno dependerá de los detalles de tu caso de uso. Y recuerda que la tipografía fluida en sí misma es una compensación, lo que hace que los controles del usuario, como el zoom, sean menos efectivos.

Si bien la tipografía adaptable y las escalas tipográficas son herramientas excelentes para los diseñadores, no es necesario complicar las cosas si no es necesario. La escala de escritura integrada y predeterminada por el usuario también es una excelente opción. Sin embargo, si eliges la tipografía adaptable (o fluida), asegúrate de probar cómo se comportan los resultados en relación con los valores predeterminados y la configuración de zoom de los diferentes usuarios. ¡Que lo disfrutes!