Las palabras son la columna vertebral de Internet, a pesar de la proliferación de medios. Esto significa que los tipos de letra que elijas para tu sitio serán un aspecto crucial de tu maquetación y diseño.

La tipografía de WordPress puede evocar estados de ánimo, ayudar con la marca y mucho más. La edición completa del sitio (FSE) en WordPress pone la personalización de esta tipografía en manos de los usuarios — y el archivo theme.json ayuda a los desarrolladores a crear temas de WordPress que la aprovechen.

Este artículo explora la tipografía de WordPress tanto para FSE como para theme.json. Además, incluye contextos clave como la tecnología que utilizas, las consideraciones técnicas a tener en cuenta y la evolución de cómo utilizamos los tipos de letra en el diseño.

Tipografía en la web: una breve historia

Si echas la vista atrás a los primeros diseños web, comprobarás que, a pesar de la variedad de diseños, los tipos de letra han tenido una presentación consistente. Esto se debe por una parte a la disponibilidad y por otra a la necesidad. En pocas palabras, sin la tecnología que tenemos ahora, las palabras de la web sólo pueden utilizar fuentes disponibles en tu ordenador.

Un «internauta» de mediados o finales de los 90 sólo tendría unos cuantos tipos de letra predecibles: Times New Roman, Arial, Helvetica, Georgia y Verdana. Las dos últimas son tipos encargados por Microsoft que se renderizan bien para la web independientemente de la época.

Comparación de dos tipos de fuentes estilo serif, Verdana y Georgia. La imagen muestra letras mayúsculas y minúsculas – así como números – en ambos tipos de letra. Verdana parece más condensada y geométrica, mientras que Georgia tiene formas serif más pronunciadas y un aspecto ligeramente más tradicional.
Ejemplos de las fuentes Verdana y Georgia.

Esta selección de fuentes primitivas es coherente y fiable, pero carece de flexibilidad. Servicios como Google Fonts y Adobe Fonts utilizan el formato de archivo WOFF para darte acceso a una biblioteca de miles de fuentes, con un proceso de incrustación sencillo.

El sitio web de Google Fonts muestra previsualizaciones de fuentes y opciones de filtrado. El texto de la vista previa dice: «Todo el mundo tiene derecho a la libertad de pensamiento», y se muestra en diferentes fuentes, como Roboto, SUSE y Noto Sans Hannunoo. Las opciones de filtrado por idioma, sistema de escritura y propiedades de la fuente están visibles en la barra lateral izquierda.
La interfaz principal de Google Fonts.

Esto te da un mayor margen para mejorar la legibilidad, crear diseños distintivos y adaptar la experiencia de usuario (UX) de tu sitio. Las desventajas incluyen posibles problemas de rendimiento (como un cambio en el diseño del contenido), la dependencia de servicios de terceros para mostrar el elemento más crucial de tu sitio y problemas de privacidad.

Esto lleva a muchos diseñadores web a renunciar a las bibliotecas de fuentes y a reconsiderar el uso de fuentes del sistema. El procesamiento más rápido y el control que tienes sobre la aplicación de un «stack de fuentes del sistema» que da prioridad a los tipos de letra nativos y también utiliza opciones de reserva es un enfoque sólido.

WordPress y la tipografía

WordPress pone un gran énfasis en la tipografía para ayudarte a crear contenidos atractivos y legibles. A lo largo de su historia, todos los temas predeterminados de WordPress utilizan combinaciones de fuentes que logran un equilibrio entre estética y funcionalidad.

Los temas predeterminados actuales utilizan stacks de fuentes del sistema para una presentación limpia, moderna y eficaz. Los temas predeterminados más antiguos utilizan combinaciones como Noto Sans y Noto Serif (para Twenty Fifteen) y Montserrat y Merriweather (para Twenty Sixteen).

Para mostrar este «círculo de la vida» tipográfico, Twenty Sixteen utiliza Helvetica y Georgia como opciones alternativas. El tema por defecto de Twenty Ten sólo utiliza Helvetica, Arial y Georgia:

La vista previa del tema de WordPress.org «Twenty Ten» muestra una imagen de cabecera de un camino arbolado. La barra lateral izquierda muestra información sobre el tema y opciones de descarga, mientras que el área principal presenta contenido y diseño de muestra.
La página de demostración de Twenty Ten de WordPress.org.

Aunque estas elecciones marcan el tono del diseño de WordPress dentro de cada tema, también pueden servirte de inspiración para prestar mucha atención a cómo utilizas la tipografía — algo en lo que WordPress FSE te ayuda.

