Tipografia no celular: como escolher fontes que ajudam a ler
Atualizado: há 7 horas
Escolher a tipografia no celular exige mais que encontrar uma fonte bonita. A mesma família precisa funcionar em títulos, parágrafos, menus e mensagens de formulário. E precisa ser avaliada no espaço em que o conteúdo será lido, com palavras reais em português e com as adaptações que o usuário faz na própria tela.
Um caminho útil é separar personalidade e desempenho na tarefa. A fonte pode combinar com a marca e ainda exigir ajustes de peso, tamanho, entrelinha ou largura do bloco. Em vez de aprovar uma amostra decorativa, monte uma pequena página representativa do site e observe como ela se comporta.
Tipografia no celular: teste o vocabulário que realmente será publicado
Inclua palavras com acentos, nomes longos de serviços, valores quando existirem no projeto e siglas usadas pela empresa. Examine pares que possam gerar dúvida no contexto, como letras e algarismos semelhantes. O problema pode aparecer num código ou num contato, mesmo que passe despercebido em um título.
Use também uma pergunta de formulário, uma mensagem de erro e um botão com rótulo real. Esses trechos revelam situações que um parágrafo de demonstração não mostra. Se o site terá conteúdo atualizado por outras pessoas, acrescente um título mais longo que o primeiro exemplo escolhido pelo designer.
Confira os caracteres disponíveis e as condições de uso da fonte diretamente com seu fornecedor. Inclua a implementação no planejamento: a escolha aprovada precisa corresponder aos arquivos e pesos que o site efetivamente carregará. Não deixe essa verificação para a véspera da publicação.
Compare hierarquia, peso e espaço em conjunto
O título deve ser identificável como título; o texto de apoio não pode competir com tudo ao mesmo tempo. Experimente a hierarquia com a página inteira, observando onde a leitura começa e como passa de uma seção para outra. Não é necessário que cada nível use uma família diferente.
Avalie pesos disponíveis antes de simular destaque indiscriminadamente. Um corpo de texto muito delicado pode merecer outra configuração para o contexto observado. Já o uso contínuo de negrito retira do destaque sua função de orientar. A decisão deve ser testada com o conteúdo e a composição previstos.
Também observe onde as linhas quebram. Evite diminuir toda a tipografia apenas para fazer uma frase específica caber. Pode ser melhor revisar o título, mudar a composição ou permitir que o bloco cresça. Nenhum tamanho isolado serve como resposta universal para todas as fontes e todas as telas.
A página precisa aceitar ajustes do leitor
O critério 1.4.4 das WCAG 2.2 prevê, com exceções especificadas para legendas e imagens de texto, ampliação de texto até 200% sem perda de conteúdo ou funcionalidade. Esse é um teste de adaptação da página, não uma indicação de tamanho inicial ideal para a fonte. W3C: redimensionamento de texto
O critério 1.4.12 trata da adaptação ao espaçamento definido pelo usuário: entrelinha de 1,5 vez o tamanho da fonte, espaço após parágrafos de 2 vezes, entre letras de 0,12 vez e entre palavras de 0,16 vez. O conteúdo deve suportar esses ajustes sem perda de conteúdo ou funcionalidade. O W3C esclarece que eles não são valores obrigatórios de apresentação padrão. W3C: espaçamento de texto e ajustes do usuário
Na revisão prática, procure texto cortado, mensagens sobrepostas e botões que escondem parte do rótulo. Quando isso acontecer, examine o recipiente e as regras de layout junto com a fonte. Trocar a família tipográfica pode apenas deslocar uma limitação que continuará aparecendo com outro conteúdo.
Exemplo fictício: página de agendamento
Imagine o site fictício do Ateliê Ramo. A página tem um título curto, uma explicação e um botão para solicitar horário. Na primeira composição, tudo parece caber. Quando a equipe insere o nome completo de uma oficina e amplia o texto, o botão encobre parte da explicação.
A hipótese de solução é permitir crescimento do bloco e revisar a disposição dos elementos. Depois, a equipe repete o teste com a mesma mensagem. O exemplo não comprova resultado de negócio nem define uma fonte vencedora; mostra por que a aprovação precisa incluir situações que variam além da amostra inicial.
Ferramenta prática: cartão de teste tipográfico
Monte um cartão com os itens abaixo para comparar propostas no mesmo contexto. Registre observações em linguagem simples, como “o final do título desaparece”, em vez de “parece estranho”. Uma evidência concreta é mais fácil de discutir e corrigir.
Trecho longo: um parágrafo real que explique um serviço.
Hierarquia: título, subtítulo e texto de apoio juntos.
Caracteres: palavras acentuadas, nomes, siglas e números pertinentes ao site.
Ação: botão, campo de formulário e mensagem de orientação.
Adaptação: o mesmo conteúdo com ampliação e ajuste de espaçamento.
Continuidade: uma seção com conteúdo maior que o exemplo inicial.
Faça a inspeção em um aparelho real e confira também as variações previstas no projeto. Se alguém da equipe tiver dificuldade para encontrar uma informação, registre onde isso ocorreu. A revisão deve olhar para a tarefa inteira: ler, entender, preencher e avançar.
Transforme a escolha em aplicação
A fonte aprovada precisa chegar ao site acompanhada de decisões sobre uso, hierarquia e comportamento do conteúdo. Para planejar uma página que represente a marca e seja confortável de consultar no celular, conheça o serviço de websites da Briccitly e compartilhe os textos e situações de uso do seu projeto. Conhecer websites da Briccitly
Comentários