Tipografia na Web — Hierarquia que Funciona
Porque é que dois tipos de letra já são demais e três são um desastre. O método prático para escolheres bem.
O Problema que Ninguém Fala
Quando começaste a trabalhar no teu website, alguém sugeriu “vamos usar duas fontes bonitas — uma para títulos, outra para o corpo”. Faz sentido, certo? Mas depois vem o cliente com a ideia genial: “E se adicionarmos uma terceira para os destaques?” E é aqui que tudo desaba.
Não é sobre escolher tipos de letra bonitos. É sobre construir uma hierarquia que as pessoas entendem instintivamente. Sem esforço. Sem confusão. A verdade é que a maioria dos websites usa duas ou três fontes de forma aleatória — sem lógica, sem propósito. E depois os utilizadores não sabem bem o que é um título, o que é texto normal, ou o que devem fazer a seguir.
A Realidade
Os melhores websites usam frequentemente uma ÚNICA família tipográfica. Não é limitação. É clareza.
Uma Fonte. Múltiplas Possibilidades.
Vamos ser práticos. Se escolheres uma família tipográfica robusta — como Source Sans Pro, Inter, ou Poppins — tens acesso a diferentes pesos: light (300), regular (400), semibold (600), bold (700). É com isto que crias hierarquia. Não com fontes diferentes.
Um título em bold 32px é claramente diferente de um parágrafo em regular 16px. O utilizador vê isto de imediato. Nenhuma confusão. Nenhuma necessidade de mudares para Arial ou Helvetica só porque “parece diferente”.
- H1: Bold, 32-48px (títulos principais)
- H2: Semibold, 24-32px (subtítulos)
- Corpo: Regular, 16-18px (conteúdo)
- Destaques: Bold ou 600, tamanho corpo (ênfase)
Quando Precisas Realmente de Uma Segunda Fonte
Agora, há situações onde uma segunda fonte faz sentido. Não é “porque fica mais bonito”. É por razão estratégica.
Se o teu website precisa de destacar citações, depoimentos, ou secções muito específicas — e se esses destaques têm uma identidade visual distinta na tua marca — aí sim, podes considerar uma segunda fonte. Mas tem de ser deliberado. Pensado. Testado.
“A tipografia não é sobre escolher fontes bonitas. É sobre guiar o olho do utilizador através da página de forma clara e intencional.”
— Princípio básico de design
O Teste Prático de 3 Segundos
Antes de adicionares uma segunda fonte, faz isto:
Imprime a Página
Sim, em papel. Consegues ver a diferença entre os elementos sem cores, sem animações? Se não consegues identificar títulos de corpo de texto apenas pelo tamanho e peso, a tua hierarquia não funciona.
Muda o Zoom do Browser
Coloca o zoom a 75% e depois a 150%. A hierarquia mantém-se clara? Se a página fica confusa quando o utilizador mexe no zoom, é porque depende muito de tamanho de fonte e não de estrutura real.
Olha de Longe
Afasta-te do ecrã cerca de um metro. Consegues ainda identificar o que é importante? Os títulos devem saltar à vista. Se não, o problema não é a fonte — é a hierarquia.
Documentar a Tua Hierarquia Tipográfica
No teu guia de marca — sim, deves ter um — inclui uma secção específica para tipografia. Não é apenas escolher uma fonte e pronto. É estabelecer regras claras que qualquer pessoa consegue seguir.
Define para cada elemento: o tamanho exato (em pixels ou rem), o peso (300, 400, 600, 700), a altura de linha (line-height), e o espaçamento entre letras (letter-spacing). Parece burocrático? É. Mas é isto que mantém a consistência quando tens múltiplas pessoas a trabalhar no projeto.
A maioria dos guias de marca negligencia isto. Deixam a tipografia ao sabor da criatividade de cada um. Resultado? Caos visual. Incoerência. Falta de profissionalismo.
O Resumo Prático
Aqui está o que realmente importa: uma única família tipográfica bem utilizada supera sempre múltiplas fontes mal utilizadas. A hierarquia não vem da variedade — vem da coerência. Do tamanho, do peso, do espaçamento, da cor.
Se estás a considerar adicionar uma segunda ou terceira fonte, faz primeiro o teste dos 3 segundos. Se a tua página atual já tem hierarquia clara com uma única fonte, adicionar mais fontes não vai melhorar nada. Só vai complicar.
A tipografia web moderna é minimalista. É intencional. É documentada. E funciona melhor quando é simples. Isto não é limitação criativa — é maturidade de design.
Próximo Passo
Revê o teu website atual. Quantas famílias tipográficas tem? Se tem mais de duas, é tempo de simplificar.
Voltar à Categoria
Nota Importante
Este artigo oferece orientação educacional sobre boas práticas de tipografia web e hierarquia visual. As recomendações apresentadas baseiam-se em princípios de design estabelecidos e experiência comum na indústria. Cada projeto é único — as circunstâncias, objetivos e contextos variam significativamente. O que funciona para um website pode não funcionar igualmente para outro. Consideramos estas sugestões como ponto de partida para exploração e experimentação no teu próprio contexto, e não como prescrição absoluta que se aplica universalmente.