Una introducción rápida a la edición completa del sitio y a theme.json

FSE y theme.json son fundamentales para gestionar la tipografía en WordPress, por lo que entender cada uno de ellos es esencial. FSE aprovecha el Editor de Bloques y añade más funcionalidad para convertirlo en el Editor de Sitios.

La interfaz del Editor de Sitios de WordPress muestra la página de inicio de una empresa de paisajismo. La página tiene un fondo azul con texto en blanco que dice «Un compromiso con la innovación y la sostenibilidad». Debajo hay un botón «Sobre nosotros» y una imagen de un edificio moderno con elementos arquitectónicos de madera. La barra lateral derecha incluye opciones de estilo tipográfico.
La interfaz del Editor de Sitios de WordPress se parece mucho al Editor de Bloques, pero con más posibilidades de personalización.

Esto unifica las opciones de diseño de tu sitio de varias maneras:

  • Utilizas el enfoque de edición de Bloques para todo el sitio, no sólo para su contenido.
  • Una biblioteca de plantillas forma parte de la configuración, por lo que puedes editarlas utilizando las mismas herramientas que tu contenido.
  • El estilo también tiene lugar dentro del Editor del sitio y ofrece un esquema de configuración global.
  • La edición del sitio no necesita ningún código para implementar cualquiera de las opciones disponibles. Esto tiende un puente entre el desarrollo y el diseño para el usuario final.

Puedes considerar el archivo theme.json como una versión de desarrollo de FSE. Necesitas conocimientos de JavaScript Object Notation (JSON) para trabajar con el archivo, pero esto está dentro de las capacidades de la mayoría de los propietarios de sitios. Es un archivo de configuración central para gestionar tus estilos y ajustes generales.

Se muestra una ventana de editor de código con el título sobre un fondo escénico de montañas boscosas. El editor muestra una parte de un archivo theme.json de WordPress con varias configuraciones de estilo. El código incluye configuraciones para el calendario, las categorías y los elementos de código, utilizando variables CSS para los colores y el espaciado. Los números de línea están visibles a la izquierda, y la interfaz del editor tiene un tema oscuro para mejorar la legibilidad sobre el fondo.
Un archivo theme.json mostrado dentro de un editor de código.

Cada ajuste utiliza un par clave/valor de option:value, y puedes implementarlo de varias maneras:

  • Definiendo paletas de colores globales.
  • Configurando familias y tamaños de fuentes.
  • Configurando estilos específicos de bloque.
  • Gestionando las preferencias de espaciado y diseño.

Aprovechar theme.json te permite crear temas más coherentes y personalizables sin necesidad de CSS personalizado (aunque esto también es posible). La adaptabilidad y flexibilidad de theme.json hacen que éste sea un componente clave del desarrollo de temas para WordPress. Lo mejor es utilizar ambos de distintas formas en todo el diseño de tu tema — y la tipografía no es una excepción.

Configurar la tipografía en el Editor de Sitios de WordPress

Si sabes utilizar el Editor de Bloques, también puedes utilizar el Editor de Sitios. Dentro de WordPress, ve a la pantalla Apariencia > Editor. Esto muestra la pantalla de inicio del Editor de Sitios:

La pantalla de inicio del Editor de Sitios de WordPress. La barra lateral izquierda muestra las opciones de diseño, mientras que la zona principal muestra una página de inicio de tema azul con el título «Un compromiso con la innovación y la sostenibilidad» y la imagen de un edificio moderno.
La pantalla de inicio del Editor de Sitios.

La pantalla Estilos de la navegación de la izquierda te ofrece algunas opciones de diseño generales que incluyen cambios en la tipografía:

Un GIF del Editor de Sitios de WordPress que muestra varios preajustes de estilo del tema. El área de contenido principal muestra «Un compromiso con la innovación y la sostenibilidad» con una descripción de la empresa Études. Cambia el esquema de color y la tipografía en función de las selecciones de la barra lateral izquierda, que muestra opciones de estilo y esquemas de color.
Diferentes opciones preestablecidas de estilos dentro del Editor de Sitios de WordPress.

Para la mayoría de los casos de uso, los ajustes individuales para varios aspectos de la tipografía te proporcionarán un mayor valor. Hay dos pequeños iconos en la parte superior de la pantalla Estilos que abrirán más opciones: el Libro de Estilos y el icono en forma de lápiz Editar Estilos.

