Aplicar tipografía fluida en un tema de WordPress usando el theme.json

Descubre en este tutorial cómo utilizar tipografía fluida en un tema de WordPress usando el fichero theme.json.

Una de las cosas más complejas como implementador o desarrollador web es tener que lidiar con un número casi infinito de tamaño de pantallas (y sus respectivas resoluciones). Por esta razón, hasta hace poco nos veíamos obligados a usar media queries para que el tamaño de la fuente se ajustara a la pantalla.

Pero eso puede cambiar gracias a la tipografía fluida. Esta tiene la ventaja de que se adapta al tamaño de la pantalla (viewport) de forma dinámica.

Lo que permite que funcione esta «magia» es la función de CSS clamp(), que realiza unos cálculos matemáticos usando un mínimo y un máximo. Esta función ya lleva un tiempo entre nosotros pero ahora ya la soportan todos los principales navegadores (+94%).

Gracias este soporte tan amplio y al uso del fichero theme.json, WordPress 6.1 ha incluido en el núcleo una serie de instrucciones que nos van a facilitar muchísimo poder implementarlo en cualquier tema de WordPress.

Y sí, he dicho cualquier tema. Porque esta funcionalidad no está reservada a los temas de bloques sino que también se puede aplicar a cualquier tema clásico.

De hecho, a continuación puedes ver el resultado de aplicarlo a un tema clásico:

Vamos a ver cómo conseguirlo. 

Instrucciones para implementar tipografía fluida a un tema de WordPress

A. Añadir o modificar el fichero theme.json

En caso de que el tema no cuente con él, tienes que crear un fichero llamado theme.json y colocarlo en la raíz de tu tema.

Una vez que lo hayas hecho, añade el siguiente código :

Usando este snippet, añades los 4 tamaños a los ajustes de tipografía que se muestra en el editor.

Ha varios puntos a tener en cuenta:

• Tienes que activar la tipografía fluida dando el ajuste true al atributo fluid (dentro de tipografía).
• Tienes que definir diferentes propiedades:
  • "size": tamaño de la fuente
  • "fluid"(opcional):
    • "min": tamaño mínimo de la fuente
    • "max": tamaño máximo de la fuente
  • "slug": slug que se utilizará para crear la variable CSS.
  • "name" (opcional): nombre que aparecerá en el editor.

Lo interesante es que, con solo añadir un mínimo y máximo, el core de WordPress se encarga del resto para crear la tipografía. Como te comentaba al inicio, utiliza la función de CSS clamp(). Este es el resultado que obtienes al usar el código de arriba:

--wp--preset--font-size--small: clamp(0.9rem, 0.9rem + ((1vw - 0.48rem) * 0.577), 1.2rem);

--wp--preset--font-size--medium: clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3.3rem);

--wp--preset--font-size--neutral: 2.8rem;

--wp--preset--font-size--large: clamp(3.5625rem, 3.5625rem + ((1vw - 0.48rem) * 6.851), 7.125rem);

Como puedes observar, utiliza el slug para crear la variable de CSS --wp--preset--font-size--slug e inserta los valores máximos y mínimos en la función clamp().

Si en un tamaño se define la propiedad fluid como false, como en el caso de la «neutral» en este ejemplo, no se utiliza la función clamp() y se mostrará el mismo tamaño de fuente (2.8rem en el ejemplo) en todos los dispositivos.

Y en el caso de que no declares un mínimo y máximo (y no se haya definido la propiedad fluid como false), como en el tamaño «large», WordPress se encarga de hacer el cálculo usando el valor que indicas en "size". El resultado es una fuente que también se adapta al tamaño de pantalla.

Este solo es un ejemplo para que conozcas todas las posibilidades. Pero la idea es que lo ajustes a tus necesidades y crees los tamaños de fuente que quieras (con las propiedades que elijas).

B. Modificar el fichero theme.json

En caso de que tu tema ya cuente con un fichero theme.json puedes añadir la tipografía fluida de forma similar. Para ello, coloca el siguiente código a continuación de "typography": { hasta el cierre del mismo (}).

3. Interfaz en el editor de bloques

Una vez que hayas añadido estas líneas, bien sea añadiendo un nuevo fichero theme.json o modificando uno existente, verás que en la barra lateral del editor en la sección de tipografía puedes elegir entre los tamaños de fuente que has creado:

Una vez lo hayas hecho, verás cómo el texto se adapta de forma fluida al tamaño de la pantalla:

Conclusiones

Poder aprovechar la tipografía fluida en un tema de WordPress es más fácil que nunca. Con unas pocas líneas de código puedes elegir el tamaño mínimo y máximo de la fuente para que se adapte de forma dinámica según el tamaño de la pantalla.

Ya puedes dejar a un lado las media queries.

Además, puedes aplicarlo tanto a temas de bloques como a los temas de toda la vida.

¿Sugerencias para próximos snippets? Envíamelas con el formulario de contacto.

Todo ventajas de ser suscriptor.