Hacer que el texto se vea bien en todas las pantallas no es tan sencillo como parece. Durante mucho tiempo, los diseñadores web utilizaron puntos de ruptura (breakpoints) de media queries para cambiar el tamaño de las fuentes, pero este enfoque se vuelve rápidamente complicado a medida que aparecen más dispositivos y tamaños de pantalla.
A partir de WordPress 6.1 (publicado en noviembre de 2022), hay una forma mejor: la tipografía fluida. Ajusta automáticamente los tamaños de fuente definidos en tu archivo theme.json para que se escalen suavemente, independientemente de la anchura o altura de la pantalla.
Esta funcionalidad no sólo cambia el tamaño de la fuente, sino que también ajusta la altura de las líneas, el espaciado entre palabras e incluso el espacio en blanco, haciendo que tu diseño sea más coherente, legible y accesible en todos los dispositivos.
Este artículo explica cómo funciona la tipografía fluida, en qué se diferencia de los breakpoints tradicionales y cómo implementarla en WordPress utilizando theme.json y CSS.
Pero antes, veamos cómo gestionábamos la tipografía anteriormente y por qué la tipografía fluida supone una mejora tan importante.
Tipografía con breakpoints vs. tipografía fluida
Una buena forma de entender la tipografía fluida es compararla con su predecesora, la tipografía con breakpoints, que utiliza media queries que se dirigen a anchos de dispositivo específicos para el tamaño de la fuente.
Tipografía con breakpoints
Normalmente, los breakpoints son rangos específicos de anchura de la ventana gráfica, normalmente definidos en píxeles. Un enfoque común es establecer tres breakpoints principales que se dirigen a las pantallas de móviles, portátiles y ordenadores de sobremesa.
Estos son los ajustes típicos de breakpoints para portátiles en un archivo CSS:
@media (min-width: 48em) and (max-width: 74.9375em) {
body {
font-size: 1.125rem;
line-height: 1.6;
}
h1 {
font-size: 2rem;
}
}Aunque esto funciona, tiene un gran inconveniente: a medida que aparecen nuevos dispositivos y tamaños de pantalla, la gestión de todos estos breakpoints se vuelve rápidamente insostenible.
En el ejemplo del GIF anterior, a medida que la ventana gráfica se reduce, el texto cambia de tamaño a saltos desiguales. Este comportamiento «escalonado» a menudo provoca un escalado incómodo o impredecible, que no es ideal para una tipografía fluida y coherente.
Tipografía fluida
Con la introducción de la propiedad CSS clamp() en 2019, junto con las unidades de ventana gráfica (vw y vh), se hizo posible un escalado automático y y sin interrupciones.
Estas herramientas te permiten definir tamaños de fuente que escalan dinámicamente en función de las dimensiones de la ventana gráfica, lo que elimina la necesidad de múltiples breakpoints.
Aquí tienes un ejemplo para un tamaño de fuente medio utilizando clamp():
.has-medium-font-size {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}Más adelante veremos con más detalle cómo funciona clamp(), pero por ahora, piensa en ella como una fórmula que establece los tamaños de fuente mínimo, preferido y máximo, asegurando que el texto se escala suavemente a través de las pantallas.
En este GIF, a medida que la ventana se estrecha, el texto se ajusta con fluidez. No hay saltos ni cambios bruscos de tamaño.
Este comportamiento suave es lo que hace que la tipografía fluida sea un gran avance respecto al diseño basado en breakpoints. En lugar de ajustar el texto por pasos, permite un escalado fluido que resulta natural en todos los dispositivos.
Pero el cambio de tamaño suave es sólo el principio. La tipografía fluida ofrece otras ventajas que facilitan la creación de diseños flexibles, coherentes y accesibles.
Argumentos a favor de la tipografía fluida
A medida que trabajes con tipografía fluida, se harán evidentes las siguientes ventajas.
Responsivo por defecto
El texto se escala automáticamente con la ventana gráfica, eliminando la necesidad de breakpoints. Tanto si tu sitio se visualiza en un teléfono, una tableta o un monitor ultra ancho, los tamaños de las fuentes se ajustan de forma natural sin CSS adicional.
Más fácil de mantener
Sin necesidad de múltiples media queries, tu código se mantiene sencillo y legible. Puedes definir los tamaños de fuente utilizando una sencilla escala «T-shirt», que va desde pequeño a extragrande, y aplicarlos de forma coherente en todo tu tema.
Diseño coherente
Asegúrate de que los tamaños de tus fuentes sean coherentes en todo el sitio, tanto globalmente como dentro de bloques individuales, según sea necesario. Define tu escala una vez, y fluirá sin problemas por todos los bloques, patrones y plantillas.
Accesibilidad y legibilidad mejoradas
Como la tipografía fluida se escala suavemente, el texto siempre aparece a un tamaño legible para cada dispositivo. Esto hace que tu contenido sea más accesible, especialmente para usuarios con preferencias visuales o niveles de zoom personalizados en el navegador.
Diseño preparado para el futuro
Como el tamaño del texto ya no está vinculado a breakpoints artificiales, la escala de tu tipografía está garantizada para funcionar con cualquier tamaño de pantalla y ventana gráfica futuros.
Control de la velocidad de escalado
La capacidad de controlar la velocidad a la que el texto crece o se encoge se establece mediante un valor preferido que cambia con la anchura de la ventana gráfica.
Compatibilidad con navegadores
La función clamp() es compatible con todos los navegadores modernos, incluidas las versiones actuales de Chrome, Edge, Firefox y Safari.
Sin embargo, si necesitas una cobertura del 100 %, te recomendamos incluir una solución alternativa para navegadores antiguos como Internet Explorer 11 y las versiones de Safari y Chrome anteriores a 2020.
A continuación te explicamos cómo hacerlo:
/* Fallback (for IE11 and other old browsers) */
li {
font-size: 1.25rem;
}
/* Preferred (modern browsers) */
li {
font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}Cómo funciona la tipografía fluida
En el corazón de la tipografía fluida hay tres ajustes: tamaño mínimo, tamaño máximo y un tamaño preferido, que es una escala deslizante entre los valores mínimo y máximo, determinada por la anchura de la ventana gráfica.
La función clamp() utiliza estos tres valores en una única declaración:
font-size: clamp(min, preferred, max);Esto garantiza que el texto nunca sea demasiado pequeño en pantallas pequeñas ni demasiado grande en pantallas anchas. Por ejemplo:
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);En este ejemplo, el tamaño de la fuente comienza en 1rem, crece suavemente a medida que se amplía la ventana gráfica y deja de aumentar en 1,25rem.
Cómo lo hace WordPress
WordPress hace el trabajo duro por ti. En lugar de calcular manualmente estos valores, puedes definir los tamaños de fuente directamente en theme.json.
Aquí tienes un ejemplo simplificado de cómo WordPress representa un tamaño de fuente en JSON:
{
"fluid": {
"min": "1rem",
"max": "1.25rem"
},
"name": "Medium",
"size": "1.125rem",
"slug": "medium"
}A partir de él, WordPress genera automáticamente el CSS:
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);Esto hace que la implementación de la tipografía fluida sea rápida, consistente y sin errores. Sólo tienes que definir tus valores una vez en theme.json, y WordPress se encarga de los cálculos.
Términos comunes
Antes de continuar, repasemos algunas unidades clave utilizadas en la tipografía fluida. Cada una de ellas tiene una escala relativa a otra.
| Unidad | Definición | Notas |
| em | Relativo al tamaño de fuente de su elemento padre. | Los tamaños se componen mediante anidamiento. |
| rem | Relativo al tamaño de fuente del elemento raíz (html). | Se escala de forma coherente en todo el sitio. |
| vw | 1% de la anchura de la ventana gráfica. | Se utiliza para el escalado basado en la anchura. |
| vh | 1% de la altura de la ventana. | Se utiliza para el escalado basado en la altura. |
Unas palabras sobre theme.json
theme.json está basado en datos, por lo que genera CSS automáticamente en lugar de requerir escritura manual.
Como era de esperar, el núcleo de WordPress incluye un archivo theme.json que establece las propiedades de base utilizadas por el propio archivo theme.json de un tema de bloque. Así es como WordPress implementa la tipografía fluida.
Al igual que con prácticamente todas las propiedades de estilo, éstas pueden cambiarse globalmente o por bloques utilizando un tema hijo, que recomendamos para todas las personalizaciones.
Si no estás familiarizado con theme.json, te instamos a que leas nuestro artículo «Trabajar con propiedades y pares clave-valor en theme.json»
Cómo utiliza WordPress la tipografía fluida en TT5 (Twenty Twenty Five)
Cuando el archivo theme.json de un tema de bloques incluye el ajuste "fluid": true, WordPress genera automáticamente reglas de tipografía fluida utilizando la función CSS clamp(). Esto se gestiona mediante un algoritmo incorporado que calcula un escalado suave para cada tamaño de fuente.
{
"settings": {
"typography": {
"fluid": true
}
}
}Si se omite "fluid", WordPress utiliza por defecto false, lo que significa que los tamaños de texto permanecen fijos y no se escalan fluidamente.
Con la tipografía fluida activada, TT5 define cinco tamaños de fuente preestablecidos. Cada uno incluye valores mínimos y máximos que WordPress utiliza para generar el CSS final mediante la función clamp().
| Nombre del Tamaño | Valores en Theme.json | Valores CSS generados (clamp) |
| pequeño | tamaño:0,875rem | clamp(0,875rem, 0,8125rem + 0,2vw, 1rem) |
| mediano | mín:1rem máx: 1,125rem |
clamp(1rem, 0,9375rem + 0,25vw, 1,125rem) |
| grande | mín:1,125rem máx: 1,375rem |
clamp(1,25rem, 1,125rem + 0,5vw, 1,5rem) |
| x-grande | mín:1,75rem máx: 2rem |
clamp(2,25rem, 1,75rem + 1,5vw, 3rem) |
| xx-grande | mín:2,15rem máx: 3rem |
clamp(3rem, 2,25rem + 2vw, 4rem) |
Ejemplos prácticos
Ahora que sabemos cómo TT5 gestiona la tipografía fluida por defecto, veamos algunos casos prácticos en los que podrías querer personalizarla o ampliarla.
Para estos ejemplos, utilizaremos un tema hijo de TT5 y, como siempre, asegúrate de que tus scripts están correctamente en cola.
Aumenta todos los tamaños de fuente en un 25%
Si tu público prefiere un texto más grande (por ejemplo, en sitios enfocados a la accesibilidad o a personas mayores), quizá quieras aumentar globalmente todos los tamaños de fuente.
Opción 1 — Utilizar theme.json
Aunque no existe una única opción para escalar todas las fuentes, puedes aumentar manualmente cada tamaño de fuente en un 25 %. Aquí tienes un ejemplo de configuración:
"typography": {
"fontSizes": [
{
"fluid": false,
"name": "Small",
"size": "1.09375rem",
"slug": "small"
},
{
"fluid": { "max": "1.40625rem", "min": "1.25rem" },
"name": "Medium",
"size": "1.25rem",
"slug": "medium"
},
{
"fluid": { "max": "1.71875rem", "min": "1.40625rem" },
"name": "Large",
"size": "1.725rem",
"slug": "large"
},
{
"fluid": { "max": "2.5rem", "min": "2.1875rem" },
"name": "Extra Large",
"size": "2.1875rem",
"slug": "x-large"
},
{
"fluid": { "max": "3.75rem", "min": "2.6875rem" },
"name": "Extra Extra Large",
"size": "2.6875rem",
"slug": "xx-large"
}
]
}Sigue el patrón de TT5: el tamaño pequeño permanece fijo, mientras que los demás tamaños se escalan suavemente.
En segundo plano, WordPress sigue calculando el valor preferido (fluido) entre cada mínimo y máximo.
Opción 2 — Usar style.css
Alternativamente, puedes escalar todo globalmente con una sola línea en tu hoja de estilos:
:root {
font-size: 125%;
}Esto aumenta el tamaño de la fuente raíz en un 25 %, escalando eficazmente todos los elementos que utilizan unidades de rem.
Tipografía fluida personalizada para un solo bloque
También puedes aplicar el tamaño fluido de forma selectiva.
Por ejemplo, para que todos los elementos de la lista (core/list) utilicen el tamaño mediano en lugar del grande predeterminado, añade lo siguiente a tu theme.json:
"styles": {
"blocks": {
"core/list": {
"typography": {
"fontSize": "var:preset|font-size|medium"
}
}
}
}El resultado es una jerarquía más limpia, en la que los elementos de lista muestran un texto ligeramente más pequeño que los párrafos.
Definir la tipografía fluida en style.css
Si trabajas con un tema clásico, definirás tus propios valores de clamp() directamente en style.css.
Por ejemplo, así es como podrías aumentar los elementos de la lista en un 125 % del tamaño de fuente grande:
li {
font-size: clamp(1.725rem, 1.725rem + 0.17vw, 1.71875rem) !important;
}
Esto muestra un tamaño de fuente mayor para los elementos de la lista establecidos en el archivo CSS. Como era de esperar, si trabajas con un tema clásico, tendrás que utilizar la propiedad clamp() en tu archivo styles.css.
Espaciado fluido
El tipo de letra no es más que un factor a tener en cuenta cuando se utiliza tipografía fluida.
Las dimensiones del relleno, el margen y los espacios entre bloques (el espacio dentro de un bloque de grupo) también pueden escalarse suavemente utilizando los mismos conceptos expuestos con la tipografía fluida.
TT5 utiliza estos ajustes para establecer los tamaños del espacio.
"spacing": {
"defaultSpacingSizes": false,
"spacingSizes": [
{ "name": "Tiny", "size": "10px", "slug": "20" },
{ "name": "X-Small", "size": "20px", "slug": "30" },
{ "name": "Small", "size": "30px", "slug": "40" },
{ "name": "Regular", "size": "clamp(30px, 5vw, 50px)", "slug": "50" },
{ "name": "Large", "size": "clamp(30px, 7vw, 70px)", "slug": "60" },
{ "name": "X-Large", "size": "clamp(50px, 7vw, 90px)", "slug": "70" },
{ "name": "XX-Large", "size": "clamp(70px, 10vw, 140px)", "slug": "80" }
]
}Los tres primeros tamaños (tiny, x-small, small) son fijos, mientras que los mayores se escalan fluidamente utilizando clamp().
Esto garantiza que no sólo tu texto, sino también el espaciado de tu diseño, se adapte elegantemente a los distintos tamaños de pantalla.
Resumen
El breakpoint y la tipografía fluida tienen propósitos diferentes. Cuando se utilizan juntas, crean diseños compatibles con el futuro que se escalan suavemente a través de las pantallas, proporcionando experiencias coherentes y legibles para todos.
Si prefieres no hacer los cálculos a mano, varias herramientas gratuitas pueden ayudarte a afinar y visualizar tus valores:
Con ellas resulta sencillo generar valores de clamp() que se ajusten a la escala de tu diseño, especialmente útiles para el desarrollo de temas clásicos.
¿Listo para verlo en producción? Aloja tu sitio WordPress en Kinsta para obtener TTFB rápido, CDN integrado y edge caching, para que tu tipografía fluida se vea (y cargue) genial en todas partes. Empieza gratis tu primer mes.
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