Una parte del Editor de Sitios de WordPress que muestra las opciones de estilo a la izquierda, y una vista previa de tu sitio web a la derecha. Los dos iconos de visualización y edición están resaltados en rojo.
Los iconos de edición de estilos dentro del Editor de Sitios.

Además, puedes establecer opciones de tipografía a nivel de elemento y para cada Bloque.

La Biblioteca de Fuentes

La pantalla Editar Estilos > Tipografía muestra la Biblioteca de Fuentes, aunque no tiene este nombre explícito dentro del Editor de Sitios. Esto te permite manejar fuentes y tipos de letra de varias maneras:

  • Puedes subir y gestionar tipos de letra personalizados.
  • Hay una opción para usar Google Fonts directamente dentro de WordPress.
  • Crear colecciones de fuentes utilizando PHP.

Para acceder a la Biblioteca de Fuentes desde la sección Tipografía de la barra lateral del Editor de Sitios, haz clic en el icono Gestionar fuentes:

El panel de configuración de Tipografía dentro del Editor de Sitios muestra las opciones de fuentes, incluyendo Cardo, Jost, System Sans-serif y System Serif. En la esquina superior derecha aparece el botón Gestionar fuentes. El panel se muestra junto a un fondo azul del sitio web que contiene texto en latín, mostrando los estilos tipográficos aplicados.
El icono Administrar fuentes dentro del Editor de Sitios de WordPress.

Aquí, la pestaña Biblioteca te muestra los tipos de letra registrados actualmente para tu tema e indica cuáles están activos:

La interfaz de la Biblioteca de Fuentes de WordPress muestra las fuentes instaladas y las del tema. Merriweather Sans aparece como fuente instalada con cuatro variantes activas. Las fuentes temáticas incluyen Cardo, Jost, System Sans-serif y System Serif, cada una con sus respectivas variantes activas.
La interfaz de la Biblioteca de fuentes de WordPress.

Si haces clic en cualquiera de ellas, podrás activar o desactivar fuentes individuales:

El cuadro de diálogo de selección de la Biblioteca de Fuentes muestra opciones para la familia de fuentes Cardo. El cuadro de diálogo muestra tres variantes: Cardo Normal, Cardo Negrita y Cardo Normal Cursiva, cada una con una casilla de verificación seleccionada. Encima de las variantes, hay una nota advirtiendo de que demasiadas variantes de fuentes podrían ralentizar el sitio web.
Las fuentes activas actuales dentro de la Biblioteca de Fuentes del Editor de Sitios.

En la pestaña Cargar, utilizas un cuadro de diálogo de arrastrar y soltar para instalar tus propias fuentes en formatos TTF, WOFF, WOFF2 y OTF.

La pestaña Instalar Fuentes se conecta a Google Fonts, para que puedas aprovechar esa biblioteca dentro de tu tema. Ten en cuenta que este método descarga y sirve las fuentes desde tu sitio, en lugar de desde una CDN de Google:

La biblioteca de fuentes de WordPress muestra opciones para instalar fuentes de Google. La barra de búsqueda permite a los usuarios encontrar fuentes específicas, y una lista muestra varias opciones de fuentes, como Merienda, Merriweather y Metal Mania. Los controles de paginación están visibles en la parte inferior.
La biblioteca de Google Fonts en el Editor de Sitios de WordPress.

Aquí, selecciona las fuentes que quieres instalar de la lista completa y haz clic en el botón Instalar. Una vez que aparezca la notificación de éxito, esas fuentes se mostrarán en la pestaña Biblioteca:

La Biblioteca de Fuentes de WordPress muestra las fuentes instaladas y las del tema. Merriweather Sans aparece como fuente instalada con cuatro variantes activas. Las fuentes temáticas incluyen Cardo, Jost, System Sans-serif y System Serif, cada una con sus respectivas variantes activas.
Las fuentes instaladas para una instancia de WordPress.

Esto te permite utilizar las fuentes como lo harías con cualquier otra en tu sitio. Ahora, tienes que personalizarlas para que se ajusten a tus necesidades.

El Libro de Estilo

Uno de los peligros de elegir y configurar tipos de letra es que no sabes cómo quedarán en combinación con esquemas de color, diseños y formatos. El Libro de Estilo tiene un valor incalculable, ya que te permite previsualizar tus ajustes tipográficos en distintos elementos.

