Revolucionando a Tipografia do WordPress com Edição Completa do Site e theme.json

Palavras são a espinha dorsal da Internet, apesar de proliferação da mídias. Isso significa que as fontes que você escolher para o seu site serão um aspecto crucial do layout e do design.

A tipografia do WordPress pode criar humores, ajudar com a marca e muito mais. A edição completa do site (FSE) no WordPress coloca a personalização dessa tipografia nas mãos dos usuários – e o arquivo theme.json ajuda os desenvolvedores a criar temas de WordPress que aproveitam isso.

Este artigo explora a tipografia do WordPress tanto para FSE quanto para theme.json. No entanto, a discussão também inclui contextos importantes, como a tecnologia que você usa, as considerações técnicas a serem levadas em conta e a definição da evolução de como usamos a tipografia no design.

Tipografia na web: Uma breve história

Se você observar os primeiros designs da web, verá que, apesar da variedade de layouts, as fontes apresentavam uma consistência. Isso se deve, em parte, à disponibilidade e, em parte, à necessidade. Em resumo, sem a tecnologia que temos hoje, as palavras na web só podiam usar fontes disponíveis no seu computador.

Um “usuário da web” dos anos 90 tinha apenas algumas fontes previsíveis: Times New Roman, Arial, Helvetica, Georgia e Verdana. As duas últimas são fontes criadas pela Microsoft que se adaptam bem à web, independentemente da época.

Essa seleção antiga é consistente e confiável, mas carece de flexibilidade. Serviços como o Google Fonts e o Adobe Fonts utilizam o formato de arquivo WOFF para oferecer acesso a uma biblioteca de milhares de fontes, com um processo de incorporação simples.

Isso oferece uma maior capacidade de melhorar a legibilidade, criar designs distintos e personalizar a experiência do usuário (UX) do seu site. As desvantagens incluem possíveis impactos no desempenho (como mudanças no layout do conteúdo), dependência de serviços de terceiros para exibir o elemento mais crucial do seu site e preocupações com a privacidade.

Isso leva muitos web designers a abandonar as bibliotecas de fontes e reconsiderar o uso de fontes do sistema. O processamento mais rápido e o controle que você tem sobre a aplicação de uma “pilha de fontes do sistema” que prioriza fontes nativas e também usa opções de fallback, torna uma abordagem sólida.

WordPress e tipografia

O WordPress enfatiza muito a tipografia para ajudar você a criar conteúdo envolvente e legível. Ao longo de sua história, todos os temas padrão do WordPress usam pares de fontes que atingem um equilíbrio entre estética e funcionalidade.

Os temas padrão atuais usam conjuntos de fontes do sistema para uma apresentação limpa, moderna e eficiente. Os temas padrão mais antigos usam pares como Noto Sans e Noto Serif (para o Twenty Fifteen) e Montserrat e Merriweather (para o Twenty Sixteen).

Para mostrar esse “círculo da vida” tipográfico, o Twenty Sixteen usa Helvetica e Georgia como opções alternativas. O tema padrão do Twenty Ten usa apenas Helvetica, Arial e Georgia:

Embora essas escolhas definam o tom do design do WordPress em cada tema, elas também podem inspirar você a prestar muita atenção em como usa a tipografia – algo que o WordPress FSE ajuda a fazer.

Uma rápida introdução à edição completa do site e ao theme.json

O FSE (Full Site Editing) e o theme.json são fundamentais para gerenciar a tipografia no WordPress, tornando essencial o entendimento de cada um. O FSE aproveita o Editor de Blocos e adiciona mais funcionalidades, transformando-se no Editor de Site.

Isso unifica as opções de design do seu site de várias maneiras:

• Você usa a abordagem de edição de blocos para todo o site, não apenas para o conteúdo.
• Uma biblioteca de templates faz parte da configuração, de modo que você pode editá-los usando as mesmas ferramentas que o seu conteúdo.
• O estilo também ocorre no Editor de Sites e oferece um esquema de configurações globais.
• A edição do site não precisa de nenhum código para que você possa implementar qualquer uma das opções disponíveis. Isso preenche a lacuna entre o desenvolvimento e o design para o usuário final.

