Para conseguir que el tamaño de la tipografía se adapte al dispositivo, antes usábamos media queries y declarábamos distintos tamaños de fuente según el ancho de la pantalla del dispositivo. Actualmente, existe una manera más eficaz y más fácil de implementar: la tipografía fluida. Veremos en qué consiste, qué ventajas tiene y cómo se implementa en WordPress. Es una charla-taller en la que explicaré, paso a paso y sin perder a nadie por el camino, el código CSS que hay que utilizar (la función Clamp). Conoceremos herramientas que nos ayudan a escribir el código correctamente (la función Clamp es difícil de entender a simple vista), y veremos cómo se puede hacer fácilmente con WordPress 6.1. Además, aprenderemos cómo podemos contribuir a mejorar el proyecto en GitHub.

1. Tipografía fluida
en WordPress
Ana Cirujano
#WCVLC22

2. Ana Cirujano
#WCVLC22
Diseñadora de negocio digital
Co-organizadora de WordPress Torrelodones
(Meetup y WordCamp 2023)
Embajadora de Piensa Solutions
Podcaster en Un billete a Chattanooga
y profe de diseño en 3ymedia School
Twitter: @acirujano

3. Tipografía fluida
#WCVLC22

4. #WCVLC22
Foto: awwwards.com

5. #WCVLC22

6. #WCVLC22

7. #WCVLC22

8. #WCVLC22

9. #WCVLC22

10. #WCVLC22

11. #WCVLC22
Tipografía fluida

12. #WCVLC22
Vídeo de @greenshady

13. #WCVLC22
La función clamp()

14. #WCVLC22

15. #WCVLC22

16. #WCVLC22

17. #WCVLC22
Tipografía fluida
en WordPress

18. Requisitos
1) Tiene que estar habilitado Fluid Typography
en el archivo theme.json del tema
2) Tiene que estar instalada la versión 6.1
de WordPress o el plugin Gutenberg.
#WCVLC22

19. #WCVLC22

20. WordPress 6.1
#WCVLC22
● Opción 1: Instala ya activa el plugin WordPress Beta Tester.
● Opción 2: Descarga directamente aquí la versión RC2 (zip).
● Opción 3: Usa el siguiente comando WP-CLI:
wp core update --version=6.1-RC2
● Opción 4: Espera a que salga la versión definitiva el día
1 de noviembre de 2022.

21. #WCVLC22

22. #WCVLC22
Si tienes curiosidad por saber qué cálculos se hacen, están en el proyecto Gutenberg de GitHub.
theme.json en WordPress 6.1

23. Aplicar tipografía fluida en el editor
#WCVLC22

24. ● No es configurable:
○ Anchos mínimo y máximo de la ventana.
○ Cálculo de tamaños de fuente mínimos y máximos
en ausencia de valores específicos.
○ La ratio de la escala.
● Falta incluir el line-height
y el letter-spacing.
#WCVLC22
Limitaciones

25. #WCVLC22

26. Moltes gràcies
#WCVLC22