La interfaz del editor del Libro de Estilo de WordPress muestra un fondo azul con «El código es poesía» repetido en diferentes tamaños de letra como encabezado. La barra lateral derecha muestra opciones de estilo para la tipografía y los elementos.
El Libro de Estilo del Editor de Sitios.

Si eliges el icono del ojo se abrirá el Libro de Estilo, y aquí hay cinco pestañas:

  • Texto: Ve aquí para trabajar con párrafos, encabezados, listas y otros elementos centrados en el texto.
  • Medios: Aquí puedes ajustar las presentaciones de diseño de imágenes, vídeo y audio.
  • Diseño: Esta sección agrupa facetas de diseño estructural, como columnas, separadores y botones.
  • Widgets: En esta pantalla hay dos elementos: generaciones dinámicas, como listas de archivos y comentarios. Aquí también trabajas con la barra de búsqueda, los iconos de las redes sociales y las nubes de etiquetas.
  • Tema: Se centra en los elementos de la cabecera de tu sitio, como el título, el eslogan, la navegación y el logotipo.

Si haces clic en un elemento del Libro de Estilo, tienes varias opciones con las que jugar en la barra lateral. Aquí trabajas con la configuración tipográfica de cada Bloque en lugar de con elementos específicos:

El Libro de Estilo muestra el panel de configuración de Tipografía con opciones para encabezados y párrafos. El encabezamiento «El código es poesía» se muestra en varios tamaños, con un párrafo de muestra debajo. Las opciones de personalización de la fuente están visibles en la parte derecha.
Tienes total libertad para editar la tipografía directamente desde el Libro de Estilo.

Puedes llegar a las mismas pantallas a través de la sección Estilos > Bloques de la página principal del Editor de Sitios. En cualquier caso, las opciones que ves te permiten personalizar la tipografía (y otras cosas) de cada Bloque con todo detalle.

Ajustar las opciones tipográficas en el Editor de Sitios

Dispones de las mismas opciones básicas para todos los Bloques y elementos. Aquí tienes un resumen de cada opción dentro del panel.

Tipo y tamaño de fuente

El menú desplegable Fuente es sencillo: elige la fuente que quieres aplicar al elemento o Bloque específico:

La interfaz del Libro de Estilo muestra un párrafo del Quijote y una lista de personajes de Alicia en el País de las Maravillas. La barra lateral derecha muestra los ajustes tipográficos, incluida la selección de fuentes (actualmente seleccionada Cardo) y varias opciones de formato de texto. Una cita de Julio Cortázar aparece en un recuadro azul en la parte inferior.
Elegir una fuente de la selección disponible en la pestaña Tipografía.

Los preajustes de Tamaño tienen la menor personalización dentro del Editor de Sitios. Eliges un tamaño entre Pequeño y Extra Grande:

El panel de configuración de Tipografía del Editor de Sitios. La fuente está ajustada a Cardo, el tamaño a Medio (M) y el menú desplegable de apariencia muestra seleccionada la opción Regular. La altura de línea está ajustada a 1,55, y están visibles las opciones adicionales de espaciado entre letras y mayúsculas y minúsculas.
WordPress ofrece preajustes de tamaño de fuente dentro del Editor de Sitios.

Si editas theme.json, puedes cambiar estos valores preestablecidos, pero no puedes hacerlo desde el Editor de Sitios. El botón Establecer tamaño personalizado te ofrece una forma de establecer un tamaño personalizado utilizando una serie de unidades de tamaño:

La interfaz del Editor de Sitios muestra la configuración tipográfica de un sitio. El área de texto principal muestra un párrafo en blanco sobre fondo azul. La barra lateral derecha te permite personalizar la fuente, el tamaño, el aspecto y la altura de línea, con la fuente Cardo seleccionada y el tamaño fijado en 1,2 rem.
Elegir un tamaño y una unidad de fuente personalizados.

Hay más formas de ajustar la tipografía dentro del Editor de Sitios, incluyendo métodos para los que normalmente utilizas CSS.

Apariencia, altura de línea e interlineado

El menú desplegable Apariencia parece sencillo: elige un peso de fuente de una extensa lista y se aplicará a tu texto. Sin embargo, a menudo no dispondrás de todas las fuentes disponibles para cada peso.

El menú desplegable Apariencia dentro del Editor de Sitios de WordPress. El panel está ajustado a Regular. Debajo de él, hay un control de ajuste de la altura de línea en 1,55, con botones de más y menos para el ajuste fino.
El menú desplegable Apariencia en el Editor de Sitios de WordPress.

