Atualizado em
Tipografia é a parte do projeto que mais gente vê e menos gente percebe. Quando funciona, o leitor só lê. Quando falha, ele cansa, desconfia da marca ou abandona a tela sem saber por quê. Estas 10 dicas são uma lista de conferência para passar antes de publicar qualquer peça, do post de Instagram à interface de um app, do PDF ao outdoor.
A lista vale para impresso e digital, mas em 2026 a maior parte do que um designer publica é lida em tela, em tamanhos que ele não controla, em modo claro e escuro, por gente com visão boa e ruim. As dicas foram atualizadas para esse cenário: fontes variáveis, interface, contraste medido, teste em dispositivo real e o uso (e o risco) da IA generativa na escolha e na aplicação dos tipos.
1. A fonte diz o que o projeto quer dizer?
Uma família tipográfica tem tom de voz. A mesma frase em uma serifada clássica, em uma grotesca pesada ou em uma manuscrita leve comunica três coisas diferentes antes de a pessoa ler a primeira palavra. Antes de escolher, responda: qual é a voz deste projeto, e para quem ele fala? Um relatório de resultados, um festival de música e um app de banco pedem vozes diferentes, e o público (idade, repertório, contexto de uso) muda a resposta.
Se a marca já tem uma fonte definida no manual, a pergunta muda: a aplicação está respeitando o que o manual pede? Boa parte dos problemas de tipografia em empresa não é escolha errada, é uso errado de uma escolha certa.
2. É texto para ler ou para ver?
Título, chamada e botão são textos “para ver”: curtos, de impacto, e o que importa é a legibilidade, a facilidade de distinguir uma letra da outra. Texto corrido é “para ler”: parágrafos longos, e o que importa é a leiturabilidade, o conforto de ler frases inteiras sem esforço.
Fonte display, condensada ou manuscrita funciona em título e cansa em parágrafo. Fonte de texto bem desenhada funciona em parágrafo e pode parecer sem graça em título. Em interface, a distinção se repete: rótulo de botão, mensagem de erro e texto de ajuda têm funções diferentes e pedem pesos e tamanhos diferentes dentro da mesma família.
3. Quantas fontes o projeto precisa?
Não existe número mágico. Na maioria dos projetos, uma ou duas famílias resolvem; três já exigem justificativa; mais do que isso costuma ser falta de decisão. Uma única família com vários pesos e larguras entrega hierarquia suficiente para quase tudo.
As fontes variáveis mudaram essa conta. Um arquivo só contém todo o espectro de peso, largura e, às vezes, inclinação e tamanho óptico. Para web e app, isso significa menos arquivos para carregar e mais liberdade para ajustar o peso exato do título sem trocar de fonte. Google Fonts, Adobe Fonts e as principais fundições já oferecem versões variáveis das famílias mais usadas. Se o projeto é digital e você ainda carrega cinco arquivos estáticos da mesma família, vale revisar.
4. O contraste passa no teste, nos dois modos?
Contraste entre texto e fundo deixou de ser julgamento de olho. As Diretrizes de Acessibilidade para Conteúdo Web do W3C (WCAG 2.2) definem relação mínima de 4,5:1 para texto comum e 3:1 para texto grande, e qualquer ferramenta de contraste (há plugins para Figma e extensões de navegador) mede isso em segundos. Cinza-claro sobre branco, a estética preferida de muita landing page, costuma reprovar.
Em 2026 o teste é duplo: modo claro e modo escuro. A mesma cor de texto que passa num fundo branco pode falhar num fundo escuro, e texto branco puro sobre preto puro cansa em leitura longa; a maioria dos sistemas de design usa um branco levemente rebaixado e um fundo que não é preto absoluto. Confira os dois temas antes de aprovar, e confira os estados: texto desabilitado, placeholder de formulário e link visitado são onde o contraste costuma escapar.
5. A linha tem o comprimento certo para a tela?
Linha longa demais faz o olho se perder na volta para a próxima; linha curta demais fragmenta a frase e cria movimentos repetitivos. Para texto corrido, a faixa confortável fica em torno de 45 a 75 caracteres por linha, com espaços.
Em digital, você não controla a largura da tela, então controla a largura máxima do bloco de texto. Defina um limite para a coluna de texto no desktop e deixe o texto ocupar a largura no celular, onde a linha já é naturalmente curta. Teste nos dois extremos: monitor largo e celular pequeno.
6. O tamanho é compatível com a mídia, o público e a distância?
Uma bula, um outdoor e uma tela de celular pedem tamanhos diferentes, e isso todo mundo sabe. O que escapa é o detalhe: texto de corpo em celular menor do que o sistema operacional usa por padrão vai parecer pequeno para quase todo mundo; legenda de gráfico pensada para o desktop vira ruído no celular; público mais velho precisa de corpo maior e de mais contraste, não de “zoom se quiser”.
Em interface, respeite o tamanho do texto definido pelo usuário no sistema. Um app que ignora a preferência de tamanho de fonte do celular exclui quem mais precisa dela. Em impresso, imprima uma prova no tamanho final antes de fechar o arquivo: tela mente sobre tamanho.
7. O espaçamento entre letras está ajudando ou atrapalhando?
Tracking (espaçamento geral entre letras) é recurso de título, logotipo e texto curto. Em caixa-alta, um pouco de tracking positivo melhora a leitura; em texto corrido, mexer no tracking quase sempre piora. Na dúvida, use o padrão da fonte, que foi desenhado para isso.
Kerning (o ajuste entre pares específicos de letras) merece atenção em título grande e em logotipo, onde um “AV” ou “To” mal ajustado salta aos olhos. Fontes bem feitas trazem kerning embutido; fontes gratuitas de origem duvidosa muitas vezes não trazem, e isso aparece justamente no título.
8. A entrelinha acompanha o tamanho e a largura?
Entrelinha apertada cola as linhas e dificulta achar o começo da próxima; entrelinha folgada separa parágrafos em frases soltas. Para texto corrido, uma entrelinha entre 1,4 e 1,6 vezes o tamanho da fonte funciona na maioria dos casos. Linha mais longa pede entrelinha maior; título grande pede entrelinha menor do que a do corpo, senão as linhas do título parecem flutuar.
Em CSS, defina a entrelinha sem unidade (por exemplo, 1.5) para que ela escale junto com o tamanho da fonte quando o usuário aumentar o texto.
9. O alinhamento está certo para o tipo de texto?
Texto justificado sem hifenização cria “rios” de espaço em branco, principalmente em coluna estreita e no celular, onde o navegador não hifeniza bem. Para web, alinhado à esquerda é o padrão seguro. Centralizado funciona em título curto e em convite, não em parágrafo. Alinhado à direita, só em trechos curtos e com motivo.
Em interface, consistência pesa mais do que preferência: rótulos de formulário, células de tabela e botões devem seguir a mesma regra de alinhamento no produto inteiro. Números em tabela alinham à direita, para a casa decimal bater.
10. O conjunto é coerente, e você viu no dispositivo real?
A última conferência é a do todo. Hierarquia clara (dá para saber o que é título, subtítulo, corpo e legenda sem ler?), mesma família usada da mesma forma em todas as peças, mesma escala de tamanhos, mesmos pesos para as mesmas funções. Coerência é o que faz um sistema parecer um sistema e não uma coleção de telas.
E não aprove no Figma. Abra no celular, no notebook e, se for impresso, na prova física. Renderização muda entre sistemas operacionais e navegadores; peso fino some em tela de baixa resolução; fonte que não carregou vira a fonte padrão do sistema e ninguém avisa. Teste em dispositivo real é a diferença entre tipografia planejada e tipografia publicada.
IA na tipografia: ajuda e armadilha
Ferramentas de IA generativa já sugerem pares de fontes, geram variações de layout e escrevem o CSS da escala tipográfica. Isso acelera o começo do trabalho e ajuda quem está aprendendo a enxergar alternativas. O risco está em três pontos:
- Licença: a ferramenta sugere uma fonte, mas não confere se a licença cobre o uso comercial, o app ou o número de visualizações. Essa conferência continua sendo sua;
- Texto gerado dentro de imagem: geradores de imagem ainda erram letra, acento e kerning. Texto que aparece em peça de marca precisa ser composto por você, não desenhado pela IA;
- Média do que já existe: a sugestão da IA tende ao par de fontes mais comum. Serve como ponto de partida e raramente como decisão final, principalmente em projeto de identidade.
Use a IA para explorar e para automatizar o repetitivo (gerar a escala, testar contraste em lote, revisar consistência entre telas). Decidir a voz do projeto continua sendo trabalho de designer.
Tipografia como critério de contratação
Quem revisa portfólio de designer olha tipografia antes de olhar qualquer outra coisa, porque ela denuncia cuidado. Se você está montando ou atualizando o seu, vale ler como criar um portfólio que faz as pessoas quererem te contratar e, do lado do produto, os erros mais comuns de design na construção de sites, vários deles tipográficos.
Nas vagas, o domínio de tipografia aparece como requisito explícito em designer gráfico e diagramador, e como critério implícito em direção de arte e em ilustração, onde texto e imagem precisam conviver. As vagas de design publicadas na trampos podem ser filtradas por tipo de vaga e por especialidade; se você ainda não tem perfil, o cadastro é gratuito.
Leia também
- Infográfico: tipografia com ou sem serifa;
- 11 erros comuns de design na construção de sites;
- Criar um portfólio: 4 segredos que farão qualquer um querer te contratar;
- Guia de Profissões: Ilustrador(a).
Texto original publicado no tutano em 2017, com base nos guias de tipografia do Chief of Design (David Arty), reescrito e ampliado pela equipe do tutano em 2026.
Comentários 4