Como tornar a tipografia responsiva

A tipografia responsiva mantém um título legível e com o destaque adequado conforme o espaço ao redor muda. A tipografia fluida varia o tamanho continuamente dentro de uma faixa; a tipografia baseada em pontos de quebra o altera em larguras selecionadas. As duas abordagens ainda precisam de limites e de uma coluna de texto adequada ao conteúdo. Reduzir a fonte no celular é apenas parte desse trabalho. Um título pode caber no contêiner e ainda parecer apertado, quebrar em um ponto estranho ou dominar o parágrafo que o explica.

Considere este título fictício: “Uma maneira mais tranquila de gerenciar projetos complexos”. Ele pode ficar bem composto em duas linhas numa página larga. Em uma tela estreita, pode virar cinco linhas densas, com “complexos” isolado no final. A resposta não é automaticamente diminuir a fonte. A coluna pode estar estreita sem necessidade, a fonte pode ter proporções largas ou uma quebra de linha feita para desktop pode estar impondo o formato errado.

O GOV.UK mudou o texto pequeno, não apenas os títulos grandes

Um contraponto útil à ideia de “diminuir tudo no celular” vem do GOV.UK. Sua escala tipográfica atual mantém o corpo de texto de 19px em 19px nas telas pequenas, enquanto um título extragrande passa de 48px para 32px. As funções respondem de maneira diferente porque atendem a necessidades de leitura diferentes.

Na explicação da revisão tipográfica, a equipe relata preocupações da comunidade com a redução do texto pequeno e seu impacto em pessoas com deficiência visual. A implementação atual é a referência útil para os valores abaixo; o artigo anterior explica a motivação.

Para uma página de produto, isso sugere separar duas decisões frequentemente agrupadas. Um título de destaque pode precisar de menos peso visual quando a tela se estreita. Instruções, condições de elegibilidade e parágrafos ainda precisam de leitura confortável. Aplicar o mesmo multiplicador a todas as funções pode resolver um problema de título criando um problema no corpo do texto.

Uma regra CSS de tipografia fluida que você pode testar

Para um título de destaque, uma regra inicial ilustrativa é:

.page-title {
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
}

Com uma raiz padrão de 16px, isso produz aproximadamente 32px em uma área de visualização de 390px, cerca de 43px em 768px e 63px em 1440px. A propriedade útil é que o texto tem um piso e um teto.

O cálculo tem duas transições que merecem verificação. Abaixo de 400px de largura da área de visualização, prevalece o mínimo de 32px. Acima de aproximadamente 1467px, prevalece o máximo de 64px. Entre esses limites, acrescentar 100px à largura da área de visualização acrescenta 3px ao título. Isso facilita entender a regra: se um título ganhar uma linha incômoda perto de 900px, você pode examinar a largura disponível na coluna em relação a essa taxa de crescimento, em vez de adivinhar outro tamanho para celular.

Trate a fórmula como uma candidata. Em uma largura intermediária, o título pode crescer mais rápido do que sua coluna, criando uma linha adicional mesmo quando a tela fica mais larga. Coloque o maior título real ao lado da imagem real antes de aceitar a curva. Se o estado intermediário falhar, reduza a taxa de crescimento ou mude a distribuição das colunas; acrescentar quebras manuais a todos os títulos cria um problema de manutenção.

Uma contribuição em rem não faz uma regra fluida passar automaticamente nas verificações de redimensionamento de texto. O zoom do navegador muda tanto o espaço efetivo da área de visualização quanto o tamanho do texto, e o termo ligado à área de visualização pode compensar parcialmente o aumento. Teste o resultado renderizado com zoom e configurações de texto padrão ampliado. O requisito é conteúdo legível e disponível, não a simples presença de uma unidade relativa na folha de estilos.

Descreva o incômodo antes de mudar a fonte

Quando um título parecer errado, identifique o que você está vendo. “Grande demais” é diferente de “linhas demais”. “Apertado demais” pode significar letras se tocando, linhas muito próximas ou o bloco inteiro pressionado contra a imagem. Cada diagnóstico aponta para um ajuste diferente.

Leia o título em voz alta e observe como as linhas dividem a frase. Uma linha que termina em uma pequena palavra de ligação pode interromper o ritmo natural da leitura. Uma última linha muito curta pode parecer acidental. Nenhuma das situações é automaticamente uma falha de usabilidade, mas ambas podem explicar por que uma página aparentemente bem resolvida parece inacabada.