Nuestras pruebas han demostrado que WordPress no filtra esta lista para mostrar únicamente los pesos de fuente disponibles. Además, si seleccionas un peso sin una fuente que coincida, se aplicará la «coincidencia más cercana». Por ejemplo, utilizamos Cardo Normal, Cardo Negrita y Cardo Negrita Cursiva para nuestro sitio de ejemplo. Si eliges Seminegrita, Negrita, Extra Negrita o Negro, sólo utilizarás Cardo Negrita:

Un GIF del Editor de Sitios de WordPress que muestra un fondo azul con una cita de El Quijote en el lado izquierdo. La barra lateral derecha muestra a un usuario recorriendo las opciones del menú desplegable Apariencia.
Cambiar la apariencia del texto en el Editor de Sitios de WordPress.

La altura de línea no utiliza ajustes preestablecidos y mantiene el equilibrio entre tu elección de fuente, aspecto y tamaño. Este valor pone más espacio entre cada línea y suele ser una aplicación práctica cuando el texto parece amontonado:

Un GIF del Editor de Sitios de WordPress que muestra un cambio en la configuración de la altura de línea dentro de la barra lateral derecha. El área principal muestra un texto de El Quijote y una lista de personajes de Alicia en el País de las Maravillas. Una cita en la parte inferior dice: «Al citar a otros, nos citamos a nosotros mismos».
Cambiar la altura de línea en el Editor de Sitios de WordPress.

El espaciado entre letras es similar, y sigue la convención CSS de añadirse al espaciado natural existente:

La barra lateral de Tipografía del Editor de Sitios muestra la fuente configurada como Cardo, con opciones para ajustar el tamaño, el aspecto, la altura de línea y el espaciado entre letras.Un fondo azul con texto blanco muestra cómo aparece el espaciado entre letras (5px aquí) en el sitio web.
Puedes forzar demasiado el espaciado entre letras para que sea utilizable.

Al igual que con el tamaño de fuente personalizado, puedes seleccionar diferentes unidades de medida. En este caso, suele ser preferible elegir un valor relativo. WordPress establece el espaciado entre letras en un valor CSS por defecto de «normal». Esto permite que el navegador elija el valor y, según nuestra experiencia, es lo ideal.

Es una práctica habitual utilizar pequeños valores positivos de espaciado entre letras — a menudo no más de 0,12rem/em — y apenas espaciado negativo.

El último grupo de opciones – mayúsculas y minúsculas – te permite elegir que el texto sea mayúsculas, minúsculas o mayúsculas de frase. También puedes eliminar las mayúsculas y minúsculas. Esto es estupendo para mantener la coherencia tipográfica, ya que no necesitas utilizar específicamente una mayúscula o minúscula al crear contenido.

Cómo utilizar theme.json para definir la tipografía de tu tema de WordPress

El Editor de Sitios es estupendo para los usuarios de sitios sin conocimientos técnicos. El archivo theme.json es la forma de garantizar que el Editor de Sitios proporcione a los usuarios lo que necesitan para personalizar sus sitios. Es el archivo de configuración que constituye la base de desarrollo de tu tema.

No vamos a entrar en la estructura y el formato de todo el archivo theme.json , pero sí vamos a ver cómo definir, establecer y aplicar la tipografía en su interior.

Comprender la estructura de theme.json y definir la configuración global

Utilizas JSON para definir todos los elementos dentro de theme.json, lo que incluye la tipografía. El elemento typography se anida bajo el objeto settings dentro de ese archivo. A partir de ahí, anidas más elementos, propiedades y objetos para construir la tipografía de tu sitio:

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
          "slug": "system-font",
          "name": "System Font"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "20px",
          "name": "Medium"
        }
      ]
    }
  }
}

Todos estos elementos siguen un patrón similar. Los predeterminados — y más fáciles de entender — son los ajustes globales. Éstos se anidan de forma sencilla, pero también puedes definir ajustes tipográficos para Bloques individuales:

"styles": {
  "blocks": {
    "core/paragraph": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--primary)",
        "fontSize": "var(--wp--preset--font-size--medium)",
        "lineHeight": "1.5"
      }
    },
    "core/heading": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--secondary)",
        "fontWeight": "700"
      }
    }
  }
}

Esto utiliza la propiedad blocks y un espacio de nombres específico para cada Bloque al que quieras apuntar. Aunque añade dos capas de anidamiento más, no hay otra alternativa a este enfoque. En cualquier caso, tienes un montón de propiedades con las que puedes jugar.