Você pode considerar o arquivo theme.json como uma versão de desenvolvimento do FSE. Você precisa ter conhecimento de JSON (JavaScript Object Notation) para trabalhar com o arquivo, mas isso está dentro dos recursos da maioria dos proprietários de sites. É um arquivo de configuração central para gerenciar seus estilos e configurações globais.

Cada configuração usa um par chave/valor de option:value, e você pode implementar isso de várias maneiras:

• Definindo paletas de cores globais.
• Configurando famílias e tamanhos de fontes.
• Configurando estilos específicos do bloco.
• Gerenciando preferências de espaçamento e layout.

O uso do theme.json permite que você crie temas mais consistentes e personalizáveis sem a necessidade de CSS personalizado (embora isso também seja possível). A adaptabilidade e a flexibilidade do theme.json significam que esse é um componente essencial do desenvolvimento de temas para o WordPress. A abordagem ideal é usar ambos de maneiras diferentes em todo o design do tema, e a tipografia não é exceção.

Configuração da tipografia no Editor de Sites do WordPress

Se você sabe como usar o Editor de Blocos, também pode usar o Editor de Sites. No WordPress, navegue até a tela Appearance > Editor. Isso exibe a tela inicial do Editor de Sites:

A tela Estilos na navegação à esquerda oferece a você algumas opções globais de design que incluem alterações de tipografia:

Para a maioria dos casos de uso, as configurações individuais para vários aspectos de tipografia darão a você mais valor. Há dois pequenos ícones na parte superior da tela Styles que abrirão outras opções: o Style Book e o ícone de lápis Edit Styles.

Além disso, você pode definir opções de tipografia em nível de elemento e para cada bloco.

A biblioteca de fontes

A tela Edit Styles > Typography exibe a Biblioteca de fontes, embora ela não tenha esse nome explícito no Editor de Sites. Isso permite que você manipule fontes e tipos de letra de algumas maneiras:

• Você pode carregar e gerenciar fontes personalizadas.
• Você pode carregar e gerenciar fontes personalizadas. Há uma opção para usar o Google Fonts diretamente no WordPress.
• Você pode criar coleções de fontes usando PHP.

Para acessar a Font Library (Biblioteca de fontes) na seção Typography (Tipografia) na barra lateral do Editor de Sites, clique no ícone Manage fonts (Gerenciar fontes):

Aqui, a aba Library (Biblioteca) mostra a você as fontes registradas atualmente para o seu tema e indica quais estão ativas:

Ao clicar em qualquer uma delas, você pode ativar ou desativar fontes individuais:

Na aba Upload, você usa uma caixa de diálogo de upload de arrastar e soltar para instalar suas próprias fontes nos formatos TTF, WOFF, WOFF2 e OTF.

A aba Install Fonts se conecta ao Google Fonts, para que você possa aproveitar essa biblioteca em seu tema. Observe que essa abordagem faz download e fornece fontes do seu site, em vez de um CDN do Google:

Aqui, selecione as fontes que você deseja instalar na lista abrangente e clique no botão Instalar. Quando a notificação de sucesso for exibida, essas fontes serão mostradas na aba Biblioteca:

Isso permite que você use as fontes como faria com qualquer outra em seu site. Agora, você precisa personalizá-las para atender às suas necessidades.

O livro de estilos

Um dos perigos de escolher e definir tipografias é que você não sabe como elas ficarão em combinação com esquemas de cores, layouts e formatações. O Livro de Estilos é inestimável, pois permite que você visualize suas configurações de tipografia em diferentes elementos.

Se você escolher o ícone de “olho”, abrirá o Livro de estilos, que tem cinco guias:

• Texto: Vá até aqui para trabalhar com parágrafos, cabeçalhos, listas e outros elementos que se concentram no texto.
• Mídia: Aqui, você pode ajustar as apresentações de design de imagens, vídeo e áudio.
• Design: Esta seção reúne aspectos de design estrutural, como colunas, separadores e botões.
• Widgets: Há dois elementos nessa tela: gerações dinâmicas, como listas de arquivos e comentários. Você também trabalha com a barra de pesquisa, os ícones de mídia social e as nuvens de tags aqui.
• Tema: Aqui você se concentra nos elementos do cabeçalho do seu site, como título, slogan, navegação e logo.

