theme.json<\/code> ajuda os desenvolvedores a criar temas de WordPress que aproveitam isso.<\/p>\nEste artigo explora a tipografia do WordPress tanto para FSE quanto para theme.json<\/code>. No entanto, a discuss\u00e3o tamb\u00e9m inclui contextos importantes, como a tecnologia que voc\u00ea usa, as considera\u00e7\u00f5es t\u00e9cnicas a serem levadas em conta e a defini\u00e7\u00e3o da evolu\u00e7\u00e3o de como usamos a tipografia no design.<\/p>\n<\/div><\/kinsta-auto-toc>\nTipografia na web: Uma breve hist\u00f3ria<\/h2>\n
Se voc\u00ea observar os primeiros designs da web<\/a>, ver\u00e1 que, apesar da variedade de layouts, as fontes apresentavam uma consist\u00eancia. Isso se deve, em parte, \u00e0 disponibilidade e, em parte, \u00e0 necessidade. Em resumo, sem a tecnologia que temos hoje, as palavras na web s\u00f3 podiam usar fontes dispon\u00edveis no seu computador.<\/p>\nUm “usu\u00e1rio da web” dos anos 90 tinha apenas algumas fontes previs\u00edveis: Times New Roman, Arial, Helvetica, Georgia e Verdana. As duas \u00faltimas s\u00e3o fontes criadas pela Microsoft que se adaptam bem \u00e0 web, independentemente da \u00e9poca.<\/p>\n![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/verdana-georgia.png\")
Detalhes das fontes Verdana e Georgia.<\/figcaption><\/figure>\nEssa sele\u00e7\u00e3o antiga \u00e9 consistente e confi\u00e1vel, mas carece de flexibilidade. Servi\u00e7os como o Google Fonts e o Adobe Fonts<\/a> utilizam o formato de arquivo WOFF para oferecer acesso a uma biblioteca de milhares de fontes, com um processo de incorpora\u00e7\u00e3o simples.<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/google-fonts.png\")
A interface principal do Google Fonts.<\/figcaption><\/figure>\nIsso oferece uma maior capacidade de melhorar a legibilidade, criar designs distintos e personalizar a experi\u00eancia do usu\u00e1rio (UX) do seu site. As desvantagens incluem poss\u00edveis impactos no desempenho (como mudan\u00e7as no layout do conte\u00fado<\/a>), depend\u00eancia de servi\u00e7os de terceiros para exibir o elemento mais crucial do seu site e preocupa\u00e7\u00f5es com a privacidade.<\/p>\nIsso leva muitos web designers a abandonar as bibliotecas de fontes e reconsiderar o uso de fontes do sistema<\/a>. O processamento mais r\u00e1pido e o controle que voc\u00ea tem sobre a aplica\u00e7\u00e3o de uma “pilha de fontes do sistema” que prioriza fontes nativas e tamb\u00e9m usa op\u00e7\u00f5es de fallback, torna uma abordagem s\u00f3lida.<\/p>\nWordPress e tipografia<\/h3>\n
O WordPress enfatiza muito a tipografia para ajudar voc\u00ea a criar conte\u00fado envolvente e leg\u00edvel. Ao longo de sua hist\u00f3ria, todos os temas padr\u00e3o<\/a> do WordPress usam pares de fontes que atingem um equil\u00edbrio entre est\u00e9tica e funcionalidade.<\/p>\nOs temas padr\u00e3o atuais usam conjuntos de fontes do sistema para uma apresenta\u00e7\u00e3o limpa, moderna e eficiente. Os temas padr\u00e3o mais antigos usam pares como Noto Sans e Noto Serif (para o Twenty Fifteen<\/a>) e Montserrat e Merriweather (para o Twenty Sixteen<\/a>).<\/p>\nPara mostrar esse “c\u00edrculo da vida” tipogr\u00e1fico, o Twenty Sixteen usa Helvetica e Georgia como op\u00e7\u00f5es alternativas. O tema padr\u00e3o do Twenty Ten<\/a> usa apenas Helvetica, Arial e Georgia:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/twenty-ten.png\")
A p\u00e1gina de demonstra\u00e7\u00e3o do Twenty Ten do WordPress.org.<\/figcaption><\/figure>\nEmbora essas escolhas definam o tom do design do WordPress em cada tema, elas tamb\u00e9m podem inspirar voc\u00ea a prestar muita aten\u00e7\u00e3o em como usa a tipografia – algo que o WordPress FSE ajuda a fazer.<\/p>\n
Uma r\u00e1pida introdu\u00e7\u00e3o \u00e0 edi\u00e7\u00e3o completa do site e ao theme.json<\/h2>\n
O FSE (Full Site Editing)<\/a> e o theme.json<\/code> s\u00e3o 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.<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/site-editor.png\")
A interface do Editor de Sites do WordPress \u00e9 muito parecida com a do Editor de Blocos, mas com mais possibilidades de personaliza\u00e7\u00e3o.<\/figcaption><\/figure>\nIsso unifica as op\u00e7\u00f5es de design do seu site de v\u00e1rias maneiras:<\/p>\n
\n- Voc\u00ea usa a abordagem de edi\u00e7\u00e3o de blocos para todo o site, n\u00e3o apenas para o conte\u00fado.<\/li>\n
- Uma biblioteca de templates faz parte da configura\u00e7\u00e3o, de modo que voc\u00ea pode edit\u00e1-los usando as mesmas ferramentas que o seu conte\u00fado.<\/li>\n
- O estilo tamb\u00e9m ocorre no Editor de Sites e oferece um esquema de configura\u00e7\u00f5es globais.<\/li>\n
- A edi\u00e7\u00e3o do site n\u00e3o precisa de nenhum c\u00f3digo para que voc\u00ea possa implementar qualquer uma das op\u00e7\u00f5es dispon\u00edveis. Isso preenche a lacuna entre o desenvolvimento e o design para o usu\u00e1rio final.<\/li>\n<\/ul>\n
Voc\u00ea pode considerar o arquivo theme.json<\/code> como uma vers\u00e3o de desenvolvimento do FSE. Voc\u00ea precisa ter conhecimento de JSON (JavaScript Object Notation) para trabalhar com o arquivo, mas isso est\u00e1 dentro dos recursos da maioria dos propriet\u00e1rios de sites. \u00c9 um arquivo de configura\u00e7\u00e3o central para gerenciar seus estilos e configura\u00e7\u00f5es globais.<\/p>\n![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/theme-json.png\")
Um arquivo theme.json exibido em um editor de c\u00f3digo.<\/figcaption><\/figure>\nCada configura\u00e7\u00e3o usa um par chave\/valor de option:value<\/code>, e voc\u00ea pode implementar isso de v\u00e1rias maneiras:<\/p>\n\n- Definindo paletas de cores globais.<\/li>\n
- Configurando fam\u00edlias e tamanhos de fontes.<\/li>\n
- Configurando estilos espec\u00edficos do bloco.<\/li>\n
- Gerenciando prefer\u00eancias de espa\u00e7amento e layout.<\/li>\n<\/ul>\n
O uso do theme.json<\/code> permite que voc\u00ea crie temas mais consistentes e personaliz\u00e1veis sem a necessidade de CSS personalizado<\/a> (embora isso tamb\u00e9m seja poss\u00edvel). A adaptabilidade e a flexibilidade do theme.json<\/code> significam que esse \u00e9 um componente essencial do desenvolvimento de temas para o WordPress. A abordagem ideal \u00e9 usar ambos de maneiras diferentes em todo o design do tema, e a tipografia n\u00e3o \u00e9 exce\u00e7\u00e3o.<\/p>\nConfigura\u00e7\u00e3o da tipografia no Editor de Sites do WordPress<\/h2>\n
Se voc\u00ea sabe como usar o Editor de Blocos, tamb\u00e9m pode usar o Editor de Sites. No WordPress, navegue at\u00e9 a tela Appearance <\/strong>> Editor<\/strong>. Isso exibe a tela inicial do Editor de Sites:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/site-editor-home.png\")
A tela inicial do Editor de Sites.<\/figcaption><\/figure>\nA tela Estilos<\/strong> na navega\u00e7\u00e3o \u00e0 esquerda oferece a voc\u00ea algumas op\u00e7\u00f5es globais de design que incluem altera\u00e7\u00f5es de tipografia:<\/p>\n![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/styles-options.gif\")
Diferentes op\u00e7\u00f5es de estilos predefinidos no Editor de Sites do WordPress.<\/figcaption><\/figure>\nPara a maioria dos casos de uso, as configura\u00e7\u00f5es individuais para v\u00e1rios aspectos de tipografia dar\u00e3o a voc\u00ea mais valor. H\u00e1 dois pequenos \u00edcones na parte superior da tela Styles<\/strong> que abrir\u00e3o outras op\u00e7\u00f5es: o Style Book e o \u00edcone de l\u00e1pis Edit Styles<\/strong>.<\/p>\n![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/styles-sidebar-icons.png\")
Os \u00edcones de edi\u00e7\u00e3o de estilos no Editor de Sites.<\/figcaption><\/figure>\nAl\u00e9m disso, voc\u00ea pode definir op\u00e7\u00f5es de tipografia em n\u00edvel de elemento e para cada bloco.<\/p>\n
A biblioteca de fontes<\/h3>\n
A tela Edit Styles <\/strong>> Typography <\/strong>exibe a Biblioteca de fontes, embora ela n\u00e3o tenha esse nome expl\u00edcito no Editor de Sites. Isso permite que voc\u00ea manipule fontes e tipos de letra de algumas maneiras:<\/p>\n\n- Voc\u00ea pode carregar e gerenciar fontes personalizadas.<\/li>\n
- Voc\u00ea pode carregar e gerenciar fontes personalizadas. H\u00e1 uma op\u00e7\u00e3o para usar o Google Fonts diretamente no WordPress.<\/li>\n
- Voc\u00ea pode criar cole\u00e7\u00f5es de fontes<\/a> usando PHP.<\/li>\n<\/ul>\n
Para acessar a Font Library (Biblioteca de fontes) na se\u00e7\u00e3o Typography (Tipografia) na barra lateral do Editor de Sites, clique no \u00edcone Manage fonts (Gerenciar fontes<\/strong>):<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/manage-fonts-icon.png\")
O \u00edcone Manage Fonts (Gerenciar fontes)<\/strong> no Editor de Sites do WordPress.<\/figcaption><\/figure>\nAqui, a aba Library (Biblioteca)<\/strong> mostra a voc\u00ea as fontes registradas atualmente para o seu tema e indica quais est\u00e3o ativas:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-library-dialog.png\")
A interface da Biblioteca de fontes do WordPress.<\/figcaption><\/figure>\nAo clicar em qualquer uma delas, voc\u00ea pode ativar ou desativar fontes individuais:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/active-fonts.png\")
As fontes ativas atuais na biblioteca de fontes do Editor de Sites.<\/figcaption><\/figure>\nNa aba Upload<\/strong>, voc\u00ea usa uma caixa de di\u00e1logo de upload de arrastar e soltar para instalar suas pr\u00f3prias fontes nos formatos TTF, WOFF, WOFF2 e OTF.<\/p>\nA aba Install Fonts<\/strong> se conecta ao Google Fonts, para que voc\u00ea 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<\/a>:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/google-fonts-library.png\")
A biblioteca do Google Fonts no Editor de Sites do WordPress.<\/figcaption><\/figure>\nAqui, selecione as fontes que voc\u00ea deseja instalar na lista abrangente e clique no bot\u00e3o Instalar<\/strong>. Quando a notifica\u00e7\u00e3o de sucesso for exibida, essas fontes ser\u00e3o mostradas na aba Biblioteca<\/strong>:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/installed-fonts.png\")
As fontes instaladas para uma inst\u00e2ncia do WordPress.<\/figcaption><\/figure>\nIsso permite que voc\u00ea use as fontes como faria com qualquer outra em seu site. Agora, voc\u00ea precisa personaliz\u00e1-las para atender \u00e0s suas necessidades.<\/p>\n
O livro de estilos<\/h3>\n
Um dos perigos de escolher e definir tipografias \u00e9 que voc\u00ea n\u00e3o sabe como elas ficar\u00e3o em combina\u00e7\u00e3o com esquemas de cores, layouts e formata\u00e7\u00f5es. O Livro de Estilos \u00e9 inestim\u00e1vel, pois permite que voc\u00ea visualize suas configura\u00e7\u00f5es de tipografia em diferentes elementos.<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/style-book.png\")
O Livro de estilos do Editor de sites.<\/figcaption><\/figure>\nSe voc\u00ea escolher o \u00edcone de “olho”, abrir\u00e1 o Livro de estilos, que tem cinco guias:<\/p>\n
\n- Texto<\/strong>: V\u00e1 at\u00e9 aqui para trabalhar com par\u00e1grafos, cabe\u00e7alhos, listas e outros elementos que se concentram no texto.<\/li>\n
- M\u00eddia<\/strong>: Aqui, voc\u00ea pode ajustar as apresenta\u00e7\u00f5es de design de imagens, v\u00eddeo e \u00e1udio.<\/li>\n
- Design<\/strong>: Esta se\u00e7\u00e3o re\u00fane aspectos de design estrutural, como colunas, separadores e bot\u00f5es.<\/li>\n
- Widgets<\/strong>: H\u00e1 dois elementos nessa tela: gera\u00e7\u00f5es din\u00e2micas, como listas de arquivos e coment\u00e1rios. Voc\u00ea tamb\u00e9m trabalha com a barra de pesquisa, os \u00edcones de m\u00eddia social e as nuvens de tags aqui.<\/li>\n
- Tema<\/strong>: Aqui voc\u00ea se concentra nos elementos do cabe\u00e7alho do seu site, como t\u00edtulo, slogan, navega\u00e7\u00e3o e logo.<\/li>\n<\/ul>\n
Se voc\u00ea clicar em um elemento no Livro de Estilos, ter\u00e1 v\u00e1rias op\u00e7\u00f5es para explorar na barra lateral. Voc\u00ea est\u00e1 trabalhando com as configura\u00e7\u00f5es de tipografia para cada bloco aqui, em vez de elementos dedicados.<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/style-book-editing.png\")
Voc\u00ea tem total liberdade para editar as fontes diretamente no Livro de estilos.<\/figcaption><\/figure>\nVoc\u00ea pode acessar as mesmas telas atrav\u00e9s da se\u00e7\u00e3o Styles <\/strong>> Blocks<\/strong> (Estilos\u00a0> Blocos<\/strong>) na p\u00e1gina inicial do Editor de Sites. De qualquer forma, as op\u00e7\u00f5es que voc\u00ea v\u00ea permitem personalizar a tipografia (e mais) de cada bloco em detalhes granulares.<\/p>\nComo ajustar as op\u00e7\u00f5es de tipografia no Editor de Sites<\/h3>\n
Para todos os blocos e elementos, voc\u00ea tem as mesmas op\u00e7\u00f5es principais dispon\u00edveis. Aqui est\u00e1 uma introdu\u00e7\u00e3o de cada op\u00e7\u00e3o no painel.<\/p>\n
Tipo e tamanho da fonte<\/h4>\n
O menu suspenso Font (Fonte)<\/strong> \u00e9 simples: Escolha a fonte que voc\u00ea deseja aplicar ao elemento ou bloco espec\u00edfico:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-drop-down.png\")
Escolhendo uma fonte da sele\u00e7\u00e3o dispon\u00edvel na aba Tipografia.<\/figcaption><\/figure>\nAs predefini\u00e7\u00f5es de tamanho<\/strong> t\u00eam o m\u00ednimo de personaliza\u00e7\u00e3o no Editor de Sites. Voc\u00ea escolhe um tamanho em um intervalo entre Pequeno e Extra Extra Grande:<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/size-presets.png\")
O WordPress oferece predefini\u00e7\u00f5es de tamanho de fonte no Editor de Sites.<\/figcaption><\/figure>\nSe voc\u00ea editar theme.json<\/code>, poder\u00e1 alterar esses valores predefinidos, mas n\u00e3o poder\u00e1 faz\u00ea-lo no Editor de Sites. O bot\u00e3o Definir tamanho personalizado<\/strong> oferece a voc\u00ea uma maneira de definir um tamanho personalizado usando uma matriz de unidades de dimensionamento:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-size-custom.png\")
Escolhendo um tamanho e uma unidade de fonte personalizados.<\/figcaption><\/figure>\nH\u00e1 mais maneiras de ajustar a tipografia no Editor de Sites, incluindo m\u00e9todos para os quais voc\u00ea normalmente usa CSS.<\/p>\n
Apar\u00eancia, altura da linha e espa\u00e7amento entre letras<\/h4>\n
O menu suspenso Appearance<\/strong> parece simples: Voc\u00ea escolhe o peso da fonte em uma extensa lista e ele ser\u00e1 aplicado ao seu texto. No entanto, muitas vezes voc\u00ea n\u00e3o ter\u00e1 todas as fontes dispon\u00edveis para cada peso.<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/appearance-drop-down.png\")
O menu suspenso Appearance no Editor de Sites do WordPress.<\/figcaption><\/figure>\nNossos testes mostram que o WordPress n\u00e3o filtra essa lista para mostrar apenas os pesos de fonte dispon\u00edveis. Al\u00e9m disso, ele aplicar\u00e1 uma “correspond\u00eancia mais pr\u00f3xima” se voc\u00ea 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\u00ea escolher Semi Bold, Bold, Extra Bold ou Black, usar\u00e1 somente a Cardo Bold:<\/p>\n![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/bold-appearance.gif\")
Alterando a apar\u00eancia do texto no WordPress Editor de Sites.<\/figcaption><\/figure>\nA altura da linha n\u00e3o utiliza predefini\u00e7\u00f5es e equilibra sua escolha de fonte, apar\u00eancia e tamanho. Esse valor adiciona mais espa\u00e7o entre cada linha e \u00e9 frequentemente uma implementa\u00e7\u00e3o pr\u00e1tica quando o texto parece agrupado:<\/p>\n![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/line-height.gif\")
Alterando a altura da linha no Editor de Sites do WordPress.<\/figcaption><\/figure>\nO espa\u00e7amento entre letras \u00e9 semelhante e segue o costume do CSS de se adicionar ao espa\u00e7amento natural que est\u00e1 presente:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/letter-spacing.png\")
Voc\u00ea pode aumentar demais o espa\u00e7amento entre letras para que ele seja utiliz\u00e1vel.<\/figcaption><\/figure>\nAssim como no dimensionamento personalizado de fontes, voc\u00ea pode selecionar diferentes unidades de medida. A escolha de um valor relativo costuma ser a abordagem prefer\u00edvel nesse caso. O WordPress define o espa\u00e7amento entre letras como um padr\u00e3o CSS de “normal” Isso permite que o navegador escolha o valor e, em nossa experi\u00eancia, \u00e9 o ideal.<\/p>\n
\u00c9 uma pr\u00e1tica comum usar pequenos valores positivos de espa\u00e7amento entre letras – geralmente n\u00e3o mais do que 0,12rem\/em – e quase nenhum espa\u00e7amento negativo.<\/p>\n
O conjunto final de op\u00e7\u00f5es – letras mai\u00fasculas e min\u00fasculas – permite que voc\u00ea escolha se o texto deve ser em letras mai\u00fasculas, min\u00fasculas ou senten\u00e7as. Voc\u00ea tamb\u00e9m pode remover a caixa. Isso \u00e9 \u00f3timo para a consist\u00eancia quando se trata de digita\u00e7\u00e3o, pois voc\u00ea n\u00e3o precisa usar especificamente um caso espec\u00edfico ao criar conte\u00fado.<\/p>\n
Como usar o theme.json para definir a tipografia do seu tema do WordPress<\/h2>\n
O Editor de Sites \u00e9 excelente para usu\u00e1rios do site sem conhecimento t\u00e9cnico. O arquivo theme.json<\/code> \u00e9 como voc\u00ea garante que o Editor de Sites forne\u00e7a aos usu\u00e1rios o que eles precisam para personalizar seus sites. \u00c9 o arquivo de configura\u00e7\u00e3o que \u00e9 a base de desenvolvimento do seu tema.<\/p>\nN\u00e3o abordaremos a estrutura e a formata\u00e7\u00e3o de todo o arquivo theme.json <\/code>, mas veremos como definir, configurar e aplicar a tipografia nele.<\/p>\nCompreendendo a estrutura do theme.json e definindo configura\u00e7\u00f5es globais<\/h3>\n
No arquivo theme.json<\/code>, voc\u00ea utiliza JSON para definir todos os elementos, incluindo a typography<\/code>. O elemento de tipografia est\u00e1 aninhado sob o objeto settings<\/code>. A partir desse ponto, voc\u00ea pode adicionar outros elementos, propriedades e objetos para personalizar a tipografia do seu site:<\/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 esses elementos seguem um padr\u00e3o semelhante. Os padr\u00f5es – e os mais f\u00e1ceis de entender – s\u00e3o as configura\u00e7\u00f5es globais. Elas s\u00e3o aninhadas de forma direta, mas voc\u00ea tamb\u00e9m pode definir configura\u00e7\u00f5es de tipografia para blocos individuais:<\/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>\nIsso usa a propriedade blocks<\/code> e um namespace espec\u00edfico para cada bloco que voc\u00ea deseja segmentar. Embora isso adicione mais duas camadas de aninhamento, n\u00e3o h\u00e1 alternativa a essa abordagem. Independentemente disso, voc\u00ea tem muitas propriedades com as quais pode brincar.<\/p>\nRegistrando fontes<\/h3>\n
Voc\u00ea tem o mesmo n\u00edvel de personaliza\u00e7\u00e3o<\/a> de tipografia que tem na interface do Editor de Sites – e at\u00e9 mais em alguns casos. No n\u00edvel b\u00e1sico, voc\u00ea aninha sua pilha de fontes na propriedade fontFamilies<\/code>, atribuindo a ela um slug e um nome:<\/p>\n\nfontFamily<\/code> mapeia para o valor CSS font-family<\/code> e ser\u00e1 a pilha de fontes que voc\u00ea deseja usar em seu tema.<\/li>\nname<\/code> \u00e9 o que voc\u00ea v\u00ea no Editor de Sites ao selecionar uma fonte, portanto, ser\u00e1 leg\u00edvel por humanos.<\/li>\nslug<\/code> anexa a uma propriedade CSS personalizada para uso posterior.<\/li>\n<\/ul>\nPara fontes do sistema, isso \u00e9 simples:<\/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>\nO registro de fontes da web personalizadas exige que voc\u00ea use a propriedade fontFace<\/code> e defina alguns 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>\nDepois de registrar as fontes, voc\u00ea as seleciona nos v\u00e1rios menus suspensos do Editor de Sites.<\/p>\n
Observe que h\u00e1 algumas maneiras de voc\u00ea registrar fontes para o seu tema. Voc\u00ea tem a Font Library na interface do Editor de Sites, o PHP enqueuing<\/a>\u00a0e o plugin Create Block Theme<\/a>:<\/p>\n![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/create-block-theme.png\")
A imagem do cabe\u00e7alho do Create Block Theme do WordPress.org.<\/figcaption><\/figure>\nEsse \u00e9 um modelo para a cria\u00e7\u00e3o de um tema, mas tamb\u00e9m permite que voc\u00ea registre e defina a tipografia. Depois de registrar as fontes da maneira que for mais confort\u00e1vel (recomendamos a Font Library), voc\u00ea poder\u00e1 come\u00e7ar a analisar o dimensionamento.<\/p>\n
Como definir o tamanho da fonte e as predefini\u00e7\u00f5es em theme.json<\/h3>\n
Outra tarefa essencial da tipografia \u00e9 a configura\u00e7\u00e3o dos tamanhos das fontes. Isso usa a propriedade fontSizes<\/code> e permite que voc\u00ea defina predefini\u00e7\u00f5es para o Editor de Sites:<\/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>\nAssim como nas outras configura\u00e7\u00f5es de tipografia, o WordPress criar\u00e1 uma propriedade CSS personalizada para cada predefini\u00e7\u00e3o, utilizando o slug que voc\u00ea fornecer:<\/p>\n
body {\n--wp--preset--font-size--small: 12px;\n--wp--preset--font-size--x-large: 32px;\n}<\/code><\/pre>\nO WordPress desativa a tipografia fluida por padr\u00e3o, mas voc\u00ea pode ativ\u00e1-la usando valores booleanos. \u00c9 uma op\u00e7\u00e3o que voc\u00ea pode definir em um n\u00edvel global.<\/p>\n
{\n \"version\": 2,\n \"settings\": {\n \"typography\": {\n \"fluid\": true\n }\n }\n}<\/code><\/pre>\n…ou para cada predefini\u00e7\u00e3o e tamanho que voc\u00ea definir:<\/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>\nOs valores min<\/code> e max<\/code> permitem determinar o intervalo de escalabilidade para cada tamanho de fonte fluida que voc\u00ea definir.<\/p>\nImplementa\u00e7\u00e3o de recursos avan\u00e7ados de tipografia<\/h3>\n
O site theme.json<\/code> oferece um complemento completo de op\u00e7\u00f5es, igual ao que voc\u00ea pode encontrar no Editor de Sites. Isso permite que voc\u00ea personalize a tipografia do seu site com um conjunto de padr\u00f5es que fazem sentido para o seu 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>\nVoc\u00ea pode optar por ativar ou desativar<\/a> essas op\u00e7\u00f5es. Cada op\u00e7\u00e3o assume um valor booleano, o que significa que voc\u00ea tamb\u00e9m tem algumas op\u00e7\u00f5es de personaliza\u00e7\u00e3o para o Editor de Sites. H\u00e1 algumas personaliza\u00e7\u00f5es que voc\u00ea pode fazer que v\u00e3o al\u00e9m das ofertas do Editor de Sites:<\/p>\n\ncustomFontSize<\/code> est\u00e1 ativado por padr\u00e3o e permite que os usu\u00e1rios insiram tamanhos de fonte personalizados, mas voc\u00ea pode desativ\u00e1-lo se quiser controlar com rigor as op\u00e7\u00f5es dispon\u00edveis.<\/li>\ndropCap<\/code> o padr\u00e3o \u00e9 falso, mas se voc\u00ea ativ\u00e1-lo, o usu\u00e1rio ter\u00e1 a op\u00e7\u00e3o de ativar letras mai\u00fasculas para a letra inicial de qualquer bloco de par\u00e1grafo.<\/li>\ntextColumns<\/code> habilita uma op\u00e7\u00e3o de “colunas” para qualquer texto em um bloco, e essa op\u00e7\u00e3o est\u00e1 desativada por padr\u00e3o.<\/li>\nwritingMode<\/code> habilita op\u00e7\u00f5es para alterar a orienta\u00e7\u00e3o do texto no Editor de Sites. Voc\u00ea pode dar aos usu\u00e1rios a op\u00e7\u00e3o de escolher entre texto horizontal e vertical.<\/li>\n<\/ul>\nO escopo do site theme.json<\/code> significa que voc\u00ea deve trabalhar nele primeiro, especialmente ao criar um tema. As op\u00e7\u00f5es no Editor de Sites permitir\u00e3o que voc\u00ea ou seus usu\u00e1rios refinem a tipografia do WordPress.<\/p>\nComo implementar a tipografia usando theme.json: Um exemplo pr\u00e1tico<\/h2>\n
O FSE torna o design e o desenvolvimento com o WordPress mais f\u00e1ceis do que nunca. Al\u00e9m disso, parte do processo geral de sele\u00e7\u00e3o e implementa\u00e7\u00e3o desses tipos de fontes \u00e9 mais simples. Parte disso se deve \u00e0s tend\u00eancias de design, mas as ferramentas existem para preencher as lacunas em que voc\u00ea n\u00e3o tem um designer gr\u00e1fico dispon\u00edvel para ajudar.<\/p>\n
Podemos come\u00e7ar com suas principais sele\u00e7\u00f5es de fontes.<\/p>\n
<\/div><\/kinsta-auto-toc>\n1. Combine tipografias Complementares<\/h3>\n
H\u00e1 um motivo para haver tanto conte\u00fado sobre como escolher fontes<\/a> e tipografias: \u00e9 uma tarefa desafiadora. Voc\u00ea precisa considerar a marca do site, seu prop\u00f3sito e a mensagem que deseja transmitir.<\/p>\nEntretanto, gra\u00e7as \u00e0s tend\u00eancias atuais de design, voc\u00ea 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 \u00fanica tarefa para voc\u00ea \u00e9 escolher algo que funcione junto com ela.<\/p>\n
Este n\u00e3o \u00e9 um tutorial sobre como combinar fontes, mas temos algumas dicas para voc\u00ea passar adiante:<\/p>\n
\n- As fontes OS para o corpo do texto geralmente s\u00e3o sem serifa. Isso significa que voc\u00ea deve procurar uma fonte serifada ou outra sem serifa que tenha um visual diferente, exclusivo e que se destaque.<\/li>\n
- Mantenha a simplicidade e talvez voc\u00ea considere usar apenas a fonte do sistema operacional se ela combinar com o design.<\/li>\n
- Teste diferentes combina\u00e7\u00f5es, pois voc\u00ea pode ter uma ideia de quais fontes funcionam juntas (e quais n\u00e3o funcionam).<\/li>\n<\/ul>\n
Um bom par para uma pilha de fontes de sistema \u00e9 o Playfair Display<\/a>, uma fonte serifada do Google<\/a>:<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/playfair-display.png\")
A p\u00e1gina de amostra do Google Fonts para a Playfair Display.<\/figcaption><\/figure>\nCom um par de fontes, voc\u00ea precisa considerar o tamanho delas, n\u00e3o apenas na p\u00e1gina, mas em rela\u00e7\u00e3o uma \u00e0 outra.<\/p>\n
2. Encontre o tamanho absoluto e relativo correto<\/h3>\n
A escolha do tamanho da fonte tamb\u00e9m \u00e9 crucial, pois os tamanhos absolutos errados podem arruinar sua UX\/UI. Essa tamb\u00e9m \u00e9 uma \u00e1rea em que voc\u00ea pode querer manter os padr\u00f5es. No entanto, recomendamos que voc\u00ea fa\u00e7a experi\u00eancias aqui, pois cada par ter\u00e1 seu pr\u00f3prio “espa\u00e7o” para os tipos de letra.<\/p>\n
O Typescale<\/a> \u00e9 uma excelente ferramenta que pode ajudar voc\u00ea a criar a tipografia certa para o WordPress, independentemente da sua necessidade:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/typescale-site.png\")
O site da Typescale.<\/figcaption><\/figure>\nUm dos melhores aspectos da ferramenta s\u00e3o as op\u00e7\u00f5es de escala. Basicamente, ela faz muito trabalho para voc\u00ea 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:<\/p>\n![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/font-sizing-scale.png\")
As op\u00e7\u00f5es de escala de fonte no Typeface.<\/figcaption><\/figure>\nNo painel central, voc\u00ea ver\u00e1 os tamanhos resultantes para cada t\u00edtulo e par\u00e1grafo e poder\u00e1 escolher entre v\u00e1rias unidades de medida. Observe que o Typescale tamb\u00e9m permite que voc\u00ea altere o espa\u00e7amento entre letras, a altura da linha, a espessura da fonte e muito mais: tudo personaliz\u00e1vel no theme.json<\/code>.<\/p>\n3. Aplica\u00e7\u00e3o de padr\u00f5es no theme.json<\/h3>\n
Depois de obter os tipos da fonte e o dimensionamento correto, voc\u00ea pode implement\u00e1-los no arquivo theme.json<\/code>. Aqui est\u00e1 um exemplo de como ser\u00e1 um arquivo theme.json<\/code> t\u00edpico:<\/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>\nVoc\u00ea tamb\u00e9m pode aplicar esses tipos de fontes a qualquer bloco e at\u00e9 mesmo pensar em estilizar cada t\u00edtulo de forma exclusiva. Procure criar um sistema de tipografia consistente e hier\u00e1rquico para o WordPress que formar\u00e1 a base do design do seu tema. Isso garantir\u00e1 uma apar\u00eancia coesa em todo o seu site, enquanto o Editor de Sites ir\u00e1 oferecer mais flexibilidade e personaliza\u00e7\u00e3o.<\/p>\n
O papel da Kinsta em seu fluxo de trabalho de desenvolvimento de temas WordPress<\/h2>\n
A hospedagem de alto desempenho da Kinsta oferece diversas solu\u00e7\u00f5es para garantir que seu site seja eficiente e r\u00e1pido. Al\u00e9m disso, proporciona ferramentas de desenvolvimento robustas, como o DevKinsta<\/a>, um ambiente de desenvolvimento local que opera em cont\u00eaineres Docker<\/a>.<\/p>\n![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/devkinsta-home.png\")
A logo do DevKinsta.<\/figcaption><\/figure>\n\u00c9 fundamental garantir que a tipografia do seu WordPress esteja funcionando corretamente antes de lan\u00e7ar o site. Nesse sentido, os ambientes de teste da Kinsta s\u00e3o essenciais. Em particular, a funcionalidade de Mover Ambientes de Forma Seletiva<\/a> ser\u00e1 muito \u00fatil. Essa op\u00e7\u00e3o permite que voc\u00ea mova arquivos e pastas espec\u00edficos \u2014 qualquer ativo que desejar \u2014 em vez de transferir tudo de uma vez.<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/09\/selective-push.png\")
A ferramenta de mover ambientes de forma seletiva da Kinsta.<\/figcaption><\/figure>\n