Registrar fuentes

Tienes el mismo nivel de personalización para la tipografía que en la interfaz del Editor de Sitios — más en algunos casos. A nivel básico, anidas tu stack de fuentes en la propiedad fontFamilies, y luego le das un slug y un nombre:

  • fontFamily se asigna al valor CSS font-family, y será el stack de tipos de letra que desees utilizar en tu tema.
  • name es lo que verás en el Editor de Sitios al seleccionar un tipo de letra, por lo que será legible para los humanos.
  • slug se añade a una propiedad CSS personalizada para su uso posterior.

Para las fuentes del sistema, esto es sencillo:

…
  "typography": {
    "fontFamilies": [
    {
      "name": "Primary",
      "slug": "primary",
      "fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
    },
    {
      "name": "Secondary",
      "slug": "secondary",
      "fontFamily": "system-ui, sans-serif"
      }

Registrar fuentes web personalizadas requiere que utilices la propiedad fontFace y definas algunos atributos:

…
"name": "Secondary",
"slug": "secondary",
"fontFamily": "'Open Sans', sans-serif",
  "fontFace": [
    {
      "fontFamily": "Open Sans",
      "fontWeight": "300 800", // This is a range of font weight values.
      "fontStyle": "normal", // This has to be a valid CSS font-style value.
      "fontStretch": "normal", // This also needs to be a valid CSS font-stretch value.
      "src": [ "file:./assets/fonts/open-sans.woff2" ] // This is an array of URLs for custom fonts, and can support multiple formats.
    },
…

Una vez registradas las fuentes, las puedes seleccionar en los distintos menús desplegables del Editor de Sitios.

Ten en cuenta que hay varias formas de registrar tipos de letra para tu tema. Tienes la Biblioteca de Fuentes dentro de la interfaz del Editor de Sitios, la típica puesta en cola PHP y el plugin Create Block Theme:

Un fondo azul con texto blanco que dice CREATE BLOCK THEME en una fuente sans-serif en negrita. Las palabras están apiladas verticalmente con CREATE en la parte superior en el tamaño más grande, BLOCK ligeramente más pequeño en el centro y THEME más pequeño en la parte inferior.
La imagen de cabecera de Create Block Theme de WordPress.org.

Se trata de una plantilla para crear un tema, pero también te permite registrar y definir tipografías. Una vez que registres las fuentes de la forma que te resulte más cómoda (recomendamos la Biblioteca de fuentes), puedes empezar a fijarte en el tamaño.

Establecer el tamaño de las fuentes y los preajustes en theme.json

Otra tarea fundamental con la tipografía es establecer el tamaño de las fuentes. Esto utiliza la propiedad fontSizes y te permite definir preajustes para el Editor de Sitios:

"settings": {
  "typography": {
    "fontSizes": [
      {
        "slug": "small",
        "size": "12px",
        "name": "Small"
      },
      {
        "slug": "x-large",
        "size": "32px",
        "name": "Extra Large"
      }
    ]
  }
}

Al igual que con otros ajustes de tipografía, WordPress generará una propiedad CSS personalizada para cada preajuste utilizando el slug que proporciones:

body {
--wp--preset--font-size--small: 12px;
--wp--preset--font-size--x-large: 32px;
}

WordPress desactiva la tipografía fluida por defecto, pero puedes activarla utilizando valores booleanos. Es una opción que puedes establecer a nivel global..

{
  "version": 2,
    "settings": {
      "typography": {
        "fluid": true
      }
    }
}

…o para cada preajuste y tamaño que definas:

{
  "name": "Medium",
  "size": "1.25rem",
  "slug": "md",
  "fluid": {
    "min": "1rem",
    "max": "1.5rem"
  }
},

Los valores min y max te permiten determinar el rango de escalabilidad para cada tamaño de fuente fluida que definas.

Implementar funciones tipográficas avanzadas

El archivo theme.json proporciona un completo complemento de opciones, al mismo nivel que lo que puedes encontrar en el Editor de Sitios. Esto te permite personalizar la tipografía de tu sitio con un conjunto de valores predeterminados que tengan sentido para tu tema:

"styles": {
  "typography": {
    "letterSpacing": "0.02em",
    "textTransform": "uppercase",
    "textDecoration": "underline",
    "lineHeight": "1.55rem",
    "fontStyle": "normal"
  }
}

Puedes elegir activar o desactivar estas opciones. Cada opción toma un valor booleano, lo que significa que también tienes algunas opciones de personalización para el Editor de Sitios. Hay algunas personalizaciones que puedes hacer que van más allá de lo que ofrece el Editor de Sitios:

  • customFontSize está activada por defecto, y permite a los usuarios introducir tamaños de fuente personalizados — pero puedes desactivarla si quieres controlar estrictamente las opciones disponibles.
  • dropCap es falso por defecto, pero si lo activas, el usuario tiene la opción de activar las mayúsculas para la letra inicial de cualquier bloque de párrafo.
  • textColumns activa una opción de «columnas» para cualquier texto dentro de un Bloque, y está desactivada por defecto.
  • writingMode habilita opciones para cambiar la orientación del texto dentro del Editor de Sitios. Puedes dar a los usuarios la opción de elegir entre texto horizontal o vertical.

El alcance de theme.json implica que deberías trabajar allí primero, especialmente cuando construyas un tema. Las opciones del Editor de Sitios te permitirán a ti o a tus usuarios refinar la tipografía de WordPress.

Cómo implementar la tipografía utilizando theme.json: un ejemplo práctico

FSE hace que el diseño y el desarrollo con WordPress sean más fáciles que nunca. Es más, parte del proceso general de selección e implementación de esos tipos de letra es más sencillo. Parte de esto se debe a las tendencias de diseño, pero existen herramientas para rellenar los huecos en los que no tienes un diseñador gráfico disponible para ayudarte.

Podemos empezar con tu selección de tipos de letra básicos.

1. Empareja tipos de letra complementarios

Hay una razón por la que se escribe tanto sobre cómo elegir fuentes y tipos de letra. Porque puede ser una tarea complicada. Por ejemplo, tienes que tener en cuenta la marca del sitio, su finalidad y lo que quieres transmitir.

Sin embargo, gracias a las tendencias de diseño actuales, hay mucho menos trabajo que hacer aquí. Esto se debe a que tu cuerpo de texto puede utilizar fuentes del sistema — concretamente el tipo de letra principal del sistema operativo (SO). La única tarea para ti es elegir algo que funcione junto a ella.

Esto no es un tutorial sobre cómo emparejar tipos de letra, pero tenemos algunos consejos que darte:

  • Las tipografías del sistema operativo para el texto principal generalmente serán sans-serif. Esto implica buscar una tipografía serif o una sans-serif alternativa que se vea diferente, única y destaque.
  • Procura que las cosas sean sencillas, y piensa en utilizar sólo el tipo de letra del sistema operativo si encaja con el diseño.
  • Prueba diferentes combinaciones, ya que puedes hacerte una idea de qué tipos de letra funcionan juntos (y cuáles no).

Una buena combinación para un stack de fuentes del sistema es Playfair Display, una fuente serif de Google Fonts.

El sitio web de Google Fonts en el que se visualiza el ejemplo de fuente Playfair Display. El texto de la prueba dice:
La página de muestra de Google Fonts para Playfair Display.

Cuando se trata de un par de fuentes, tienes que tener en cuenta su tamaño, no sólo en la página, sino en relación con las demás.

2. Encuentra el tamaño absoluto y relativo adecuados

Elegir el tamaño de las fuentes también es crucial, ya que los tamaños absolutos incorrectos pueden arruinar tu UX/UI. También es un área en la que tal vez quieras ceñirte a los valores predeterminados. Sin embargo, te animamos a experimentar aquí, ya que cada emparejamiento tendrá su propio «espacio» para los tipos de letra.

Typescale es una herramienta excelente que puede ayudarte a crear la tipografía adecuada para WordPress, sea cual sea tu necesidad:

La interfaz de la aplicación web Typescale para personalizar la tipografía. El panel de la izquierda muestra la configuración de la fuente, mientras que el de la derecha muestra una vista previa de diferentes tamaños de encabezado y un diseño de ejemplo de página de destino.
El sitio web de Typescale.

Uno de los mejores aspectos de la herramienta son las opciones de escala. Esencialmente, hace gran parte del trabajo por ti a la hora de elegir tamaños de fuente complementarios. Aquí seleccionamos una escala de Tercio Mayor, con un factor de 1,2 y un tamaño base de 16px:

Una interfaz de escala tipográfica de Typescale, que muestra varios tamaños de encabezamiento para «El trabajo de un mago». El menú desplegable de la escala muestra opciones como Segunda Menor y Tercera Mayor, con esta última seleccionada. La configuración de la fuente incluye Ubuntu Sans con un peso de 400.
Las opciones de escala de la fuente dentro de Typeface.

Si miras en el panel central, verás los tamaños resultantes para cada encabezamiento y párrafo, y podrás elegir entre varias unidades de medida. Ten en cuenta que la Escala tipográfica también te permite cambiar el espaciado entre letras, la altura de línea, el peso de la fuente y mucho más: todo personalizable dentro de theme.json.

3. Aplicar valores predeterminados dentro de theme.json

Una vez que tengas los tipos de letra y el tamaño adecuados, puedes implementarlos dentro de tu archivo theme.json. Aquí tienes un ejemplo del aspecto de un archivo theme.json habitual:

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif",
          "slug": "ubuntu-sans",
          "name": "Ubuntu Sans"
        },
        {
          "fontFamily": ""Playfair Display", serif",
          "slug": "playfair",
          "name": "Playfair Display"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "16px",
          "name": "Medium"
        },
        {
          "slug": "large",
          "size": "20px",
          "name": "Large"
        },
        {
          "slug": "x-large",
          "size": "25px",
          "name": "Extra Large"
        },
        {
          "slug": "huge",
          "size": "31px",
          "name": "Huge"
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--system)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.8"
    },
    "blocks": {
      "core/paragraph": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        }
      },
      "core/heading": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--playfair)",
          "fontWeight": "700"
        }
      },
      "core/post-title": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--huge)"
        }
      }
    }
  }
}