Se você clicar em um elemento no Livro de Estilos, terá várias opções para explorar na barra lateral. Você está trabalhando com as configurações de tipografia para cada bloco aqui, em vez de elementos dedicados.

Você pode acessar as mesmas telas através da seção Styles > Blocks (Estilos > Blocos) na página inicial do Editor de Sites. De qualquer forma, as opções que você vê permitem personalizar a tipografia (e mais) de cada bloco em detalhes granulares.

Como ajustar as opções de tipografia no Editor de Sites

Para todos os blocos e elementos, você tem as mesmas opções principais disponíveis. Aqui está uma introdução de cada opção no painel.

Tipo e tamanho da fonte

O menu suspenso Font (Fonte) é simples: Escolha a fonte que você deseja aplicar ao elemento ou bloco específico:

As predefinições de tamanho têm o mínimo de personalização no Editor de Sites. Você escolhe um tamanho em um intervalo entre Pequeno e Extra Extra Grande:

Se você editar theme.json, poderá alterar esses valores predefinidos, mas não poderá fazê-lo no Editor de Sites. O botão Definir tamanho personalizado oferece a você uma maneira de definir um tamanho personalizado usando uma matriz de unidades de dimensionamento:

Há mais maneiras de ajustar a tipografia no Editor de Sites, incluindo métodos para os quais você normalmente usa CSS.

Aparência, altura da linha e espaçamento entre letras

O menu suspenso Appearance parece simples: Você escolhe o peso da fonte em uma extensa lista e ele será aplicado ao seu texto. No entanto, muitas vezes você não terá todas as fontes disponíveis para cada peso.

Nossos testes mostram que o WordPress não filtra essa lista para mostrar apenas os pesos de fonte disponíveis. Além disso, ele aplicará uma “correspondência mais próxima” se você selecionar um peso sem uma fonte correspondente. Por exemplo, usamos Cardo Normal, Cardo Bold e Cardo Bold Italic em nosso site de exemplo. Se você escolher Semi Bold, Bold, Extra Bold ou Black, usará somente a Cardo Bold:

A altura da linha não utiliza predefinições e equilibra sua escolha de fonte, aparência e tamanho. Esse valor adiciona mais espaço entre cada linha e é frequentemente uma implementação prática quando o texto parece agrupado:

O espaçamento entre letras é semelhante e segue o costume do CSS de se adicionar ao espaçamento natural que está presente:

Assim como no dimensionamento personalizado de fontes, você pode selecionar diferentes unidades de medida. A escolha de um valor relativo costuma ser a abordagem preferível nesse caso. O WordPress define o espaçamento entre letras como um padrão CSS de “normal” Isso permite que o navegador escolha o valor e, em nossa experiência, é o ideal.

É uma prática comum usar pequenos valores positivos de espaçamento entre letras – geralmente não mais do que 0,12rem/em – e quase nenhum espaçamento negativo.

O conjunto final de opções – letras maiúsculas e minúsculas – permite que você escolha se o texto deve ser em letras maiúsculas, minúsculas ou sentenças. Você também pode remover a caixa. Isso é ótimo para a consistência quando se trata de digitação, pois você não precisa usar especificamente um caso específico ao criar conteúdo.

Como usar o theme.json para definir a tipografia do seu tema do WordPress

O Editor de Sites é excelente para usuários do site sem conhecimento técnico. O arquivo theme.json é como você garante que o Editor de Sites forneça aos usuários o que eles precisam para personalizar seus sites. É o arquivo de configuração que é a base de desenvolvimento do seu tema.

Não abordaremos a estrutura e a formatação de todo o arquivo theme.json , mas veremos como definir, configurar e aplicar a tipografia nele.

Compreendendo a estrutura do theme.json e definindo configurações globais

No arquivo theme.json, você utiliza JSON para definir todos os elementos, incluindo a typography. O elemento de tipografia está aninhado sob o objeto settings. A partir desse ponto, você pode adicionar outros elementos, propriedades e objetos para personalizar a tipografia do seu site:

{
  "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 esses elementos seguem um padrão semelhante. Os padrões – e os mais fáceis de entender – são as configurações globais. Elas são aninhadas de forma direta, mas você também pode definir configurações de tipografia para blocos individuais:

"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"
      }
    }
  }
}

