Recibe el boletín informativo, todos los lunes, y descarga nuestros ebooks exclusivos.

Tipografía fluida en WordPress 6.1 (cómo probarlo)

TIPOGRAFIA-FLUIDA-WORDPRESS-6-1-1024x576 Tipografía fluida en WordPress 6.1 (cómo probarlo)

En este post se expone cómo puedes probar la tipografía fluida en WordPress 6.1.

¿Qué es la tipografía fluida?

La tipografía fluida permite que los tamaños de fuente se adapten a los cambios en el tamaño de la pantalla, por ejemplo, haciéndose más grandes a medida que aumenta el ancho de la ventana gráfica, o más pequeños a medida que disminuye (vía Fluid font sizes in WordPress 6.1).

Esta función se introdujo en el plugin Gutenberg en su versión 13.8 y ahora en la versión 6.1 de WordPress ya está operativa aunque sigue evolucionando. En la última versión del plugin Gutenberg (14.4) -a fecha de publicación de este post-, se han introducido mejoras relacionadas con la automatización de la conversión a valores fluidos de los tamaños de fuente personalizados.

Los desarrolladores de temas que deseen optar por la tipografía fluida solo necesitan configurar typography.fluid para que sea true en theme.json y agregar fluid a cada uno de los settings.typography.fontSizes con valores min y max .

WP Tavern

El plugin Gutenberg va por delante, en funcionalidades, del core de WordPress.

Funcionamiento, antes de WordPress 6.1

En el siguiente vídeo se muestra el funcionamiento de la tipografía fluida en WordPress 6.0.3 y Gutenberg 14.3:

Fuente del vídeo: Github.com/wordpress

En ese escenario, la tipografía fluida funciona para valores predeterminados (en el archivo theme.json) pero no para tamaños de fuente personalizadas, siempre y cuando la tipografía fluida esté habilitada: los valores de tamaño de fuente establecidos por el usuario o de otro modo no son fluidos y se aplican a los elementos de destino exactamente como se representan en los campos de valor (vía Fluid typography: custom font sizes should be converted to fluid font sizes values).

Funcionamiento a partir de WordPress 6.1 y cómo probarlo

El funcionamiento de la tipografía fluida requiere tener WordPress 6.1 o el plugin Gutenberg a partir de 13.8 (mejor 14.4). Y, además, tenerlo habilitado en el archivo theme.json. Los tamaños de fuente predeterminados es preciso que estén también configurados en dicho archivo.

Es recomendable también un tema de bloques para poder así mismo probarlo en la edición completa del sitio.

El funcionamiento es semejante al que se mostró en el vídeo anterior pero con la diferencia de que los valores personalizados de los tamaños de fuente también se comportarán de manera fluida.

Para probarlo, te recomiendo un entorno de test con una herramienta como Local: Cómo crear una web de pruebas en local (Mac, PC o Linux).

Haz una copia del archivo theme.json de tu tema activo, edita el original y sustituye todo su contenido por el siguiente modelo:

{
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		},
		"typography": {
			"fluid": true,
			"fontSizes": [
				{
					"size": ".9rem",
					"fluid": {
						"min": "0.9rem",
						"max": "1.1"
					},
					"slug": "small",
					"name": "Small"
				},
				{
					"size": "1rem",
					"fluid": {
						"min": "1rem",
						"max": "1.3rem"
					},
					"slug": "medium",
					"name": "Medium"
				},
				{
					"size": "1.75rem",
					"slug": "large",
					"name": "Large"
				},
				{
					"size": "2.25rem",
					"slug": "x-large",
					"name": "Extra large"
				},
				{
					"size": "3.5rem",
					"slug": "huge",
					"name": "Huge"
				},
				{
					"size": "4.25rem",
					"slug": "gigantic",
					"name": "Gigantic"
				},
				{
					"size": "5.75rem",
					"slug": "colossal",
					"name": "Colossal"
				}
			]
		}
	}
}

Naturalmente, el diseño cambiará radicalmente pero no importa porque solo necesitamos fijarnos en la tipografía.

  • Selecciona un bloque de encabezado, por ejemplo, y elige un tamaño de fuente predeterminado: por ejemplo, Gigantic (4,25 rem). Comprueba estrechando la ventana del navegador que el tamaño del título se va reduciendo.
  • Selecciona el mismo bloque de encabezado, haz clic en el botón de personalización de tamaños de fuente y escribe por ejemplo 4,5 (rem) u otro valor que no esté entre los predeterminados. Comprueba estrechando la ventana del navegador que el tamaño del título también se va reduciendo. Esto no sucedía antes de WordPress 6.1 o antes de Gutenberg 14.4.

Cuando termines la prueba, recupera el contenido del archivo theme.json original con el guardado en la copia.

El tema predeterminado de WordPress 6.1, Twenty Twenty Three, tiene habilitada la tipografía fluida por lo que también puedes comprobar el funcionamiento activándolo.

Relacionado

Conclusiones

La tipografía fluida en WordPress 6.1 (o Gutenberg 14.4) favorece la experiencia visual asociado a los tamaños de fuente, adaptándolos al tamaño de la ventana en dispositivos móviles.

Y aún hay más…

Cómo se hace un sitio web

Una revisión a vista de pájaro de todo lo necesario para crear un sitio web de WordPress.

Recursos

La lista de recursos recomendada en Blogpocket.

Mi lista de plugins

La lista de plugins de WordPress recomendada en Blogpocket

COVER-UN-BLOG-DE-21-ANOS-1024x944 Tipografía fluida en WordPress 6.1 (cómo probarlo)

Suscríbete a la newsletter

En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.

Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.

2 respuestas a «Tipografía fluida en WordPress 6.1 (cómo probarlo)»

  1. Walter

    Hola.
    Muy interesante la información.
    Quisiera saber si puedo implementar la tipografía fluída si tengo instalado el editor clásico de WordPress.

    1. Hola Walter. La tipografía fluida es una nueva característica de WordPress 6.1. Al ser una funcionalidad que se configura en el archivo theme.json, en principio podría funcionar aunque la clave está en el tipo de tema que uses. Si no tienes un tema de bloques es posible que no funcione, yo no he probado esa opción y habría que investigarlo. El tipo de editor no creo que sea el problema. Pero para saber a ciencia cierta si funciona o no, con tu tema, sigue las instrucciones del post. En principio, da igual si usas el editor clásico, con tal de que tengas WordPress 6.1 o el plugin Gutenberg en su última versión activado.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido