Fazer o texto parecer bom em todas as telas não é tão simples quanto parece. Por muito tempo, web designers usaram breakpoints de media queries para redimensionar fontes, mas essa abordagem rapidamente se torna confusa à medida que surgem mais dispositivos e tamanhos de tela.
A partir do WordPress 6.1 (lançado em novembro de 2022), agora há uma maneira melhor: tipografia fluida. Ela ajusta automaticamente os tamanhos de fonte definidos no seu arquivo theme.json para serem dimensionados de forma suave, independentemente da largura ou altura da tela.
Esse recurso não altera apenas o tamanho da fonte, mas também ajusta a altura da linha, o espaçamento entre palavras e até mesmo o espaço em branco, tornando seu design mais consistente, legível e acessível em todos os dispositivos.
Este artigo explica como funciona a tipografia fluida, suas diferenças em relação aos breakpoints tradicionais e como você pode implementá-la no WordPress usando theme.json e CSS.
Mas, primeiro, vamos ver como costumávamos lidar com a tipografia e por que a tipografia fluida é uma melhoria tão grande.
Tipografia por breakpoints vs tipografia fluida
Uma boa maneira de entender a tipografia fluida é compará-la com sua antecessora, a tipografia baseada em breakpoints, que usa media queries que segmentam larguras específicas de dispositivos para dimensionamento de fonte.
Tipografia por breakpoints
Normalmente, breakpoints são faixas específicas de larguras de janela de visualização, geralmente definidas em pixels. Uma abordagem comum é definir três breakpoints principais que têm como alvo telas de dispositivos móveis, laptops e desktops.
Aqui estão configurações típicas de breakpoints para laptops em um arquivo CSS:
@media (min-width: 48em) and (max-width: 74.9375em) {
body {
font-size: 1.125rem;
line-height: 1.6;
}
h1 {
font-size: 2rem;
}
}Embora isso funcione, tem uma grande desvantagem: à medida que surgem novos dispositivos e tamanhos de tela, o gerenciamento de todos esses breakpoints se torna rapidamente insustentável.
No exemplo de GIF acima, à medida que a janela de visualização diminui, o texto é redimensionado em saltos irregulares. Esse comportamento “em degraus” frequentemente leva a ajustes desajeitados ou imprevisíveis, o que não é ideal para uma tipografia suave e consistente.
Tipografia fluida
Com a introdução da propriedade CSS clamp() em 2019, juntamente com as unidades de viewport (vw e vh), tornou-se possível obter um dimensionamento contínuo e automático.
Isso permite que você defina tamanhos de fonte que são dimensionados dinamicamente com base nas dimensões da janela de visualização, eliminando a necessidade de vários breakpoints.
Aqui está um exemplo de uma fonte de tamanho médio (medium) usando clamp():
.has-medium-font-size {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}Vamos analisar melhor como o clamp() funciona mais adiante, mas por enquanto, pense nele como uma fórmula que define tamanhos mínimo, preferido e máximo, garantindo que o texto seja dimensionado de forma suave entre telas.
No GIF, à medida que a janela de visualização se estreita, o texto se ajusta de forma fluida. Não há saltos nem mudanças bruscas de tamanho.
Esse comportamento suave é o que faz da tipografia fluida um avanço tão grande em relação ao design baseado em breakpoints. Em vez de ajustar o texto em etapas, ela permite um dimensionamento contínuo que parece natural em qualquer dispositivo.
Mas o redimensionamento suave é apenas o começo. A tipografia fluida oferece várias outras vantagens que facilitam a criação de designs flexíveis, consistentes e acessíveis.
O argumento a favor da tipografia fluida
À medida que você trabalhar com a tipografia fluida, os seguintes benefícios se tornarão evidentes.
Responsiva por padrão
O texto é dimensionado automaticamente de acordo com a janela de visualização, eliminando a necessidade de breakpoints. Independentemente de seu site ser visualizado em um telefone, tablet ou monitor ultra-wide, os tamanhos das fontes se ajustam naturalmente sem CSS adicional.
Mais fácil de manter
Sem a necessidade de múltiplas media queries, seu código permanece simples e legível. Você pode definir tamanhos de fonte usando uma escala simples de “camiseta”, variando de pequeno (small) a extra grande (x-large) e aplicá-los de forma consistente em todo o tema.
Design consistente
Garanta que os tamanhos das fontes permaneçam consistentes em todo o site, tanto globalmente quanto em blocos individuais, conforme necessário. Defina sua escala uma vez e ela fluirá perfeitamente por todos os blocos, padrões e modelos.
Acessibilidade e legibilidade aprimoradas
Como a tipografia fluida se ajusta de forma contínua, o texto sempre aparece em um tamanho confortável de ler em qualquer dispositivo. Isso deixa seu conteúdo mais acessível, especialmente para usuários com preferências visuais específicas ou níveis personalizados de zoom no navegador.
Design preparado para o futuro
Como o tamanho do texto não depende mais de breakpoints artificiais, sua escala tipográfica está garantida para funcionar com qualquer tamanho de tela no futuro.
Controle sobre a velocidade de dimensionamento
A capacidade de controlar a velocidade na qual o texto cresce ou diminui é definida por um valor preferencial que muda com a largura da janela de visualização.
Suporte dos navegadores
A função clamp() é bem suportada em todos os navegadores modernos, incluindo as versões atuais do Chrome, Edge, Firefox e Safari.
No entanto, se precisar de 100% de cobertura, você ainda desejará incluir um fallback para navegadores antigos, como o Internet Explorer 11 e as versões anteriores a 2020 do Safari e do Chrome.
Veja como fazer isso:
/* Fallback (for IE11 and other old browsers) */
li {
font-size: 1.25rem;
}
/* Preferred (modern browsers) */
li {
font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}Como a tipografia fluida funciona
No centro da tipografia fluida estão três configurações: tamanho mínimo, tamanho máximo e um tamanho preferencial, que é uma escala deslizante entre os valores mínimo e máximo, determinada pela largura da janela de visualização.
A função clamp() usa esses três valores em uma única declaração:
font-size: clamp(min, preferred, max);Isso garante que o texto nunca fique muito pequeno demais em telas pequenas ou muito grande em telas largas. Por exemplo:
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);Neste exemplo, o tamanho da fonte começa em 1rem, aumenta suavemente à medida que a janela de visualização se expande e para de aumentar em 1,25rem.
Como o WordPress lida com isso
O WordPress faz o trabalho pesado para você. Em vez de calcular manualmente esses valores, você pode definir os tamanhos das fontes diretamente em theme.json.
Aqui está um exemplo simplificado de como o WordPress representa um tamanho de fonte em JSON:
{
"fluid": {
"min": "1rem",
"max": "1.25rem"
},
"name": "Medium",
"size": "1.125rem",
"slug": "medium"
}A partir disso, o WordPress gera automaticamente o CSS:
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);Isso torna a implementação da tipografia fluida rápida, consistente e sem erros. Você só precisa definir seus valores uma vez no theme.json, e o WordPress cuida da matemática.
Termos comuns
Antes de prosseguir, vamos revisar algumas unidades importantes usadas na tipografia fluida. Cada uma escala em relação a algo diferente.
| Unidade | Definição | Notas |
| em | Relativa ao tamanho da fonte do elemento principal. | Os tamanhos são compostos por aninhamento. |
| rem | Relativa ao tamanho da fonte do elemento principal (html). | Dimensiona de forma consistente em todo o site. |
| vw | 1% da largura da janela de visualização. | Usado para dimensionamento baseado em largura. |
| vh | 1% da altura da janela de visualização. | Usado para dimensionamento baseado em altura. |
Algumas palavras sobre o theme.json
O theme.json é orientado a dados, portanto, gera CSS automaticamente em vez de exigir escrita manual.
Como você poderia esperar, o núcleo do WordPress inclui um arquivo theme.json que define propriedades de linha de base usadas pelo próprio arquivo theme.json de um tema de blocos. Esse é o caso de como o WordPress implementa a tipografia fluida.
Como acontece com praticamente todas as propriedades de estilo, elas podem ser alteradas globalmente ou por bloco usando um tema filho (child theme), o que recomendamos para todas as personalizações.
Se você não estiver familiarizado com o theme.json, recomendamos que leia nosso artigo “Trabalhando com propriedades e pares de valores-chave no theme.json”
Como o WordPress usa tipografia fluida no TT5 (Twenty Twenty Five)
Quando o arquivo theme.json de um tema de blocos inclui a configuração "fluid": true, o WordPress gera automaticamente regras de tipografia fluida usando a função CSS clamp(). Isso é feito por meio de um algoritmo interno que calcula o dimensionamento suave para cada tamanho de fonte.
{
"settings": {
"typography": {
"fluid": true
}
}
}Se a opção "fluid" for omitida, o WordPress assumirá o valor false como padrão, o que significa que os tamanhos de texto permanecem fixos e não são dimensionados de forma fluida.
Com a tipografia fluida ativada, o TT5 define cinco tamanhos predefinidos. Cada um inclui valores mínimos e máximos que o WordPress usa para gerar o CSS final usando a função clamp().
| Nome do tamanho | Valores no Theme.json | Valores clamp CSS gerados |
| small | size: 0.875rem | clamp(0.875rem, 0.8125rem + 0.2vw, 1rem) |
| medium | min: 1rem, max: 1.125rem | clamp(1rem, 0.9375rem + 0.25vw, 1.125rem) |
| large | min: 1.125rem, max: 1.375rem | clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem) |
| x-large | min: 1.75rem, max: 2rem | clamp(2,25rem, 1,75rem + 1,5vw, 3rem) |
| xx-large | min: 2.15rem, max: 3rem | clamp(3rem, 2.25rem + 2vw, 4rem) |
Exemplos práticos
Agora que sabemos como o TT5 lida com o tipo fluido por padrão, vamos analisar alguns cenários do mundo real em que você pode querer personalizá-lo ou expandir esse comportamento.
Para esses exemplos, usaremos um tema filho (child theme) do TT5 e, como sempre, certifique-se de que seus scripts estejam carregados corretamente.
Aumentar todos os tamanhos de fonte em 25%
Se o seu público-alvo preferir textos maiores (por exemplo, em sites voltados para acessibilidade ou para idosos), talvez você queira aumentar todos os tamanhos de fonte globalmente.
Opção 1 – Usando theme.json
Embora não haja uma única opção para dimensionar todas as fontes, você pode aumentar manualmente cada tamanho de fonte em 25%. Aqui está um exemplo de configuração:
"typography": {
"fontSizes": [
{
"fluid": false,
"name": "Small",
"size": "1.09375rem",
"slug": "small"
},
{
"fluid": { "max": "1.40625rem", "min": "1.25rem" },
"name": "Medium",
"size": "1.25rem",
"slug": "medium"
},
{
"fluid": { "max": "1.71875rem", "min": "1.40625rem" },
"name": "Large",
"size": "1.725rem",
"slug": "large"
},
{
"fluid": { "max": "2.5rem", "min": "2.1875rem" },
"name": "Extra Large",
"size": "2.1875rem",
"slug": "x-large"
},
{
"fluid": { "max": "3.75rem", "min": "2.6875rem" },
"name": "Extra Extra Large",
"size": "2.6875rem",
"slug": "xx-large"
}
]
}Isso segue o padrão do TT5: o tamanho small permanece fixo, enquanto os demais dimensionam suavemente.
Nos bastidores, o WordPress ainda calcula o valor preferido (fluido) entre cada mínimo e máximo.
Opção 2 – Usando style.css
Como alternativa, você pode dimensionar tudo globalmente com uma única linha em sua folha de estilo:
:root {
font-size: 125%;
}Isso aumenta o tamanho da fonte principal em 25%, dimensionando efetivamente todos os elementos que usam unidades rem.
Fonte fluida personalizada para um único bloco
Você também pode aplicar o dimensionamento fluido de forma seletiva.
Por exemplo, para fazer com que todos os itens da lista (core/list) usem o tamanho médio (medium) em vez do padrão grande (large), adicione o seguinte ao seu theme.json:
"styles": {
"blocks": {
"core/list": {
"typography": {
"fontSize": "var:preset|font-size|medium"
}
}
}
}O resultado é uma hierarquia mais limpa, em que itens de lista exibem um texto ligeiramente menor do que os parágrafos.
Definindo tipografia fluida em style.css
Se estiver trabalhando com um tema clássico, você definirá seus próprios valores de clamp() diretamente em style.css.
Por exemplo, aqui está como você pode aumentar itens de lista para 125% do tamanho de fonte large:
li {
font-size: clamp(1.725rem, 1.725rem + 0.17vw, 1.71875rem) !important;
}
Isso exibe um tamanho de fonte maior para os itens da lista definidos no arquivo CSS. Como esperado, se você estiver trabalhando com um tema clássico, precisará usar a propriedade clamp() no seu arquivo styles.css.
Espaçamento fluido
A fonte é apenas um dos fatores a considerar ao usar tipografia fluida. As dimensões de preenchimento, margem e espaços de bloco (o espaço dentro de um bloco de grupo) também podem ser dimensionadas suavemente usando os mesmos conceitos estabelecidos com a tipografia fluida.
O TT5 usa essas configurações para estabelecer tamanhos de espaço.
"spacing": {
"defaultSpacingSizes": false,
"spacingSizes": [
{ "name": "Tiny", "size": "10px", "slug": "20" },
{ "name": "X-Small", "size": "20px", "slug": "30" },
{ "name": "Small", "size": "30px", "slug": "40" },
{ "name": "Regular", "size": "clamp(30px, 5vw, 50px)", "slug": "50" },
{ "name": "Large", "size": "clamp(30px, 7vw, 70px)", "slug": "60" },
{ "name": "X-Large", "size": "clamp(50px, 7vw, 90px)", "slug": "70" },
{ "name": "XX-Large", "size": "clamp(70px, 10vw, 140px)", "slug": "80" }
]
}Os três primeiros tamanhos (tiny, x-small, small) são fixos, enquanto os maiores são dimensionados de forma fluida usando clamp().
Isso garante que não apenas o texto, mas também o espaçamento do layout se adapte elegantemente a diferentes tamanhos de tela.
Resumo
Tipografia por breakpoints e tipografia fluida servem a propósitos diferentes. Quando usadas juntas, criam layouts preparados para o futuro que escalam suavemente entre telas, oferecendo experiências consistentes e legíveis para todos.
Se você não quiser calcular os valores manualmente, várias ferramentas gratuitas podem ajudar a ajustar e visualizar seus valores:
Essas ferramentas tornam simples gerar valores de clamp() alinhados à sua escala de design, especialmente úteis no desenvolvimento de temas clássicos.
Pronto para ver isso em produção? Hospede seu site WordPress na Kinsta para que você tenha um TTFB rápido, CDN integrado e Edge Caching, para que sua tipografia fluida tenha uma ótima aparência (e seja carregada) em qualquer lugar. Comece gratuitamente no primeiro mês.
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