Depois, cubra a arte ao redor por um instante. Se o título ficar confortável sem ela, o problema pode ser de composição, além da tipografia. A borda de uma imagem pode fazer a coluna de texto parecer mais estreita do que é. Uma ilustração carregada pode competir com palavras que estavam claras contra um fundo vazio.

Defina uma função para cada nível de título

O título da página, um título de seção e um título de cartão fazem trabalhos diferentes. O primeiro estabelece o assunto principal. Os títulos de seção ajudam a navegar pelo argumento ou pela oferta. Os títulos de cartão distinguem itens repetidos. Eles não devem aumentar com a mesma intensidade só porque usam a mesma família tipográfica.

No exemplo de gerenciamento de projetos, o título principal pode ser expressivo. Uma seção chamada “Mantenha as decisões junto ao trabalho” deve continuar perceptível sem disputar a primeira atenção. Um cartão chamado “Histórico do projeto” precisa conviver confortavelmente com sua descrição. Se todos os níveis ficarem grandes demais no desktop, a página pode parecer uma coleção de banners promocionais.

Defina as relações antes dos valores exatos. Decida qual nível deve ser visto primeiro, quanto texto cada um normalmente contém e se aparece ao lado de uma imagem. Depois teste o maior exemplo realista de cada nível. Um sistema tipográfico que só funciona com o título mais curto é uma demonstração, não uma regra confiável para a página.

Evite usar o tamanho para compensar uma redação pouco clara. “Tudo de que você precisa” pode ter uma composição bonita e ainda assim não identificar a seção. Se o leitor precisar examinar cada parágrafo para descobrir o conteúdo da página, títulos mais fortes podem exigir linguagem mais precisa, além de melhor espaçamento.

Faça a largura da coluna trabalhar a favor do texto

As quebras de linha de um título dependem do espaço destinado a ele. Antes de diminuir a fonte, examine o contêiner. O preenchimento lateral, o intervalo da grade, uma coluna vazia ou uma imagem grande demais podem estar tirando espaço das palavras. Essas escolhas talvez fossem adequadas em uma largura maior e simplesmente tenham permanecido por tempo demais.

Para o título fictício, compare duas composições estreitas com tipografia idêntica. Em uma, margens laterais grandes comprimem o texto em uma coluna fina. Na outra, as margens ficam mais modestas, mas continuam consistentes com o restante da página. A segunda pode produzir um título mais tranquilo sem mudar seu tamanho ou peso.

Em uma tela larga, surge o problema oposto. Deixar um título se estender por toda a página pode transformá-lo em uma longa faixa horizontal, enfraquecendo sua relação com o conteúdo abaixo. Uma largura máxima pode preservar sua forma editorial. Escolha essa largura examinando títulos reais, sem tratar uma contagem de caracteres como garantia de comprimento de linha.

Lembre-se de que as letras de uma fonte não têm todas a mesma largura. Uma coluna que comporta doze letras estreitas não comporta necessariamente doze letras largas. Valores baseados em unidades tipográficas podem ser pontos de partida úteis, mas as palavras renderizadas continuam sendo a evidência. Isso é especialmente importante quando um nome de marca ou termo técnico precisa permanecer inteiro.

Escolha uma faixa de escala, não uma regra de crescimento sem fim

Você pode usar poucas mudanças de tamanho ou uma escala fluida. Ambas as abordagens funcionam quando seus limites inferior e superior são adequados. A questão importante é como o título se comporta entre as visualizações que você projetou deliberadamente.

A lição de tipografia do web.dev explica o dimensionamento fluido e alerta contra o uso exclusivo de unidades da área de visualização para o tamanho do texto. Seu argumento mais amplo é útil aqui: ler depende de mais do que escolher uma fonte. Mantenha um componente relativo de tamanho de texto e teste o que acontece quando o leitor muda o zoom ou suas preferências de texto.

Verifique o meio da faixa. Um título pode ficar bom no mínimo e no máximo e formar um bloco estranho de três linhas entre eles. Ajustar a coluna ou a taxa de crescimento pode ser mais eficaz do que introduzir outra mudança abrupta de tamanho. Mantenha a regra compreensível o suficiente para que alguém consiga mantê-la quando o texto mudar.

Refine o espaço ao redor e dentro das palavras