Puedes aplicar también estos tipos de letra a cualquier Bloque, e incluso pensar en dar estilo a cada encabezado de forma única. Intenta crear un sistema tipográfico coherente y jerárquico para WordPress que constituya la base del diseño de tu tema. Garantizará un aspecto cohesivo en todo tu sitio, mientras que el Editor de Sitios te proporcionará una mayor flexibilidad y personalización.

El papel de Kinsta en tu flujo de trabajo de desarrollo de temas de WordPress

El alojamiento de alto rendimiento de Kinsta te ofrece todo lo que necesitas para tener un sitio web eficiente y rápido. Pero también ofrece sólidas herramientas de desarrollo, como DevKinsta, un entorno de desarrollo local que se ejecuta en contenedores Docker.

Una ilustración artística del logotipo de DevKinsta. Representa a una persona trabajando con un ordenador en un entorno oscuro. La imagen utiliza tonos azules y morados, y muestra unas manos escribiendo en un teclado y ajustando un equipo. Un monitor muestra un logotipo K con estilo.
El logotipo de DevKinsta.

Es importante asegurarse de que la tipografía de tu WordPress funciona antes de lanzarlo. Aquí es donde los entornos staging de Kinsta serán esenciales. En particular, el Envío Selectivo será algo que utilices mucho. Esto te permite enviar archivos y carpetas específicos — cualquier activo que desees — en lugar de todo a la vez.