Isso usa a propriedade blocks e um namespace específico para cada bloco que você deseja segmentar. Embora isso adicione mais duas camadas de aninhamento, não há alternativa a essa abordagem. Independentemente disso, você tem muitas propriedades com as quais pode brincar.

Registrando fontes

Você tem o mesmo nível de personalização de tipografia que tem na interface do Editor de Sites – e até mais em alguns casos. No nível básico, você aninha sua pilha de fontes na propriedade fontFamilies, atribuindo a ela um slug e um nome:

• fontFamily mapeia para o valor CSS font-family e será a pilha de fontes que você deseja usar em seu tema.
• name é o que você vê no Editor de Sites ao selecionar uma fonte, portanto, será legível por humanos.
• slug anexa a uma propriedade CSS personalizada para uso posterior.

Para fontes do sistema, isso é simples:

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

O registro de fontes da web personalizadas exige que você use a propriedade fontFace e defina alguns 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.
    },
…

Depois de registrar as fontes, você as seleciona nos vários menus suspensos do Editor de Sites.

Observe que há algumas maneiras de você registrar fontes para o seu tema. Você tem a Font Library na interface do Editor de Sites, o PHP enqueuing e o plugin Create Block Theme:

Esse é um modelo para a criação de um tema, mas também permite que você registre e defina a tipografia. Depois de registrar as fontes da maneira que for mais confortável (recomendamos a Font Library), você poderá começar a analisar o dimensionamento.

Como definir o tamanho da fonte e as predefinições em theme.json

Outra tarefa essencial da tipografia é a configuração dos tamanhos das fontes. Isso usa a propriedade fontSizes e permite que você defina predefinições para o Editor de Sites:

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

Assim como nas outras configurações de tipografia, o WordPress criará uma propriedade CSS personalizada para cada predefinição, utilizando o slug que você fornecer:

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

O WordPress desativa a tipografia fluida por padrão, mas você pode ativá-la usando valores booleanos. É uma opção que você pode definir em um nível global.

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

…ou para cada predefinição e tamanho que você definir:

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

Os valores min e max permitem determinar o intervalo de escalabilidade para cada tamanho de fonte fluida que você definir.

Implementação de recursos avançados de tipografia

O site theme.json oferece um complemento completo de opções, igual ao que você pode encontrar no Editor de Sites. Isso permite que você personalize a tipografia do seu site com um conjunto de padrões que fazem sentido para o seu tema:

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

Você pode optar por ativar ou desativar essas opções. Cada opção assume um valor booleano, o que significa que você também tem algumas opções de personalização para o Editor de Sites. Há algumas personalizações que você pode fazer que vão além das ofertas do Editor de Sites:

• customFontSize está ativado por padrão e permite que os usuários insiram tamanhos de fonte personalizados, mas você pode desativá-lo se quiser controlar com rigor as opções disponíveis.
• dropCap o padrão é falso, mas se você ativá-lo, o usuário terá a opção de ativar letras maiúsculas para a letra inicial de qualquer bloco de parágrafo.
• textColumns habilita uma opção de “colunas” para qualquer texto em um bloco, e essa opção está desativada por padrão.
• writingMode habilita opções para alterar a orientação do texto no Editor de Sites. Você pode dar aos usuários a opção de escolher entre texto horizontal e vertical.

O escopo do site theme.json significa que você deve trabalhar nele primeiro, especialmente ao criar um tema. As opções no Editor de Sites permitirão que você ou seus usuários refinem a tipografia do WordPress.

Como implementar a tipografia usando theme.json: Um exemplo prático

O FSE torna o design e o desenvolvimento com o WordPress mais fáceis do que nunca. Além disso, parte do processo geral de seleção e implementação desses tipos de fontes é mais simples. Parte disso se deve às tendências de design, mas as ferramentas existem para preencher as lacunas em que você não tem um designer gráfico disponível para ajudar.

Podemos começar com suas principais seleções de fontes.

1. Combine tipografias Complementares

Há um motivo para haver tanto conteúdo sobre como escolher fontes e tipografias: é uma tarefa desafiadora. Você precisa considerar a marca do site, seu propósito e a mensagem que deseja transmitir.