Entrelinha: mantenha a frase unida

O espaçamento entre linhas faz um título de várias linhas parecer uma unidade legível. Se for pequeno demais, linhas vizinhas podem colidir visualmente, sobretudo nas maiúsculas altas e nas letras com descendentes. Se for grande demais, pode separar tanto as linhas que a frase parece um conjunto de rótulos sem relação.

Compare os desenhos reais das letras, não apenas os números no painel de estilos. Uma fonte com grande altura de minúsculas pode parecer apertada em uma configuração que funciona para outra. Pesos fortes podem fazer os espaços parecerem menores porque há mais matéria escura na página. Caracteres acentuados também podem revelar uma caixa de linha apertada demais para a amostra original.

Na revisão, use um título que misture maiúsculas, minúsculas e pontuação. “TRABALHE MELHOR” substitui mal a frase com caixa mista que realmente aparecerá. Esconde várias formas importantes. Se a página oferece vários idiomas, o teste de títulos também deve incluir, posteriormente, esses sistemas de escrita.

Avalie separadamente o espaço abaixo do título. Aumentar a entrelinha para criar mais distância antes do parágrafo altera o título internamente e pode produzir o efeito errado. Dê um valor próprio ao intervalo entre título e parágrafo e avalie se os dois elementos ainda parecem ligados.

Espaçamento entre letras: preserve a forma das palavras

O espaçamento entre letras merece atenção quando um título parece comprimido, mesmo com espaço suficiente entre linhas. Um espaçamento negativo forte pode tornar um título dramático em uma composição estática grande e depois desconfortável quando renderizado menor. A mesma configuração também pode parecer diferente em um peso mais leve ou mais forte.

Comece pelo espaçamento normal da fonte e compare pequenos ajustes. Observe combinações de letras redondas, traços diagonais e hastes verticais repetidas. Não julgue apenas a primeira palavra. Um ajuste que abre bem “tranquila” pode deixar outra parte da frase solta demais.

Mantenha a coerência visual das palavras. Espaçamento positivo excessivo pode retardar o reconhecimento e transformar uma frase em uma sequência de caracteres isolados. Também aumenta a largura total, podendo criar justamente a quebra de linha que você tentava remover. Quando o título já é longo, espaçamento e largura da coluna precisam ser avaliados juntos.

Evite tratar títulos em maiúsculas e em caixa de frase de maneira idêntica. Um pequeno rótulo acima do título, em maiúsculas, pode se beneficiar de um pouco mais de separação; um título longo em caixa de frase costuma precisar de uma configuração mais discreta. O objetivo é apoiar a função do texto. Um estilo copiado de um rótulo minúsculo raramente funciona como regra para o título principal.

Quebras: evite soluções frágeis

Uma quebra deliberada pode melhorar uma composição, mas também torná-la frágil. Se você inserir uma quebra depois de “gerenciar” no título sobre projetos, as palavras finais podem ficar ótimas em uma tela larga. Em uma largura menor, a primeira parte talvez já quebre sozinha, produzindo uma linha extra inesperada.

Antes de inserir quebras manuais, tente ajustar a largura e a escala. Se uma quebra manual continuar importante para o design, documente as condições em que se aplica e verifique o que ocorre fora delas. Não presuma que uma quebra escolhida para o inglês deva permanecer em todas as traduções.

Evite manter uma frase longa inteira apenas para proteger um formato preferido. Impedir qualquer quebra pode forçar o texto para fora do contêiner ou exigir um tamanho ilegível. Limite trechos inseparáveis aos casos em que a divisão realmente prejudicaria o significado, como um valor curto com sua unidade, e reveja o espaço restante depois.

Quando a última linha parecer curta demais, avalie se o texto pode ser editado sem perder significado. Remover um trecho desnecessário pode melhorar tanto a frase quanto a composição. Mas a tipografia não deve forçar a exclusão de uma limitação do produto, uma ressalva importante ou um termo de que o leitor precisa para identificar a oferta.

Use cor e peso para apoiar a hierarquia

Um título grande não precisa receber todos os outros recursos de ênfase ao mesmo tempo. Peso forte, espaçamento apertado, degradê vivo e sombra intensa podem competir dentro do mesmo bloco de texto. Decida qual tratamento transmite o destaque e deixe os demais mais contidos.