La interfaz de MyKinsta muestra un cuadro de diálogo Enviar a entorno activo. Se presentan opciones para pasar archivos y bases de datos del entorno staging al entorno activo, con casillas de verificación para archivos, carpetas y tablas de bases de datos específicos.
Herramienta de envío selectivo de Kinsta.

De esta forma, puedes hacer cambios discretos en el diseño enviando archivos concretos (como theme.json). Además, puedes minimizar el riesgo de dañar partes del diseño de tu sitio con las que estás satisfecho, y puedes hacer actualizaciones incrementales más frecuentes de la tipografía de tu sitio.

Resumen

FSE está madurando, y theme.json es fundamental para todo el enfoque de la edición de WordPress. La tipografía es un factor crítico, y WordPress proporciona herramientas a nivel de desarrollador y acceso a elementos que antes requerirían una base en CSS y PHP.

Entre la interfaz intuitiva del Editor de Sitios y la adaptabilidad de theme.json, puedes crear una tipografía que mejore la estética de tu sitio, resuene con tu marca y mejore la experiencia general del usuario.

Nos encantaría conocer tus experiencias con la tipografía de WordPress y saber si FSE es la clave del éxito para ti. Comparte tus opiniones con nosotros en los comentarios de abajo.

Jeremy Holcombe Kinsta

Editor de Contenidos y Marketing en Kinsta, Desarrollador Web de WordPress y Redactor de Contenidos. Aparte de todo lo relacionado con WordPress, me gusta la playa, el golf y el cine. También tengo problemas con la gente alta ;).