theme.json<\/code> ayuda a los desarrolladores a crear temas de WordPress que la aprovechen.<\/p>\nEste art\u00edculo explora la tipograf\u00eda de WordPress tanto para FSE como para\u00a0theme.json<\/code>. Adem\u00e1s, incluye contextos clave como la tecnolog\u00eda que utilizas, las consideraciones t\u00e9cnicas a tener en cuenta y la evoluci\u00f3n de c\u00f3mo utilizamos los tipos de letra en el dise\u00f1o.<\/p>\n<\/div><\/kinsta-auto-toc>\nTipograf\u00eda en la web: una breve historia<\/h2>\n
Si echas la vista atr\u00e1s a los primeros dise\u00f1os web<\/a>, comprobar\u00e1s que, a pesar de la variedad de dise\u00f1os, los tipos de letra han tenido una presentaci\u00f3n consistente. Esto se debe por una parte a la disponibilidad y por otra a la necesidad. En pocas palabras, sin la tecnolog\u00eda que tenemos ahora, las palabras de la web s\u00f3lo pueden utilizar fuentes disponibles en tu ordenador.<\/p>\nUn \u00abinternauta\u00bb de mediados o finales de los 90 s\u00f3lo tendr\u00eda unos cuantos tipos de letra predecibles: Times New Roman, Arial, Helvetica, Georgia y Verdana. Las dos \u00faltimas son tipos encargados por Microsoft que se renderizan bien para la web independientemente de la \u00e9poca.<\/p>\n![\"Comparaci\u00f3n](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/verdana-georgia.png\")
Ejemplos de las fuentes Verdana y Georgia.<\/figcaption><\/figure>\nEsta selecci\u00f3n de fuentes primitivas es coherente y fiable, pero carece de flexibilidad. Servicios como Google Fonts y Adobe Fonts<\/a> utilizan el formato de archivo WOFF para darte acceso a una biblioteca de miles de fuentes, con un proceso de incrustaci\u00f3n sencillo.<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/google-fonts.png\")
La interfaz principal de Google Fonts.<\/figcaption><\/figure>\nEsto te da un mayor margen para mejorar la legibilidad, crear dise\u00f1os distintivos y adaptar la experiencia de usuario (UX) de tu sitio. Las desventajas incluyen posibles problemas de rendimiento (como un cambio en el dise\u00f1o del contenido<\/a>), la dependencia de servicios de terceros para mostrar el elemento m\u00e1s crucial de tu sitio y problemas de privacidad.<\/p>\nEsto lleva a muchos dise\u00f1adores web a renunciar a las bibliotecas de fuentes y a reconsiderar el uso de fuentes del sistema<\/a>. El procesamiento m\u00e1s r\u00e1pido y el control que tienes sobre la aplicaci\u00f3n de un \u00abstack de fuentes del sistema\u00bb que da prioridad a los tipos de letra nativos y tambi\u00e9n utiliza opciones de reserva es un enfoque s\u00f3lido.<\/p>\nWordPress y la tipograf\u00eda<\/h3>\n
WordPress pone un gran \u00e9nfasis en la tipograf\u00eda para ayudarte a crear contenidos atractivos y legibles. A lo largo de su historia, todos los temas predeterminados<\/a> de WordPress utilizan combinaciones de fuentes que logran un equilibrio entre est\u00e9tica y funcionalidad.<\/p>\nLos temas predeterminados actuales utilizan stacks de fuentes del sistema para una presentaci\u00f3n limpia, moderna y eficaz. Los temas predeterminados m\u00e1s antiguos utilizan combinaciones como Noto Sans y Noto Serif (para Twenty Fifteen<\/a>) y Montserrat y Merriweather (para Twenty Sixteen<\/a>).<\/p>\nPara mostrar este \u00abc\u00edrculo de la vida\u00bb tipogr\u00e1fico, Twenty Sixteen utiliza Helvetica y Georgia como opciones alternativas. El tema por defecto de Twenty Ten<\/a> s\u00f3lo utiliza Helvetica, Arial y Georgia:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/twenty-ten.png\")
La p\u00e1gina de demostraci\u00f3n de Twenty Ten de WordPress.org.<\/figcaption><\/figure>\nAunque estas elecciones marcan el tono del dise\u00f1o de WordPress dentro de cada tema, tambi\u00e9n pueden servirte de inspiraci\u00f3n para prestar mucha atenci\u00f3n a c\u00f3mo utilizas la tipograf\u00eda \u2014 algo en lo que WordPress FSE te ayuda.<\/p>\n
Una introducci\u00f3n r\u00e1pida a la edici\u00f3n completa del sitio y a theme.json<\/h2>\n
FSE<\/a> y theme.json<\/code> son fundamentales para gestionar la tipograf\u00eda en WordPress, por lo que entender cada uno de ellos es esencial. FSE aprovecha el Editor de Bloques y a\u00f1ade m\u00e1s funcionalidad para convertirlo en el Editor de Sitios.<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/site-editor.png\")
La interfaz del Editor de Sitios de WordPress se parece mucho al Editor de Bloques, pero con m\u00e1s posibilidades de personalizaci\u00f3n.<\/figcaption><\/figure>\nEsto unifica las opciones de dise\u00f1o de tu sitio de varias maneras:<\/p>\n
\n- Utilizas el enfoque de edici\u00f3n de Bloques para todo el sitio, no s\u00f3lo para su contenido.<\/li>\n
- Una biblioteca de plantillas forma parte de la configuraci\u00f3n, por lo que puedes editarlas utilizando las mismas herramientas que tu contenido.<\/li>\n
- El estilo tambi\u00e9n tiene lugar dentro del Editor del sitio y ofrece un esquema de configuraci\u00f3n global.<\/li>\n
- La edici\u00f3n del sitio no necesita ning\u00fan c\u00f3digo para implementar cualquiera de las opciones disponibles. Esto tiende un puente entre el desarrollo y el dise\u00f1o para el usuario final.<\/li>\n<\/ul>\n
Puedes considerar el archivo theme.json<\/code> como una versi\u00f3n de desarrollo de FSE. Necesitas conocimientos de JavaScript Object Notation (JSON) para trabajar con el archivo, pero esto est\u00e1 dentro de las capacidades de la mayor\u00eda de los propietarios de sitios. Es un archivo de configuraci\u00f3n central para gestionar tus estilos y ajustes generales.<\/p>\n![\"Se](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/theme-json.png\")
Un archivo theme.json mostrado dentro de un editor de c\u00f3digo.<\/figcaption><\/figure>\nCada ajuste utiliza un par clave\/valor de option:value<\/code>, y puedes implementarlo de varias maneras:<\/p>\n\n- Definiendo paletas de colores globales.<\/li>\n
- Configurando familias y tama\u00f1os de fuentes.<\/li>\n
- Configurando estilos espec\u00edficos de bloque.<\/li>\n
- Gestionando las preferencias de espaciado y dise\u00f1o.<\/li>\n<\/ul>\n
Aprovechar theme.json<\/code> te permite crear temas m\u00e1s coherentes y personalizables sin necesidad de CSS personalizado<\/a> (aunque esto tambi\u00e9n es posible). La adaptabilidad y flexibilidad de theme.json<\/code> hacen que \u00e9ste sea un componente clave del desarrollo de temas para WordPress. Lo mejor es utilizar ambos de distintas formas en todo el dise\u00f1o de tu tema \u2014 y la tipograf\u00eda no es una excepci\u00f3n.<\/p>\nConfigurar la tipograf\u00eda en el Editor de Sitios de WordPress<\/h2>\n
Si sabes utilizar el Editor de Bloques, tambi\u00e9n puedes utilizar el Editor de Sitios. Dentro de WordPress, ve a la pantalla Apariencia <\/strong>> Editor<\/strong>. Esto muestra la pantalla de inicio del Editor de Sitios:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/site-editor-home.png\")
La pantalla de inicio del Editor de Sitios.<\/figcaption><\/figure>\nLa pantalla Estilos<\/strong> de la navegaci\u00f3n de la izquierda te ofrece algunas opciones de dise\u00f1o generales que incluyen cambios en la tipograf\u00eda:<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/styles-options.gif\")
Diferentes opciones preestablecidas de estilos dentro del Editor de Sitios de WordPress.<\/figcaption><\/figure>\nPara la mayor\u00eda de los casos de uso, los ajustes individuales para varios aspectos de la tipograf\u00eda te proporcionar\u00e1n un mayor valor. Hay dos peque\u00f1os iconos en la parte superior de la pantalla Estilos<\/strong> que abrir\u00e1n m\u00e1s opciones: el Libro de Estilos y el icono en forma de l\u00e1piz Editar Estilos<\/strong>.<\/p>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/styles-sidebar-icons.png\")
Los iconos de edici\u00f3n de estilos dentro del Editor de Sitios.<\/figcaption><\/figure>\nAdem\u00e1s, puedes establecer opciones de tipograf\u00eda a nivel de elemento y para cada Bloque.<\/p>\n
La Biblioteca de Fuentes<\/h3>\n
La pantalla Editar Estilos <\/strong>> Tipograf\u00eda<\/strong> muestra la Biblioteca de Fuentes, aunque no tiene este nombre expl\u00edcito dentro del Editor de Sitios. Esto te permite manejar fuentes y tipos de letra de varias maneras:<\/p>\n\n- Puedes subir y gestionar tipos de letra personalizados.<\/li>\n
- Hay una opci\u00f3n para usar Google Fonts directamente dentro de WordPress.<\/li>\n
- Crear colecciones de fuentes<\/a> utilizando PHP.<\/li>\n<\/ul>\n
Para acceder a la Biblioteca de Fuentes desde la secci\u00f3n Tipograf\u00eda de la barra lateral del Editor de Sitios, haz clic en el icono Gestionar fuentes<\/strong>:<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/manage-fonts-icon.png\")
El icono Administrar fuentes<\/strong> dentro del Editor de Sitios de WordPress.<\/figcaption><\/figure>\nAqu\u00ed, la pesta\u00f1a Biblioteca<\/strong> te muestra los tipos de letra registrados actualmente para tu tema e indica cu\u00e1les est\u00e1n activos:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-library-dialog.png\")
La interfaz de la Biblioteca de fuentes de WordPress.<\/figcaption><\/figure>\nSi haces clic en cualquiera de ellas, podr\u00e1s activar o desactivar fuentes individuales:<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/active-fonts.png\")
Las fuentes activas actuales dentro de la Biblioteca de Fuentes del Editor de Sitios.<\/figcaption><\/figure>\nEn la pesta\u00f1a Cargar<\/strong>, utilizas un cuadro de di\u00e1logo de arrastrar y soltar para instalar tus propias fuentes en formatos TTF, WOFF, WOFF2 y OTF.<\/p>\nLa pesta\u00f1a Instalar Fuentes<\/strong> se conecta a Google Fonts, para que puedas aprovechar esa biblioteca dentro de tu tema. Ten en cuenta que este m\u00e9todo descarga y sirve las fuentes desde tu sitio, en lugar de desde una CDN de Google<\/a>:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/google-fonts-library.png\")
La biblioteca de Google Fonts en el Editor de Sitios de WordPress.<\/figcaption><\/figure>\nAqu\u00ed, selecciona las fuentes que quieres instalar de la lista completa y haz clic en el bot\u00f3n Instalar<\/strong>. Una vez que aparezca la notificaci\u00f3n de \u00e9xito, esas fuentes se mostrar\u00e1n en la pesta\u00f1a Biblioteca<\/strong>:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/installed-fonts.png\")
Las fuentes instaladas para una instancia de WordPress.<\/figcaption><\/figure>\nEsto te permite utilizar las fuentes como lo har\u00edas con cualquier otra en tu sitio. Ahora, tienes que personalizarlas para que se ajusten a tus necesidades.<\/p>\n
El Libro de Estilo<\/h3>\n
Uno de los peligros de elegir y configurar tipos de letra es que no sabes c\u00f3mo quedar\u00e1n en combinaci\u00f3n con esquemas de color, dise\u00f1os y formatos. El Libro de Estilo tiene un valor incalculable, ya que te permite previsualizar tus ajustes tipogr\u00e1ficos en distintos elementos.<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/style-book.png\")
El Libro de Estilo del Editor de Sitios.<\/figcaption><\/figure>\nSi eliges el icono del ojo se abrir\u00e1 el Libro de Estilo, y aqu\u00ed hay cinco pesta\u00f1as:<\/p>\n
\n- Texto<\/strong>: Ve aqu\u00ed para trabajar con p\u00e1rrafos, encabezados, listas y otros elementos centrados en el texto.<\/li>\n
- Medios<\/strong>: Aqu\u00ed puedes ajustar las presentaciones de dise\u00f1o de im\u00e1genes, v\u00eddeo y audio.<\/li>\n
- Dise\u00f1o<\/strong>: Esta secci\u00f3n agrupa facetas de dise\u00f1o estructural, como columnas, separadores y botones.<\/li>\n
- Widgets<\/strong>: En esta pantalla hay dos elementos: generaciones din\u00e1micas, como listas de archivos y comentarios. Aqu\u00ed tambi\u00e9n trabajas con la barra de b\u00fasqueda, los iconos de las redes sociales y las nubes de etiquetas.<\/li>\n
- Tema<\/strong>: Se centra en los elementos de la cabecera de tu sitio, como el t\u00edtulo, el eslogan, la navegaci\u00f3n y el logotipo.<\/li>\n<\/ul>\n
Si haces clic en un elemento del Libro de Estilo, tienes varias opciones con las que jugar en la barra lateral. Aqu\u00ed trabajas con la configuraci\u00f3n tipogr\u00e1fica de cada Bloque en lugar de con elementos espec\u00edficos:<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/style-book-editing.png\")
Tienes total libertad para editar la tipograf\u00eda directamente desde el Libro de Estilo.<\/figcaption><\/figure>\nPuedes llegar a las mismas pantallas a trav\u00e9s de la secci\u00f3n Estilos <\/strong>> Bloques<\/strong> de la p\u00e1gina principal del Editor de Sitios. En cualquier caso, las opciones que ves te permiten personalizar la tipograf\u00eda (y otras cosas) de cada Bloque con todo detalle.<\/p>\nAjustar las opciones tipogr\u00e1ficas en el Editor de Sitios<\/h3>\n
Dispones de las mismas opciones b\u00e1sicas para todos los Bloques y elementos. Aqu\u00ed tienes un resumen de cada opci\u00f3n dentro del panel.<\/p>\n
Tipo y tama\u00f1o de fuente<\/h4>\n
El men\u00fa desplegable Fuente<\/strong> es sencillo: elige la fuente que quieres aplicar al elemento o Bloque espec\u00edfico:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-drop-down.png\")
Elegir una fuente de la selecci\u00f3n disponible en la pesta\u00f1a Tipograf\u00eda.<\/figcaption><\/figure>\nLos preajustes de Tama\u00f1o<\/strong> tienen la menor personalizaci\u00f3n dentro del Editor de Sitios. Eliges un tama\u00f1o entre Peque\u00f1o y Extra Grande:<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/size-presets.png\")
WordPress ofrece preajustes de tama\u00f1o de fuente dentro del Editor de Sitios.<\/figcaption><\/figure>\nSi editas theme.json<\/code>, puedes cambiar estos valores preestablecidos, pero no puedes hacerlo desde el Editor de Sitios. El bot\u00f3n Establecer tama\u00f1o personalizado<\/strong> te ofrece una forma de establecer un tama\u00f1o personalizado utilizando una serie de unidades de tama\u00f1o:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-size-custom.png\")
Elegir un tama\u00f1o y una unidad de fuente personalizados.<\/figcaption><\/figure>\nHay m\u00e1s formas de ajustar la tipograf\u00eda dentro del Editor de Sitios, incluyendo m\u00e9todos para los que normalmente utilizas CSS.<\/p>\n
Apariencia, altura de l\u00ednea e interlineado<\/h4>\n
El men\u00fa desplegable Apariencia<\/strong> parece sencillo: elige un peso de fuente de una extensa lista y se aplicar\u00e1 a tu texto. Sin embargo, a menudo no dispondr\u00e1s de todas las fuentes disponibles para cada peso.<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/appearance-drop-down.png\")
El men\u00fa desplegable Apariencia en el Editor de Sitios de WordPress.<\/figcaption><\/figure>\nNuestras pruebas han demostrado que WordPress no filtra esta lista para mostrar \u00fanicamente los pesos de fuente disponibles. Adem\u00e1s, si seleccionas un peso sin una fuente que coincida, se aplicar\u00e1 la \u00abcoincidencia m\u00e1s cercana\u00bb. 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\u00f3lo utilizar\u00e1s Cardo Negrita:<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/bold-appearance.gif\")
Cambiar la apariencia del texto en el Editor de Sitios de WordPress.<\/figcaption><\/figure>\nLa altura de l\u00ednea no utiliza ajustes preestablecidos y mantiene el equilibrio entre tu elecci\u00f3n de fuente, aspecto y tama\u00f1o. Este valor pone m\u00e1s espacio entre cada l\u00ednea y suele ser una aplicaci\u00f3n pr\u00e1ctica cuando el texto parece amontonado:<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/line-height.gif\")
Cambiar la altura de l\u00ednea en el Editor de Sitios de WordPress.<\/figcaption><\/figure>\nEl espaciado entre letras es similar, y sigue la convenci\u00f3n CSS de a\u00f1adirse al espaciado natural existente:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/letter-spacing.png\")
Puedes forzar demasiado el espaciado entre letras para que sea utilizable.<\/figcaption><\/figure>\nAl igual que con el tama\u00f1o 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 \u00abnormal\u00bb. Esto permite que el navegador elija el valor y, seg\u00fan nuestra experiencia, es lo ideal.<\/p>\n
Es una pr\u00e1ctica habitual utilizar peque\u00f1os valores positivos de espaciado entre letras \u2014 a menudo no m\u00e1s de 0,12rem\/em \u2014 y apenas espaciado negativo.<\/p>\n
El \u00faltimo grupo de opciones \u2013 may\u00fasculas y min\u00fasculas \u2013 te permite elegir que el texto sea may\u00fasculas, min\u00fasculas o may\u00fasculas de frase. Tambi\u00e9n puedes eliminar las may\u00fasculas y min\u00fasculas. Esto es estupendo para mantener la coherencia tipogr\u00e1fica, ya que no necesitas utilizar espec\u00edficamente una may\u00fascula o min\u00fascula al crear contenido.<\/p>\n
C\u00f3mo utilizar theme.json para definir la tipograf\u00eda de tu tema de WordPress<\/h2>\n
El Editor de Sitios es estupendo para los usuarios de sitios sin conocimientos t\u00e9cnicos. El archivo theme.json<\/code> 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\u00f3n que constituye la base de desarrollo de tu tema.<\/p>\nNo vamos a entrar en la estructura y el formato de todo el archivo theme.json <\/code>, pero s\u00ed vamos a ver c\u00f3mo definir, establecer y aplicar la tipograf\u00eda en su interior.<\/p>\nComprender la estructura de theme.json y definir la configuraci\u00f3n global<\/h3>\n
Utilizas JSON para definir todos los elementos dentro de theme.json<\/code>, lo que incluye la tipograf\u00eda. El elemento typography<\/code> se anida bajo el objeto settings<\/code> dentro de ese archivo. A partir de ah\u00ed, anidas m\u00e1s elementos, propiedades y objetos para construir la tipograf\u00eda de tu sitio:<\/p>\n{\n \"version\": 3,\n \"settings\": {\n \"typography\": {\n \"fontFamilies\": [\n {\n \"fontFamily\": \"-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif\",\n \"slug\": \"system-font\",\n \"name\": \"System Font\"\n }\n ],\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"13px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"medium\",\n \"size\": \"20px\",\n \"name\": \"Medium\"\n }\n ]\n }\n }\n}<\/code><\/pre>\nTodos estos elementos siguen un patr\u00f3n similar. Los predeterminados \u2014 y m\u00e1s f\u00e1ciles de entender \u2014 son los ajustes globales. \u00c9stos se anidan de forma sencilla, pero tambi\u00e9n puedes definir ajustes tipogr\u00e1ficos para Bloques individuales:<\/p>\n
\"styles\": {\n \"blocks\": {\n \"core\/paragraph\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--primary)\",\n \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n \"lineHeight\": \"1.5\"\n }\n },\n \"core\/heading\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--secondary)\",\n \"fontWeight\": \"700\"\n }\n }\n }\n}<\/code><\/pre>\nEsto utiliza la propiedad blocks<\/code> y un espacio de nombres espec\u00edfico para cada Bloque al que quieras apuntar. Aunque a\u00f1ade dos capas de anidamiento m\u00e1s, no hay otra alternativa a este enfoque. En cualquier caso, tienes un mont\u00f3n de propiedades con las que puedes jugar.<\/p>\nRegistrar fuentes<\/h3>\n
Tienes el mismo nivel de personalizaci\u00f3n<\/a> para la tipograf\u00eda que en la interfaz del Editor de Sitios \u2014 m\u00e1s en algunos casos. A nivel b\u00e1sico, anidas tu stack de fuentes en la propiedad fontFamilies<\/code>, y luego le das un slug y un nombre:<\/p>\n\nfontFamily<\/code> se asigna al valor CSS font-family<\/code>, y ser\u00e1 el stack de tipos de letra que desees utilizar en tu tema.<\/li>\nname<\/code> es lo que ver\u00e1s en el Editor de Sitios al seleccionar un tipo de letra, por lo que ser\u00e1 legible para los humanos.<\/li>\nslug<\/code> se a\u00f1ade a una propiedad CSS personalizada para su uso posterior.<\/li>\n<\/ul>\nPara las fuentes del sistema, esto es sencillo:<\/p>\n
\u2026\n \"typography\": {\n \"fontFamilies\": [\n {\n \"name\": \"Primary\",\n \"slug\": \"primary\",\n \"fontFamily\": \"Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif\"\n },\n {\n \"name\": \"Secondary\",\n \"slug\": \"secondary\",\n \"fontFamily\": \"system-ui, sans-serif\"\n }<\/code><\/pre>\nRegistrar fuentes web personalizadas requiere que utilices la propiedad fontFace<\/code> y definas algunos atributos:<\/p>\n\u2026\n\"name\": \"Secondary\",\n\"slug\": \"secondary\",\n\"fontFamily\": \"'Open Sans', sans-serif\",\n \"fontFace\": [\n {\n \"fontFamily\": \"Open Sans\",\n \"fontWeight\": \"300 800\", \/\/ This is a range of font weight values.\n \"fontStyle\": \"normal\", \/\/ This has to be a valid CSS font-style value.\n \"fontStretch\": \"normal\", \/\/ This also needs to be a valid CSS font-stretch value.\n \"src\": [ \"file:.\/assets\/fonts\/open-sans.woff2\" ] \/\/ This is an array of URLs for custom fonts, and can support multiple formats.\n },\n\u2026<\/code><\/pre>\nUna vez registradas las fuentes, las puedes seleccionar en los distintos men\u00fas desplegables del Editor de Sitios.<\/p>\n
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\u00edpica puesta en cola PHP<\/a> y el plugin Create Block Theme<\/a>:<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/create-block-theme.png\")
La imagen de cabecera de Create Block Theme de WordPress.org.<\/figcaption><\/figure>\nSe trata de una plantilla para crear un tema, pero tambi\u00e9n te permite registrar y definir tipograf\u00edas. Una vez que registres las fuentes de la forma que te resulte m\u00e1s c\u00f3moda (recomendamos la Biblioteca de fuentes), puedes empezar a fijarte en el tama\u00f1o.<\/p>\n
Establecer el tama\u00f1o de las fuentes y los preajustes en theme.json<\/h3>\n
Otra tarea fundamental con la tipograf\u00eda es establecer el tama\u00f1o de las fuentes. Esto utiliza la propiedad fontSizes<\/code> y te permite definir preajustes para el Editor de Sitios:<\/p>\n\"settings\": {\n \"typography\": {\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"12px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"x-large\",\n \"size\": \"32px\",\n \"name\": \"Extra Large\"\n }\n ]\n }\n}<\/code><\/pre>\nAl igual que con otros ajustes de tipograf\u00eda, WordPress generar\u00e1 una propiedad CSS personalizada para cada preajuste utilizando el slug que proporciones:<\/p>\n
body {\n--wp--preset--font-size--small: 12px;\n--wp--preset--font-size--x-large: 32px;\n}<\/code><\/pre>\nWordPress desactiva la tipograf\u00eda fluida por defecto, pero puedes activarla utilizando valores booleanos. Es una opci\u00f3n que puedes establecer a nivel global..<\/p>\n
{\n \"version\": 2,\n \"settings\": {\n \"typography\": {\n \"fluid\": true\n }\n }\n}<\/code><\/pre>\n…o para cada preajuste y tama\u00f1o que definas:<\/p>\n
{\n \"name\": \"Medium\",\n \"size\": \"1.25rem\",\n \"slug\": \"md\",\n \"fluid\": {\n \"min\": \"1rem\",\n \"max\": \"1.5rem\"\n }\n},<\/code><\/pre>\nLos valores min<\/code> y max<\/code> te permiten determinar el rango de escalabilidad para cada tama\u00f1o de fuente fluida que definas.<\/p>\nImplementar funciones tipogr\u00e1ficas avanzadas<\/h3>\n
El archivo theme.json<\/code> 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\u00eda de tu sitio con un conjunto de valores predeterminados que tengan sentido para tu tema:<\/p>\n\"styles\": {\n \"typography\": {\n \"letterSpacing\": \"0.02em\",\n \"textTransform\": \"uppercase\",\n \"textDecoration\": \"underline\",\n \"lineHeight\": \"1.55rem\",\n \"fontStyle\": \"normal\"\n }\n}<\/code><\/pre>\nPuedes elegir activar o desactivar<\/a> estas opciones. Cada opci\u00f3n toma un valor booleano, lo que significa que tambi\u00e9n tienes algunas opciones de personalizaci\u00f3n para el Editor de Sitios. Hay algunas personalizaciones que puedes hacer que van m\u00e1s all\u00e1 de lo que ofrece el Editor de Sitios:<\/p>\n\ncustomFontSize<\/code> est\u00e1 activada por defecto, y permite a los usuarios introducir tama\u00f1os de fuente personalizados \u2014 pero puedes desactivarla si quieres controlar estrictamente las opciones disponibles.<\/li>\ndropCap<\/code> es falso por defecto, pero si lo activas, el usuario tiene la opci\u00f3n de activar las may\u00fasculas para la letra inicial de cualquier bloque de p\u00e1rrafo.<\/li>\ntextColumns<\/code> activa una opci\u00f3n de \u00abcolumnas\u00bb para cualquier texto dentro de un Bloque, y est\u00e1 desactivada por defecto.<\/li>\nwritingMode<\/code> habilita opciones para cambiar la orientaci\u00f3n del texto dentro del Editor de Sitios. Puedes dar a los usuarios la opci\u00f3n de elegir entre texto horizontal o vertical.<\/li>\n<\/ul>\nEl alcance de theme.json<\/code> implica que deber\u00edas trabajar all\u00ed primero, especialmente cuando construyas un tema. Las opciones del Editor de Sitios te permitir\u00e1n a ti o a tus usuarios refinar la tipograf\u00eda de WordPress.<\/p>\nC\u00f3mo implementar la tipograf\u00eda utilizando theme.json: un ejemplo pr\u00e1ctico<\/h2>\n
FSE hace que el dise\u00f1o y el desarrollo con WordPress sean m\u00e1s f\u00e1ciles que nunca. Es m\u00e1s, parte del proceso general de selecci\u00f3n e implementaci\u00f3n de esos tipos de letra es m\u00e1s sencillo. Parte de esto se debe a las tendencias de dise\u00f1o, pero existen herramientas para rellenar los huecos en los que no tienes un dise\u00f1ador gr\u00e1fico disponible para ayudarte.<\/p>\n
Podemos empezar con tu selecci\u00f3n de tipos de letra b\u00e1sicos.<\/p>\n
<\/div><\/kinsta-auto-toc>\n1. Empareja tipos de letra complementarios<\/h3>\n
Hay una raz\u00f3n por la que se escribe tanto sobre c\u00f3mo elegir fuentes<\/a> 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.<\/p>\nSin embargo, gracias a las tendencias de dise\u00f1o actuales, hay mucho menos trabajo que hacer aqu\u00ed. Esto se debe a que tu cuerpo de texto puede utilizar fuentes del sistema \u2014 concretamente el tipo de letra principal del sistema operativo (SO). La \u00fanica tarea para ti es elegir algo que funcione junto a ella.<\/p>\n
Esto no es un tutorial sobre c\u00f3mo emparejar tipos de letra, pero tenemos algunos consejos que darte:<\/p>\n
\n- Las tipograf\u00edas del sistema operativo para el texto principal generalmente ser\u00e1n sans-serif. Esto implica buscar una tipograf\u00eda serif o una sans-serif alternativa que se vea diferente, \u00fanica y destaque.<\/li>\n
- Procura que las cosas sean sencillas, y piensa en utilizar s\u00f3lo el tipo de letra del sistema operativo si encaja con el dise\u00f1o.<\/li>\n
- Prueba diferentes combinaciones, ya que puedes hacerte una idea de qu\u00e9 tipos de letra funcionan juntos (y cu\u00e1les no).<\/li>\n<\/ul>\n
Una buena combinaci\u00f3n para un stack de fuentes del sistema es Playfair Display<\/a>, una fuente serif de Google Fonts<\/a>.<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/playfair-display.png\")
La p\u00e1gina de muestra de Google Fonts para Playfair Display.<\/figcaption><\/figure>\nCuando se trata de un par de fuentes, tienes que tener en cuenta su tama\u00f1o, no s\u00f3lo en la p\u00e1gina, sino en relaci\u00f3n con las dem\u00e1s.<\/p>\n
2. Encuentra el tama\u00f1o absoluto y relativo adecuados<\/h3>\n
Elegir el tama\u00f1o de las fuentes tambi\u00e9n es crucial, ya que los tama\u00f1os absolutos incorrectos pueden arruinar tu UX\/UI. Tambi\u00e9n es un \u00e1rea en la que tal vez quieras ce\u00f1irte a los valores predeterminados. Sin embargo, te animamos a experimentar aqu\u00ed, ya que cada emparejamiento tendr\u00e1 su propio \u00abespacio\u00bb para los tipos de letra.<\/p>\n
Typescale<\/a> es una herramienta excelente que puede ayudarte a crear la tipograf\u00eda adecuada para WordPress, sea cual sea tu necesidad:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/typescale-site.png\")
El sitio web de Typescale.<\/figcaption><\/figure>\nUno 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\u00f1os de fuente complementarios. Aqu\u00ed seleccionamos una escala de Tercio Mayor, con un factor de 1,2 y un tama\u00f1o base de 16px:<\/p>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-sizing-scale.png\")
Las opciones de escala de la fuente dentro de Typeface.<\/figcaption><\/figure>\nSi miras en el panel central, ver\u00e1s los tama\u00f1os resultantes para cada encabezamiento y p\u00e1rrafo, y podr\u00e1s elegir entre varias unidades de medida. Ten en cuenta que la Escala tipogr\u00e1fica tambi\u00e9n te permite cambiar el espaciado entre letras, la altura de l\u00ednea, el peso de la fuente y mucho m\u00e1s: todo personalizable dentro de theme.json<\/code>.<\/p>\n3. Aplicar valores predeterminados dentro de theme.json<\/h3>\n
Una vez que tengas los tipos de letra y el tama\u00f1o adecuados, puedes implementarlos dentro de tu archivo theme.json<\/code>. Aqu\u00ed tienes un ejemplo del aspecto de un archivo theme.json<\/code> habitual:<\/p>\n{\n \"version\": 3,\n \"settings\": {\n \"typography\": {\n \"fontFamilies\": [\n {\n \"fontFamily\": \"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif\",\n \"slug\": \"ubuntu-sans\",\n \"name\": \"Ubuntu Sans\"\n },\n {\n \"fontFamily\": \"\"Playfair Display\", serif\",\n \"slug\": \"playfair\",\n \"name\": \"Playfair Display\"\n }\n ],\n \"fontSizes\": [\n {\n \"slug\": \"small\",\n \"size\": \"13px\",\n \"name\": \"Small\"\n },\n {\n \"slug\": \"medium\",\n \"size\": \"16px\",\n \"name\": \"Medium\"\n },\n {\n \"slug\": \"large\",\n \"size\": \"20px\",\n \"name\": \"Large\"\n },\n {\n \"slug\": \"x-large\",\n \"size\": \"25px\",\n \"name\": \"Extra Large\"\n },\n {\n \"slug\": \"huge\",\n \"size\": \"31px\",\n \"name\": \"Huge\"\n }\n ]\n }\n },\n \"styles\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--system)\",\n \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n \"lineHeight\": \"1.8\"\n },\n \"blocks\": {\n \"core\/paragraph\": {\n \"typography\": {\n \"fontSize\": \"var(--wp--preset--font-size--medium)\"\n }\n },\n \"core\/heading\": {\n \"typography\": {\n \"fontFamily\": \"var(--wp--preset--font-family--playfair)\",\n \"fontWeight\": \"700\"\n }\n },\n \"core\/post-title\": {\n \"typography\": {\n \"fontSize\": \"var(--wp--preset--font-size--huge)\"\n }\n }\n }\n }\n}<\/code><\/pre>\nPuedes aplicar tambi\u00e9n estos tipos de letra a cualquier Bloque, e incluso pensar en dar estilo a cada encabezado de forma \u00fanica. Intenta crear un sistema tipogr\u00e1fico coherente y jer\u00e1rquico para WordPress que constituya la base del dise\u00f1o de tu tema. Garantizar\u00e1 un aspecto cohesivo en todo tu sitio, mientras que el Editor de Sitios te proporcionar\u00e1 una mayor flexibilidad y personalizaci\u00f3n.<\/p>\n
El papel de Kinsta en tu flujo de trabajo de desarrollo de temas de WordPress<\/h2>\n
El alojamiento de alto rendimiento de Kinsta te ofrece todo lo que necesitas para tener un sitio web eficiente y r\u00e1pido. Pero tambi\u00e9n ofrece s\u00f3lidas herramientas de desarrollo, como DevKinsta<\/a>, un entorno de desarrollo local que se ejecuta en contenedores Docker<\/a>.<\/p>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/devkinsta-home.png\")
El logotipo de DevKinsta.<\/figcaption><\/figure>\nEs importante asegurarse de que la tipograf\u00eda de tu WordPress funciona antes de lanzarlo. Aqu\u00ed es donde los entornos staging de Kinsta ser\u00e1n esenciales. En particular, el Env\u00edo Selectivo<\/a> ser\u00e1 algo que utilices mucho. Esto te permite enviar archivos y carpetas espec\u00edficos \u2014 cualquier activo que desees \u2014 en lugar de todo a la vez.<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/selective-push.png\")
Herramienta de env\u00edo selectivo de Kinsta.<\/figcaption><\/figure>\n