Tipografía en theme.json: cómo crear un sistema tipográfico en WordPress
Cómo definir familias, tamaños, tipografía fluida, interlineado y estilos responsive en theme.json para construir un sistema tipográfico en WordPress.
theme.json es un archivo de configuración centralizado en formato JSON introducido en WordPress 5.8 que permite definir, controlar y gestionar los ajustes, estilos y características del editor de bloques y del sitio web.
En este artículo vamos a ver cómo trasladar un sistema tipográfico a theme.json: familias, tamaños, fluidez, interlineado, anchos de contenido y estilos responsive. El objetivo es que la tipografía deje de ser una colección de valores dispersos y pase a formar parte del sistema del tema de WordPress.
theme.json separa posibilidades y decisiones
Dentro de settings defininimos qué herramientas y presets existen: familias disponibles, escala de tamaños, tipografía fluida, controles que permites utilizar en el editor.
Y dentro de styles decidimos cómo se aplican esos valores al sitio, a elementos como encabezados o enlaces y a bloques concretos.
Esa separación es muy útil para sistematizar. Puedes ofrecer una escala pequeña y coherente al editor y, al mismo tiempo, fijar estilos por defecto para que un párrafo, un H2 o un botón no dependan de decisiones manuales en cada página.
Registra las familias como presets semánticos
WordPress genera variables CSS para las familias definidas en settings.typography.fontFamilies. Conviene usar slugs semánticos. Por ejemplo, body y display, en lugar de nombres que dependan de la familia actual. Si dentro de dos años cambias Inter por otra sans serif, el token puede seguir llamándose body.
{
"version": 3,
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Cuerpo",
"slug": "body",
"fontFamily": "'Inter', system-ui, sans-serif",
"fontFace": [
{
"fontFamily": "Inter",
"fontStyle": "normal",
"fontWeight": "100 900",
"fontStretch": "normal",
"fontDisplay": "swap",
"src": ["file:./assets/fonts/inter.woff2"]
}
]
}
]
}
}
}fontFace se traduce a reglas @font-face. En WordPress actual puede incluir rangos de peso para fuentes variables y descriptores avanzados como fontDisplay, sizeAdjust, ascentOverride, descentOverride, lineGapOverride o unicodeRange.
No hace falta utilizar todos. La ventaja es poder centralizar en el tema tanto la identidad como parte de la estrategia de carga.
Define una escala de tamaños limitada
settings.typography.fontSizes crea presets que después aparecen en el editor y se convierten en variables CSS del tipo --wp--preset--font-size--....
{
"settings": {
"typography": {
"fontSizes": [
{ "name": "Pequeño", "slug": "sm", "size": "0.875rem" },
{ "name": "Base", "slug": "md", "size": "1rem" },
{ "name": "Grande", "slug": "lg", "size": "1.5rem" },
{ "name": "Título", "slug": "xl", "size": "2.5rem" }
]
}
}
}Al traducir los valores de Figma a theme.json, lo que se suele hacer es depurar la escala tipográfica.
Incluso si el diseñador ha creado una jerarquía tipográfica coherente en Figma, la mayoría de esos presets no deberían copiarse directamente a theme.json, porque una escala tipográfica demasiado detallada complica el sistema. Lo mejor es mantener solo los tamaños que se usan regularmente en el sistema (el núcleo: pequeño, mediano, grande, etc.). Si necesitas variaciones específicas para casos puntuales, las manejas como excepciones, no como presets adicionales en la escala.
En Figma, el diseñador probablemente incluyó muchas variaciones durante el proceso creativo. Pero cuando traduces eso a theme.json, necesitas confirmar si ese tamaño es realmente parte del sistema o si un caso aislado.
Si tienes 12 presets muy parecidos entre sí, es señal de que probablemente 5-8 serían suficientes. Algunos de esos estilos de Figma pueden ser excepciones o casos aislados que nunca se reutilizan, así que es mejor cambiarlos a un valor del sistema que tenerlos como opciones separadas.
Activa la tipografía fluida donde aporta valor
WordPress puede generar clamp() automáticamente para los presets de tamaño. Se activa con settings.typography.fluid y puede configurarse globalmente o por preset.
{
"settings": {
"typography": {
"fluid": {
"minViewportWidth": "20rem",
"maxViewportWidth": "80rem"
},
"fontSizes": [
{
"name": "Título",
"slug": "xl",
"size": "3rem",
"fluid": {
"min": "2rem",
"max": "4.5rem"
}
}
]
}
}
}Esto resulta especialmente útil para titulares. Para cuerpo de texto no es necesario que el tamaño crezca con la pantalla en todos los elementos. Por ejemplo, en los tamaños más pequeños, funciona mejor una base estable. Puedes desactivar fluid en presets concretos.
El objetivo de la tipografía fluida no es que tanto que todo se mueva, sino eliminar los saltos bruscos cuando cambiamos los tamaños para mejorar la composición en función del ancho de pantalla.
Aplica familias, tamaños e interlineado desde styles
Una vez registrados los presets, styles define la aplicación global:
{
"styles": {
"typography": {
"fontFamily": "var:preset|font-family|body",
"fontSize": "var:preset|font-size|md",
"lineHeight": "1.55"
},
"elements": {
"heading": {
"typography": {
"fontWeight": "700",
"lineHeight": "1.2"
}
}
}
}
}Aquí es donde el trabajo de tipografía se convierte en sistema. El interlineado del cuerpo no tiene unidad y está separado del de los títulos. Los tamaños vienen de presets. Los pesos pueden utilizar rangos de una fuente variable sin añadir archivos distintos para todos los pesos.
También puedes aplicar letterSpacing, textTransform, textDecoration, textIndent, writingMode y, desde WordPress 7.1, textShadow dentro de las zonas que lo soportan.
El ancho de contenido también pertenece al sistema tipográfico
settings.layout.contentSize y wideSize suelen pensarse como propiedades de layout, pero influyen directamente en la longitud de línea.
{
"settings": {
"layout": {
"contentSize": "46rem",
"wideSize": "80rem"
}
}
}Un ancho de contenido coherente evita que los párrafos sean demasiado largos en pantallas grandes. Para artículos largos tiene sentido una columna de texto más estrecha dentro de un layout general más amplio. Aun así, recuerda que el número real de caracteres depende de la tipografía y de la estructura del bloque.
WordPress 7.1 añade estilos responsive de bloque
Hasta hace muy poco, theme.json podía generar tipografía fluida, pero las diferencias explícitas por breakpoint requerían CSS adicional. WordPress 7.1 incorpora estados @mobile y @tablet para los estilos de bloques, incluidos los soportes tipográficos.
{
"styles": {
"blocks": {
"core/heading": {
"typography": {
"fontSize": "var:preset|font-size|xl",
"lineHeight": "1.15"
},
"@mobile": {
"typography": {
"fontSize": "2rem",
"lineHeight": "1.2"
}
}
}
}
}
}El estilo base sigue siendo el de escritorio y se aplica en todos los tamaños salvo que el estado responsive lo sobrescriba. No existe @desktop.
Los breakpoints por defecto son 480px para móvil y 782px para tablet. El tema puede cambiarlos con settings.viewport y utilizar px (que no se recomienda porque no es accesible), em o rem:
{
"settings": {
"viewport": {
"mobile": "30rem",
"tablet": "48rem"
}
}
}Yo seguiría utilizando tipografía fluida para cambios continuos de tamaño y reservaría estos estados para diferencias reales de comportamiento: un line-height distinto, una escala más comprimida o un componente que necesita una jerarquía específica en móvil.
textShadow también está en los estilos globales desde WordPress en 7.1
WordPress 7.1 reconoce textShadow dentro de styles.typography, tanto a nivel global como por bloque o elemento.
{
"styles": {
"blocks": {
"core/heading": {
"typography": {
"textShadow": "0 0.1em 0.3em rgb(0 0 0 / 20%)"
}
}
}
}
}Que se pueda usar no significa que debamos convertirlo en un efecto global. Lo reservaría para fuentes display a tamaño grande, cuando por estilo esté justificado, en campañas o situaciones donde la sombra forme parte de la identidad. En texto pequeño puede reducir claridad y nunca debe utilizarse como sustituto del contraste suficiente entre texto y fondo.
Limita las opciones del editor para proteger el sistema
theme.json también te permite decidir qué controles dejas disponibles para el usuario editor de la web. Si quieres una escala cerrada, puedes desactivar tamaños personalizados. Si no quieres que cada editor cambie el interlineado de cualquier bloque, puedes mantener settings.typography.lineHeight desactivado aunque tú sí definas lineHeight en styles.
Esa diferencia entre «el tema puede usarlo» y «el usuario puede editarlo libremente» es una de las grandes ventajas de theme.json como herramienta de diseño de sistemas.
Un sistema tipográfico útil ofrece suficientes opciones para escribir contenido real y pocas para crear inconsistencias sin darse cuenta.
Un ejemplo compacto de sistema completo
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "46rem",
"wideSize": "80rem"
},
"viewport": {
"mobile": "30rem",
"tablet": "48rem"
},
"typography": {
"customFontSize": false,
"lineHeight": false,
"fluid": {
"minViewportWidth": "20rem",
"maxViewportWidth": "80rem"
},
"fontSizes": [
{ "name": "Pequeño", "slug": "sm", "size": "0.875rem", "fluid": false },
{ "name": "Base", "slug": "md", "size": "1rem", "fluid": false },
{ "name": "Grande", "slug": "lg", "size": "1.5rem", "fluid": { "min": "1.25rem", "max": "1.75rem" } },
{ "name": "Título", "slug": "xl", "size": "3rem", "fluid": { "min": "2rem", "max": "4.5rem" } }
]
}
},
"styles": {
"typography": {
"fontFamily": "var:preset|font-family|body",
"fontSize": "var:preset|font-size|md",
"lineHeight": "1.55"
},
"elements": {
"heading": {
"typography": {
"fontWeight": "700",
"lineHeight": "1.2"
}
}
}
}
}Faltaría incorporar la definición de fontFamilies, que dependerá de las fuentes concretas del proyecto, pero la estructura refleja la idea principal: tamaños y familias como presets; decisiones globales en styles; ancho de lectura conectado al layout; fluidez dentro de rangos y controles responsive solo cuando hacen falta.
theme.json convierte el criterio tipográfico en reglas que WordPress puede reutilizar en todo el sitio y mantener incluso cuando el contenido crece.
Te lo ha contado
Ana Cirujano
Soy diseñadora y ayudo a negocios online a fortalecer su marca, mejorar la experiencia de usuario y obtener mejores resultados.