Entretanto, graças às tendências atuais de design, você tem muito menos trabalho a fazer aqui. Isso ocorre porque o corpo do texto pode usar as fontes do sistema, especificamente a fonte principal do sistema operacional (SO). A única tarefa para você é escolher algo que funcione junto com ela.

Este não é um tutorial sobre como combinar fontes, mas temos algumas dicas para você passar adiante:

• As fontes OS para o corpo do texto geralmente são sem serifa. Isso significa que você deve procurar uma fonte serifada ou outra sem serifa que tenha um visual diferente, exclusivo e que se destaque.
• Mantenha a simplicidade e talvez você considere usar apenas a fonte do sistema operacional se ela combinar com o design.
• Teste diferentes combinações, pois você pode ter uma ideia de quais fontes funcionam juntas (e quais não funcionam).

Um bom par para uma pilha de fontes de sistema é o Playfair Display, uma fonte serifada do Google:

Com um par de fontes, você precisa considerar o tamanho delas, não apenas na página, mas em relação uma à outra.

2. Encontre o tamanho absoluto e relativo correto

A escolha do tamanho da fonte também é crucial, pois os tamanhos absolutos errados podem arruinar sua UX/UI. Essa também é uma área em que você pode querer manter os padrões. No entanto, recomendamos que você faça experiências aqui, pois cada par terá seu próprio “espaço” para os tipos de letra.

O Typescale é uma excelente ferramenta que pode ajudar você a criar a tipografia certa para o WordPress, independentemente da sua necessidade:

Um dos melhores aspectos da ferramenta são as opções de escala. Basicamente, ela faz muito trabalho para você na escolha de tamanhos de fontes complementares. Selecionamos uma escala Major Third aqui, com um fator de 1,2 e um tamanho base de 16px:

No painel central, você verá os tamanhos resultantes para cada título e parágrafo e poderá escolher entre várias unidades de medida. Observe que o Typescale também permite que você altere o espaçamento entre letras, a altura da linha, a espessura da fonte e muito mais: tudo personalizável no theme.json.

3. Aplicação de padrões no theme.json

Depois de obter os tipos da fonte e o dimensionamento correto, você pode implementá-los no arquivo theme.json. Aqui está um exemplo de como será um arquivo theme.json típico:

{
  "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)"
        }
      }
    }
  }
}

Você também pode aplicar esses tipos de fontes a qualquer bloco e até mesmo pensar em estilizar cada título de forma exclusiva. Procure criar um sistema de tipografia consistente e hierárquico para o WordPress que formará a base do design do seu tema. Isso garantirá uma aparência coesa em todo o seu site, enquanto o Editor de Sites irá oferecer mais flexibilidade e personalização.

O papel da Kinsta em seu fluxo de trabalho de desenvolvimento de temas WordPress

A hospedagem de alto desempenho da Kinsta oferece diversas soluções para garantir que seu site seja eficiente e rápido. Além disso, proporciona ferramentas de desenvolvimento robustas, como o DevKinsta, um ambiente de desenvolvimento local que opera em contêineres Docker.

É fundamental garantir que a tipografia do seu WordPress esteja funcionando corretamente antes de lançar o site. Nesse sentido, os ambientes de teste da Kinsta são essenciais. Em particular, a funcionalidade de Mover Ambientes de Forma Seletiva será muito útil. Essa opção permite que você mova arquivos e pastas específicos — qualquer ativo que desejar — em vez de transferir tudo de uma vez.

Dessa forma, você pode fazer alterações discretas no design enviando arquivos específicos (como theme.json). Além disso, você pode minimizar o risco de danificar partes do design do seu site com as quais está satisfeito e pode fazer atualizações incrementais mais frequentes na tipografia do seu site.

Resumo

O FSE está evoluindo, e o theme.json é fundamental para toda a abordagem de edição do WordPress. A tipografia é um fator essencial, e o WordPress oferece ferramentas em nível de desenvolvedor e acesso a elementos que antes exigiriam conhecimentos em CSS e PHP.

Com a interface intuitiva do Editor de Sites e a adaptabilidade do theme.json, você pode criar tipografias que aprimoram a estética do seu site, se alinham com sua marca e melhoram a experiência do usuário.

Gostaríamos muito de saber sobre suas experiências com a tipografia do WordPress e se o FSE é a chave do sucesso para você. Compartilhe suas ideias conosco nos comentários abaixo.