Em uma página com ilustração colorida, um título escuro de cor sólida pode criar a ordem de leitura mais clara. Se o design pedir um degradê sutil, verifique se sua parte mais clara continua legível contra o fundo. Um título claro no tamanho completo pode perder contraste quando reduzido ou visto ao lado de uma arte brilhante.

Diferencie as informações secundárias por uma combinação de tamanho, peso e posição antes de torná-las muito claras. Um subtítulo mais discreto ainda deve ser fácil de ler. O mesmo vale para legendas e rótulos: deixá-los quase invisíveis não cria hierarquia útil; remove informação.

Compare a página em um olhar rápido e depois em leitura prolongada. O olhar deve estabelecer o assunto principal. A leitura mais próxima deve revelar detalhes de apoio sem esforço. Se todos os títulos gritarem por igual, reduzir alguns pesos ou tamanhos pode fazer mais do que adicionar outra cor de destaque.

Teste a fonte que realmente carrega

Um design pode mudar quando sua fonte prevista fica disponível ou quando ela falha ao carregar. Diferentes larguras de letras podem alterar quebras e deslocar conteúdos próximos. Trate o estado com fonte alternativa como parte da revisão, sem presumir que todos os visitantes veem a mesma tipografia imediatamente.

Na revisão de desenvolvimento, pergunte qual fonte está sendo realmente renderizada e se o peso esperado existe. Solicitar um peso ausente do arquivo pode produzir um resultado imprevisto. Se o título parecer pesado ou estreito demais, verifique o arquivo antes de compensar com mudanças de espaçamento.

Procure consequências na composição quando o texto muda de forma. O parágrafo salta para baixo? Um selo se sobrepõe ao título? Uma seção principal de altura fixa corta a última linha? Essas observações são mais úteis do que dizer apenas que a fonte “parece diferente”, porque identificam as condições que a composição precisa acomodar.

A fonte alternativa não precisa ser visualmente idêntica à da marca, mas deve preservar uma página utilizável. Mantenha flexibilidade suficiente para que o título ocupe outra quantidade de linhas sem quebrar a seção. Se a renderização exata da marca for importante, ela ainda precisa coexistir com a realidade de condições variáveis de carregamento.

Faça uma revisão compacta de títulos

Escolha três títulos: o principal, um título longo de seção e o maior título típico de cartão. Revise-os com o conteúdo ao redor, não em uma amostra isolada. Examine uma visualização estreita, uma intermediária e uma larga; depois redimensione entre elas observando mudanças abruptas.

Em cada visualização, leia a frase inteira. Verifique se as quebras preservam o significado, se o espaçamento interno é confortável e se o título continua distinto do parágrafo. Depois aumente o zoom do navegador e repita a tarefa essencial de leitura. Observe o resultado, sem presumir que determinada técnica de dimensionamento garante bom comportamento.

Use uma alternativa mais longa como teste de manutenção. Na página fictícia, mude o título para “Uma maneira mais tranquila de gerenciar projetos entre equipes distribuídas”. Você não está se comprometendo com esse texto. Está descobrindo se o componente suporta uma mudança editorial razoável sem reparos específicos.

Documente a decisão em linguagem comum: “O título pode usar uma linha adicional em telas estreitas; mantenha a frase inteira e deixe a seção crescer”. Isso é mais duradouro do que preservar a quantidade exata de linhas de uma captura em todos os tamanhos. Diz ao próximo editor o que o design valoriza e o que pode mudar.

Torne a revisão específica no OpenDesign

A visualização HTML e as visualizações de desktop, tablet e celular do OpenDesign podem ajudar a comparar o mesmo título em várias composições. Para uma revisão focada, identifique o título e o incômodo observado. Se o problema for apenas espaçamento ou uma propriedade de estilo compatível, a edição manual pode bastar; um pedido estrutural pode ser descrito no chat com as restrições pretendidas.

Por exemplo, peça para manter o texto e a fonte, aliviar o espaçamento apertado entre letras e permitir outra linha na visualização estreita. Isso mantém a revisão centrada na tipografia. Um pedido vago para tornar toda a seção principal mais sofisticada pode alterar ilustração, cores e texto e deixar sem solução o problema original de leitura.

Depois da mudança, volte aos três títulos do conjunto de revisão. Um estilo compartilhado pode afetar mais do que o título que você estava observando. Compare as visualizações relevantes e confirme que o texto de apoio continua cumprindo a função pretendida.