La tipografía fluida es una forma elegante de "describir las propiedades de la fuente, como el tamaño o la altura de la línea, que se escalan de manera fluida según el tamaño de la ventana gráfica". Es también conocido por otros nombres, como tipografía receptiva, tipo flexible, tipo fluido, tipografía de tamaño de ventana gráfica, tipografía fluida e incluso texto de visualización receptivo.
Aquí se presenta una ejemplo de tipografía fluida que puedes tocar en vivo (cortesía de Documentación MDN). CSS-Tricks ha cubierto la tipografía fluida extensivamente también. Pero el punto aquí no es presentarte la tipografía fluida, sino cómo usarla. Más específicamente, quiero mostrarle cómo implementar una tipografía fluida en WordPress 6.1, que recientemente introdujo una función de tipo fluido directamente en el Editor de bloques de WordPress.
Abre tu style.css archivo, bofetada en una regla de estilo con fantasía clamp()-ing en el font-size propiedad, y bueno para ir, ¿verdad? Claro, eso le dará un texto fluido, pero ¿obtener los controles del Editor de bloques que le permitan aplicar el tipo fluido en cualquier parte de su sitio de WordPress? Eso requiere un enfoque diferente en estos días bloqueados.
Soporte de tipografía fluida en Gutenberg
Algunos desarrolladores de temas de WordPress han estado usando el clamp() función para definir un fluido font-size, en sus temas de WordPress, incluso en temas de "bloque" más nuevos como Veintidós, veinte veintitrés, Y otros.
Pero el complemento de Gutenberg, el que contiene desarrollo experimental para las funciones de WordPress Block y Site Editor, introdujo soporte para tipografía fluida. a partir de la versión 13.8. Eso abrió la puerta para implementar a nivel de tema para que el tipo fluido se pueda aplicar a elementos y bloques específicos directamente en el Editor de bloques. CSS-Tricks incluso recibió un reconocimiento en el Solicitud de extracción que fusionó la función.
Ese trabajo se convirtió en parte de WordPress Core en WordPress 6.1. Rich Tabor, uno de los primeros defensores de la tipografía fluida en el Editor de bloques dice:
[La tipografía fluida] también es parte de hacer que WordPress sea más poderoso, aunque no más complicado (que todos sabemos que es todo un desafío). […] La tipografía fluida simplemente funciona. De hecho, creo que funciona muy bien.
Este Hacer que las publicaciones de WordPress se destaquen el enfoque adoptado para admitir la función a nivel de bloque, de modo que se aplique un tamaño de fuente fluido a los bloques de forma dinámica de forma predeterminada. Existen algunos beneficios a esto, por supuesto:
- Proporciona una forma para que los autores de temas activen la tipografía fluida sin preocuparse por implementarla en el código.
- Aplica tipografía fluida a entidades tipográficas específicas, como elementos o bloques, de forma mantenible y reutilizable.
- Permite flexibilidad en términos de unidades de tamaño de fuente (p. ej.
px,rem,emy%).
Ahora que esta nueva función está disponible en el Editor de bloques de WordPress de forma predeterminada, los autores de temas pueden aplicar una tipografía uniforme y fluida sin escribir código adicional.
Bloques que admiten configuración de tipografía y espaciado
Gutenberg 14.1 lanzado el 16 de septiembre de 2022, e introdujo configuraciones tipográficas en un montón de bloques. Eso significa que la configuración de texto para esos bloques se estableció en CSS antes y también tuvo que cambiarse en CSS. Pero esos bloques ahora proporcionan controles de fuente y espaciado en la interfaz del Editor de bloques.
Actualmente, ese trabajo está programado para agregarse a WordPress 6.1, como se detalla en esta publicación de blog de Make WordPress. Y con él hay un número ampliado de bloques que admiten tipografía.
Declarar tipo fluido en un tema de bloque de WordPress
Entonces, ¿cómo utilizamos esta nueva tipografía fluida en WordPress? La respuesta está en theme.json, un archivo nuevo específico para bloquear temas que contiene un montón de configuraciones de temas en pares clave:valor.
Veamos una regla para una fuente grande en theme.json donde contentSize: 768px y estamos trabajando con un widesize: 1600px diseño. Así es como podemos especificar un CSS font-size usando el clamp() función:
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"name": "Large",
"size": "clamp(2.25rem, 6vw, 3rem)",
"slug": "large"
}
]
}
}A partir de WordPress 6.1, solo rem, em y px Se admiten unidades.
Eso es genial y funciona, pero con la nueva función de tipo de fluido en realidad usaríamos un enfoque diferente. Primero, optamos por una tipografía fluida en settings.typography, que tiene una nueva fluid propiedad:
"settings": {
"typography": {
"fluid": true
}
}Luego especificamos nuestro settings.fontSizes como antes, pero con una nueva fluidSize propiedad donde podemos establecer el min y max valores de tamaño para nuestra gama de tipos de fluidos.
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"size": "2.25rem",
"fluidSize": {
"min": "2.25rem",
"max": "3rem"
},
"slug": "large",
"name": "Large"
}
]
}
}Eso es realmente. Acabamos de agregar letra fluida a un tamaño de fuente llamado "Grande" con un rango que comienza en 2.25rem y escala hasta 3rem. Ahora, podemos aplicar la fuente "Grande" a cualquier bloque con configuración de fuente.
¿Cómo funciona esto bajo el capó? Rich Tabor ofrece una buena explicación, Como lo hace esta solicitud de extracción en GitHub. En resumen, WordPress convierte la theme.json properties en la siguiente regla CSS:
.has-large-font-size {
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}…que se aplica al elemento, digamos un bloque de párrafo:
...
Inicialmente, me resultó difícil entender y envolver en mi mente el concepto de CSS. clamp() funcionar sin aprender también sobre el min(), max()y calc() funciones. Esta herramienta de calculadora me ayudó bastante, especialmente para determinar qué valores usar en mis propios proyectos temáticos.
Para propósitos de demostración, usemos la calculadora para definir nuestro font-size rango para que el tamaño sea 36px en un 768px ancho de ventana y 48px en un 1600px ancho de ventana.
La calculadora genera automáticamente el siguiente CSS:
/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);La calculadora proporciona opciones para seleccionar unidades de entrada como px, remy em. si seleccionamos rem unidad, la calculadora genera lo siguiente clamp() valor:
/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);Entonces, esos valores mínimo y máximo corresponden a la fluidSize.min y fluidSize.max Valores en theme.json. min el valor se aplica en las vistas que son 768px ancho y abajo. Entonces el font-size aumenta a medida que crece el ancho de la ventana gráfica. Si la ventana gráfica es más ancha que 1600px, el max se aplica y el font-size está tapado allí.
Ejemplos
Existen instrucciones de prueba detalladas en la solicitud de incorporación de cambios que introdujo la función. Hay incluso más instrucciones de prueba de Publicación previa al lanzamiento de Justin Tadlock en Make WordPress.
Ejemplo 1: establecer una nueva configuración de fuente fluida
Comencemos con el conjunto de instrucciones de Justin. Lo usé en una versión modificada de la predeterminada. Veinte veintitrés tema que se encuentra actualmente en desarrollo.
Primero, asegurémonos de que estamos ejecutando el complemento Gutenberg (13.8 y superior) o WordPress 6.1, luego opte por el tipo fluido en el settings.typography.fluid propiedad en el theme.json archivo:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
}
}
}Ahora, dejemos el settings.typography.fontSizes ejemplos ahí:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
"fontSizes": [
{
"name": "Normal",
"size": "1.125rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal"
}
]
}
}
}Si todo funciona correctamente, ahora podemos dirigirnos al Editor de bloques de WordPress y aplicar la configuración de fuente "Normal" a nuestro bloque:
¡Agradable! Y si guardamos e inspeccionamos ese elemento en la parte delantera, este es el marcado:
Muy bueno. Ahora asegurémonos de que el CSS esté realmente allí:
Bien bien. Expongamos esa propiedad personalizada de CSS para ver si realmente está sujetando las cosas:
¡Parece que todo está funcionando tal como lo queremos! Veamos otro ejemplo…
Ejemplo 2: Exclusión de una configuración de fuente del tipo fluido
Esta vez, sigamos el instrucciones de la solicitud de extracción fusionada con un guiño a este ejemplo de Carolina Nymark que muestra cómo podemos desactivar el tipo fluido en una configuración de fuente específica.
He utilizado el tema vacío como se indica en las instrucciones y abrió el theme.json archivo para la prueba. Primero, optamos por el tipo de fluido exactamente como lo hicimos antes:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1000px"
},
"typography": {
"fluid": true
}
}
}Esta vez, estamos trabajando con más pequeños wideSize valor de 1000px en lugar de 1600px. Esto debería permitirnos ver el tipo de fluido funcionando en un rango exacto.
Bien, vamos a definir algunos tamaños de fuente personalizados en settings.typography.fontSizes:
{
"version": 2,
"settings": {
"typography": {
"fluid": true,
"fontSizes": [
{
"size": ".875rem",
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"slug": "small",
"name": "Small"
},
{
"size": "1rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal",
"name": "Normal"
},
{
"size": "1.5rem",
"fluid": {
"min": "1.5rem",
"max": "2rem"
},
"slug": "large",
"name": "Large"
},
{
"size": "2.25rem",
"fluid": false,
"slug": "x-large",
"name": "Extra large"
}
]
}
}
}Tenga en cuenta que hemos aplicado la función de tipo fluido solo en las configuraciones de fuente "Normal", "Medio" y "Grande". "Extra grande" es el extraño donde el fluid el objeto está configurado en false.
Lo que WordPress hace desde aquí, a través de la Motor estilo Gutenberg — es aplicar las propiedades que establecemos en CSS clamp() funciones para cada configuración de tamaño de fuente que haya optado por el tipo fluido y un valor de tamaño único para la configuración Extra grande:
--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;Veamos el marcado en la parte delantera:
¡Buen comienzo! Confirmemos que el .has-x-large-font-size la clase está excluida del tipo de fluido:
Si exponemos la --wp--preset--font-size--x-large variable, veremos que se establece en 2.25rem.
¡Eso es exactamente lo que queremos!
Temas de bloques que admiten tipografía fluida
Muchos temas de WordPress ya hacen uso de la clamp() Función para tipo fluido en temas de bloque y clásicos. Un buen ejemplo del uso de tipografía fluida es el recientemente lanzado Veinte veintitrés tema predeterminado.
He revisado todos los temas de bloque de Directorio de temas de bloques de WordPress, examinando theme.json archivo de cada tema y para ver cuántos temas de bloque actualmente admiten tipografía fluida (no es la nueva función, ya que todavía está en el complemento de Gutenberg al momento de escribir este artículo) usando el CSS clamp() función. De los 146 temas que revisé, la mayoría de ellos usaba un clamp() función para definir el espaciado. Un poco más de la mitad de ellos usaban clamp() para definir los tamaños de fuente. los Alara el tema es el único que se puede usar clamp() para definir el tamaños de contenedores de diseño.
Es comprensible que solo unos pocos temas lanzados recientemente contengan la nueva función de tipografía fluida. Pero aquí están los que encontré que lo definen en theme.json:
Y si lees mi publicación anterior aquí sobre CSS-Tricks, el Bloques de Gopher TT2 El tema que utilicé para la demostración también se actualizó para admitir la función de tipografía fluida.
Reacciones seleccionadas a las características de tipografía fluida de WordPress
¡Tener una tipografía fluida en WordPress a nivel de configuración es súper emocionante! Pensé en compartir algunos pensamientos de personas de la comunidad de desarrolladores de WordPress que han comentado al respecto.
Matias Ventura, el arquitecto principal del proyecto Gutenberg:
Como uno de los mayores esfuerzos para hacer que la publicación de páginas bellamente ricas en WordPress, la tipografía fluida es una gran experiencia ganadora tanto para las personas que crean con WordPress como para quienes consumen el contenido.
desarrollador automático Ramón Dodd comentó en la solicitud de extracción:
Compare esa idea con tamaños de fuente que respondan a tamaños de ventana de visualización específicos, como los definidos por preguntas de los medios, pero no haga nada entre esos tamaños.
theme.jsonya permite a los autores insertar sus propios valores de tamaño de fuente fluidos. Esto no cambiará, pero este PR lo ofrece a las personas que no quieren preocuparse por los detalles de implementación.
Nick Croft, autor de GenesisWP:
Brian Garner, diseñador y promotor principal de desarrolladores en WPEngine:
algunos desarrolladores pensar algunas características deben ser opcionales. jason cristo de Automattic dice:
Me encanta el poder de la tipografía fluida, sin embargo, tampoco creo que deba habilitarse de forma predeterminada. Su uso (y los detalles del mismo) son decisiones de diseño importantes que deben tomarse con cuidado.
También puede encontrar un montón de comentarios más en el oficial instrucciones de prueba para la función.
Terminando
La función de tipografía fluida en WordPress es todavía en desarrollo activo en el momento de escribir este artículo. Entonces, en este momento, los autores del tema deben proceder a usarlo, pero con precaución y esperando algunos posibles cambios antes de que se lance oficialmente. justin advierte autores de temas que usan esta función y sugiere estar atento a los siguientes dos problemas de GitHub:
También hay todavía un montón de trabajo en proceso sobre tipografía y otras herramientas de WordPress relacionadas con el diseño. Si te interesa mira esto ticket de GitHub de seguimiento de tipografía y problemas de GitHub relacionados con las herramientas de diseño.
Recursos
Utilicé los siguientes artículos cuando investigaba el tipo fluido y cómo WordPress lo está implementando como una característica.
