A tipografia fluida é uma maneira extravagante de “descrever propriedades de fonte, como tamanho ou altura da linha, que escalam fluidamente de acordo com o tamanho da janela de visualização”. Isso é também conhecido por outros nomes, como tipografia responsiva, tipo flexível, tipo fluido, tipografia do tamanho da janela de visualização, tipografia fluida e até mesmo texto de exibição responsivo.
Aqui está um exemplo de tipografia fluida que você pode tocar ao vivo (cortesia de Documentação MDN). CSS-Tricks cobriu tipografia fluida extensivamente também. Mas o objetivo aqui não é apresentar a tipografia fluida, mas como usá-la. Mais especificamente, quero mostrar como implementar tipografia fluida no WordPress 6.1, que recentemente introduziu um recurso de tipo fluido diretamente no WordPress Block Editor.
Abra o seu style.css arquivo, tapa em uma regra de estilo com fantasia clamp()-indo no font-size propriedade, e pronto para ir, certo? Claro, isso lhe dará um texto fluido, mas para obter controles do Block Editor que possibilitam aplicar o tipo fluido em qualquer lugar do seu site WordPress? Isso requer uma abordagem diferente nestes dias de bloqueio.
Suporte de tipografia fluida em Gutenberg
Alguns desenvolvedores de temas WordPress têm usado o clamp() função para definir um fluido font-size, em seus temas do WordPress, mesmo em temas de “bloqueio” mais recentes, como Vinte e Vinte e Dois, Vinte e vinte e três, E outros.
Mas o plugin Gutenberg - aquele que contém desenvolvimento experimental para os recursos do WordPress Block e Site Editor - introduziu suporte para tipografia fluida começando na versão 13.8. Isso abriu a porta para a implementação em nível de tema para que o tipo de fluido possa ser aplicado a elementos e blocos específicos diretamente no Editor de Blocos. CSS-Tricks recebeu até um grito no Solicitação de pull que fundiu o recurso.
Esse trabalho tornou-se parte do WordPress Core em Wordpress 6.1. Rich Tabor, um dos primeiros defensores da tipografia fluida no Block Editor, diz:
A [tipografia fluida] também faz parte de tornar o WordPress mais poderoso, embora não seja mais complicado (o que todos sabemos que é um grande desafio). […] A tipografia fluida simplesmente funciona. Na verdade, acho que funciona muito bem.
Esta Faça destaques de postagens do WordPress a abordagem adotada para oferecer suporte ao recurso no nível do bloco para que um tamanho de fonte fluido seja aplicado aos blocos dinamicamente por padrão. Há alguns benefícios para isso, é claro:
- Ele fornece uma maneira para os autores de temas ativarem a tipografia fluida sem se preocupar em implementá-la no código.
- Aplica tipografia fluida a entidades tipográficas específicas, como elementos ou blocos de forma sustentável e reutilizável.
- Permite flexibilidade em termos de unidades de tamanho de fonte (por exemplo,
px,rem,eme%).
Agora que esse novo recurso está disponível no WordPress Block Editor por padrão, os autores do tema podem aplicar tipografia fluida uniforme sem escrever código adicional.
Blocos que suportam configurações de tipografia e espaçamento
Gutenberg 14.1 lançado em 16 de setembro de 2022, e introduziu configurações tipográficas em vários blocos. Isso significa que as configurações de texto para esses blocos foram definidas em CSS antes e tiveram que ser alteradas em CSS também. Mas esses blocos agora fornecem controles de fonte e espaçamento na interface do Editor de blocos.
Esse trabalho está programado para ser adicionado ao WordPress 6.1, conforme detalhado em esta postagem no blog Make WordPress. E com ele é um número ampliado de blocos que com suporte de tipografia.
Declarando o tipo fluido em um tema de bloco do WordPress
Então, como podemos usar essa nova tipografia fluida no WordPress? A resposta está em theme.json, um novo arquivo específico para bloquear temas que contém várias configurações de temas em pares chave:valor.
Vejamos uma regra para uma fonte grande em theme.json onde contentSize: 768px e estamos trabalhando com um widesize: 1600px disposição. É assim que podemos especificar um CSS font-size usando o clamp() função:
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"name": "Large",
"size": "clamp(2.25rem, 6vw, 3rem)",
"slug": "large"
}
]
}
}A partir do WordPress 6.1, apenas rem, em e px unidades são suportadas.
Isso é ótimo e funciona, mas com o novo recurso de tipo de fluido, usaríamos uma abordagem diferente. Primeiro, optamos pela tipografia fluida em settings.typography, que tem um novo fluid propriedade:
"settings": {
"typography": {
"fluid": true
}
}Em seguida, especificamos nosso settings.fontSizes como antes, mas com um novo fluidSize propriedade onde podemos definir o min e max valores de tamanho para nossa faixa de tipo de fluido.
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fontSizes": [
{
"size": "2.25rem",
"fluidSize": {
"min": "2.25rem",
"max": "3rem"
},
"slug": "large",
"name": "Large"
}
]
}
}É isso mesmo. Acabamos de adicionar o tipo fluido a um tamanho de fonte chamado “Large” com um intervalo que começa em 2.25rem e escala até 3rem. Agora, podemos aplicar a fonte “Large” a qualquer bloco com configurações de fonte.
Como isso funciona sob o capô? Rich Tabor oferece uma boa explicação, como faz esta solicitação de pull no GitHub. Em suma, o WordPress converte o theme.json properties na seguinte regra CSS:
.has-large-font-size {
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}…que é aplicado ao elemento, digamos um Bloco de Parágrafo:
...
Inicialmente, achei difícil entender e envolver em minha mente o conceito do CSS clamp() função sem também aprender sobre o min(), max() e calc() funções. Esta ferramenta calculadora me ajudou bastante, especialmente para determinar quais valores usar em meus próprios projetos temáticos.
Para fins de demonstração, vamos usar a calculadora para definir nosso font-size alcance para que o tamanho seja 36px num 768px largura da janela de visualização e 48px num 1600px largura da janela de visualização.
A calculadora gera automaticamente o seguinte CSS:
/* 36px @ 768px increasing to 48px @ 1600px */
font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);A calculadora oferece opções para selecionar unidades de entrada como px, rem e em. Se selecionarmos rem unidade, a calculadora gera o seguinte clamp() valor:
/* 2.25rem @ 48rem increasing to 3rem @ 100rem */
font-size: clamp(2.25rem, calc(2.25rem + ((1vw - 0.48rem) * 1.4423)), 3rem);Assim, esses valores mínimo e máximo correspondem ao fluidSize.min e fluidSize.max valores em theme.json. O min valor é aplicado em viewports que são 768px largo e abaixo. Então o font-size aumenta à medida que a largura da janela de visualização aumenta. Se a janela de visualização for maior que 1600px, max é aplicado e o font-size é tampado lá.
Exemplos
Tem instruções de teste detalhadas no Pull Request mesclado que introduziu o recurso. Existem ainda mais instruções de teste de Post de pré-lançamento de Justin Tadlock no Make WordPress.
Exemplo 1: definindo uma nova configuração de fonte fluida
Vamos começar com o conjunto de instruções de Justin. Eu usei em uma versão modificada do padrão Vinte e vinte e três tema que está atualmente em desenvolvimento.
Primeiro, vamos ter certeza de que estamos executando o plug-in Gutenberg (13.8 e superior) ou WordPress 6.1 e, em seguida, opte pelo tipo fluido no settings.typography.fluid propriedade no theme.json arquivo:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
}
}
}Agora, vamos largar o settings.typography.fontSizes exemplos aí:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1600px"
},
"typography": {
"fluid": true
"fontSizes": [
{
"name": "Normal",
"size": "1.125rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal"
}
]
}
}
}Se tudo estiver funcionando corretamente, agora podemos entrar no WordPress Block Editor e aplicar a configuração de fonte “Normal” ao nosso bloco:
Agradável! E se salvarmos e inspecionarmos esse elemento no front-end, esta é a marcação:
Muito bom. Agora vamos ter certeza de que o CSS está realmente lá:
Bom Bom. Vamos expor essa propriedade customizada do CSS para ver se ela está realmente apertando as coisas:
Parece que tudo está funcionando exatamente como queremos! Vejamos outro exemplo…
Exemplo 2: excluindo uma configuração de fonte do tipo fluido
Desta vez, vamos seguir o instruções da Pull Request mesclada com um aceno para este exemplo de Carolina Nymark que mostra como podemos desabilitar o tipo fluido em uma configuração de fonte específica.
Eu usei o tema vazio conforme indicado nas instruções e abriu o theme.json arquivo para teste. Primeiro, optamos pelo tipo de fluido exatamente como fizemos antes:
{
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "768px",
"wideSize": "1000px"
},
"typography": {
"fluid": true
}
}
}Desta vez, estamos trabalhando com menores wideSize valor de 1000px em vez de 1600px. Isso deve nos permitir ver o tipo de fluido funcionando em uma faixa exata.
OK, vamos definir alguns tamanhos de fonte personalizados em settings.typography.fontSizes:
{
"version": 2,
"settings": {
"typography": {
"fluid": true,
"fontSizes": [
{
"size": ".875rem",
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"slug": "small",
"name": "Small"
},
{
"size": "1rem",
"fluid": {
"min": "1rem",
"max": "1.5rem"
},
"slug": "normal",
"name": "Normal"
},
{
"size": "1.5rem",
"fluid": {
"min": "1.5rem",
"max": "2rem"
},
"slug": "large",
"name": "Large"
},
{
"size": "2.25rem",
"fluid": false,
"slug": "x-large",
"name": "Extra large"
}
]
}
}
}Observe que aplicamos o recurso de tipo fluido apenas nas configurações de fonte "Normal", "Média" e "Grande". “Extra Large” é o estranho onde o fluid objeto está definido para false.
O que o WordPress faz a partir daqui — através do Motor estilo Gutenberg — é aplicar as propriedades que definimos no CSS clamp() funções para cada configuração de tamanho de fonte que optou pelo tipo fluido e um valor de tamanho único para a configuração Extra Grande:
--wp--preset--font-size--small: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem);
--wp--preset--font-size--x-large: 2.25rem;Vamos verificar a marcação no front-end:
Bom começo! Vamos confirmar que o .has-x-large-font-size classe é excluída do tipo de fluido:
Se expormos o --wp--preset--font-size--x-large variável, veremos que está definido como 2.25rem.
É exatamente isso que queremos!
Temas de bloco que suportam tipografia fluida
Muitos temas do WordPress já fazem uso do clamp() função para tipo fluido em temas de bloco e clássicos. Um bom exemplo de uso de tipografia fluida é o recém-lançado Vinte e vinte e três tema padrão.
Revisei todos os temas de bloco de Diretório de temas de bloco do WordPress, examinando theme.json arquivo de cada tema e para ver quantos temas de bloco atualmente suportam tipografia fluida - não o novo recurso, pois ainda está no plug-in Gutenberg no momento da redação deste artigo - usando o CSS clamp() função. Dos 146 temas que revisei, a maioria deles utilizou um clamp() função para definir o espaçamento. Um pouco mais da metade deles usou clamp() para definir tamanhos de fonte. o Alara o tema é o único a usar clamp() para definir o tamanhos de contêiner de layout.
Compreensivelmente, apenas alguns temas lançados recentemente contêm o novo recurso de tipografia fluida. Mas aqui estão os que eu encontrei que o definem em theme.json:
E se você leu meu post anterior aqui sobre CSS-Tricks, o Blocos Gopher TT2 O tema que usei para a demonstração também foi atualizado para oferecer suporte ao recurso de tipografia fluida.
Reações selecionadas aos recursos de tipografia fluida do WordPress
Ter tipografia fluida no WordPress no nível de configurações é super empolgante! Eu pensei em compartilhar alguns pensamentos de pessoas da comunidade de desenvolvedores do WordPress que comentaram sobre isso.
Matias Ventura, o principal arquiteto do projeto Gutenberg:
Como um dos maiores esforços para tornar a publicação de páginas maravilhosamente ricas no WordPress, a tipografia fluida é uma grande experiência para quem constrói com o WordPress – e para quem consome o conteúdo.
Desenvolvedor automático Ramon Dodd comentou na solicitação de pull:
Compare essa ideia com tamanhos de fonte que respondem a tamanhos de janela de visualização específicos, como aqueles definidos por consultas de mídia, mas não faça nada entre esses tamanhos.
theme.jsonjá permite que os autores insiram seus próprios valores de tamanho de fonte fluida. Isso não vai mudar, mas este PR oferece isso para pessoas que não querem se preocupar com os detalhes da implementação.
Nick Croft, autor de GenesisWP:
Brian Garner, designer e principal defensor do desenvolvedor na WPEngine:
Alguns desenvolvedores think alguns recursos devem ser um opt-in. Jason Cristo da Automattic disse:
Adoro o poder da tipografia fluida, mas também não acredito que ela deva ser habilitada por padrão. Seu uso (e os detalhes dele) são importantes decisões de design que devem ser feitas com cuidado.
Você também pode encontrar um monte de comentários no site oficial instruções de teste para o recurso.
Resumindo
O recurso de tipografia fluida no WordPress é ainda em desenvolvimento ativo no momento desta escrita. Portanto, neste momento, os autores do tema devem continuar a usá-lo, mas com cautela e esperar algumas possíveis alterações antes de ser lançado oficialmente. Justin adverte autores de temas usando esse recurso e sugere ficar de olho nos dois problemas do GitHub a seguir:
Ainda há muito trabalho contínuo em tipografia e outras ferramentas WordPress relacionadas ao design. Se você estiver interessado, assista isso ticket do GitHub de rastreamento de tipografia e ferramentas de design relacionadas a problemas do GitHub.
Recursos
Eu usei os seguintes artigos ao pesquisar o tipo fluido e como o WordPress o está implementando como um recurso.
