É a prática de organizar texto de forma legível, funcional e expressiva. A escolha e o uso das fontes comunicam personalidade antes mesmo de qualquer palavra ser lida.
Anatomia
Cada letra é composta por diferentes partes em sua estrutura. Separei algumas das mais comuns para exemplificar – mas existem outras, mais técnicas! Clique em cada termo para ver sua definição:
Clique em um termo para ver sua definição.
Clique em uma classificação para ver detalhes, quando usar e exemplos visuais.
Serifa: o que é e por que importa
Com serifa
H
n
i
Os pequenos traços nas extremidades das hastes criam uma linha horizontal imaginária que guia o olhar durante a leitura. Por isso fontes serifadas são preferidas para texto corrido em impresso.
Sem serifa
H
n
i
Sem os remates, as formas são mais abertas e uniformes. Em telas de baixa resolução, serifas finas podiam desaparecer ou borrar — por isso sans-serif domina interfaces digitais.
A hierarquia é o que transforma um conjunto de textos em uma sequência de leitura. Sem ela, tudo compete e nada comunica. Quando tudo é destaque, nada é destaque.
DisplayTítulo principal
H1Título de seção
H2Subtítulo
BodyTexto corrido para leitura confortável em longos parágrafos.
SmallApoio, descrições, dados secundários.
CaptionLegenda, nota de rodapé, informação de suporte
Tamanho de fonte tem consequências diretas na legibilidade e varia entre impresso e digital.
| Elemento | Impresso | Digital | Observação |
|---|---|---|---|
| Display | 24–60pt | 28–64px | Em impressos, para fontes acima de 48pt, prefira fontes com hastes finas. Em meio digital, avalie o tamanho da tela: no mobile, raramente ultrapassa 36px; em telas acima de 1400px, use no máximo 64px para não dominar a composição. |
| H1 | 13–16pt | 18–24px | Deve ser visivelmente maior que o corpo. Use como sugestão de proporção. |
| Body | 9–11pt | 15–17px | Valores abaixo de 9pt (no impresso) e 14px (no digital) podem dificultar a leitura e/ou torná-la cansativa. |
| Caption | 6pt | 11px | Somente para textos legais e notas de rodapé. |
| Embalagem / rótulo | variável | — | Existem regulamentações para diferentes tipos de embalagens. Consulte a norma aplicável ao produto em questão. |
| Interface mobile | — | 16px mín. | Apple e Google recomendam 16px para evitar zoom automático do navegador. |
São conceitos relacionados, mas distintos. Confundir os dois é um erro comum.
Legibilidade
Rg Aa
Reconhecimento de caracteres individuais. Uma fonte é legível quando cada letra é facilmente identificável — boa distinção entre I, l e 1, entre O e 0. Afeta especialmente logos, embalagens e sinalização.
Leiturabilidade
Facilidade de ler blocos de texto corrido. Depende de entrelinha, comprimento de linha, espaçamento entre letras e contraste com o fundo. Afeta especialmente livros, sites, revistas e apps.
Fatores que afetam a legibilidade
Contraste cromático
Alto contraste
Baixo contraste
O texto precisa de contraste suficiente com o fundo para ser lido sem esforço. O mínimo recomendado pela WCAG é 4.5:1 para texto corrido e 7:1 para texto pequeno. Teste sempre em escala de cinza antes de aprovar uma combinação de cores.
Serifa e leitura
O gato subiu.
O gato subiu.
Em texto corrido impresso, as serifas criam uma linha horizontal que guia o olhar. Em telas, a sans-serif tende a ser mais clara. Não existe regra absoluta: o contexto e o tamanho de renderização determinam a escolha.
Corpo da fonte
Aa
Aa
Aa
Fontes com altura-x grande parecem maiores no mesmo corpo e tendem a ser mais legíveis em tamanhos pequenos. O corpo ideal para texto corrido é 15–17px em digital e 9–11pt em impresso.
Entrelinha e comprimento de linha
Entrelinha muito apertada faz as linhas se tocarem. Muito aberta quebra o fluxo de leitura. O ideal é 1.4× a 1.75× o corpo da fonte. Para comprimento de linha, entre 45 e 75 caracteres por linha é o intervalo confortável para leitura contínua.
Como avaliar
Teste de legibilidade
Reduza a fonte ao mínimo pretendido. Se não conseguir distinguir facilmente I, l, 1 e O, 0, a fonte tem problema de legibilidade para aquele contexto.
Teste de leiturabilidade
Leia um parágrafo inteiro. Se o olhar tropeçar ou a leitura exigir esforço consciente, ajuste a entrelinha, o comprimento de linha ou o contraste antes de trocar a fonte.
Serif + sans-serif
O par mais seguro e versátil. Serif no título cria elegância e autoridade; sans-serif no corpo, clareza e leiturabilidade.
Mesma família, pesos diferentes
Opção conservadora que garante coesão total. Boa quando o projeto exige sobriedade ou quando a família tem personalidade forte o suficiente para sustentar sozinha.
Display + texto
A fonte display tem personalidade forte, mas pouca leiturabilidade em corpo pequeno. Combine sempre com uma fonte de texto neutra para o corpo corrido.
Script + sans-serif
Script exclusivamente no título ou destaque. Nunca em texto corrido — compromete completamente a leiturabilidade.
Regra das duas fontes
Limite-se a duas famílias tipográficas por projeto. A variação de peso e estilo dentro de uma mesma família já oferece amplitude suficiente para construir hierarquia.
Como escolher por contexto
Editorial
Garamond, Caslon — serif com alta legibilidade em corpo pequeno.
Digital
Inter, DM Sans — sans-serif com abertura generosa, funciona em qualquer resolução.
Embalagem
Freight, GT Alpina — equilíbrio entre personalidade e clareza em tamanhos pequenos.
Luxo e moda
Bodoni, Didot — alto contraste entre hastes. Apenas em títulos grandes.
Orgânico
Fontes script e lettering — transmitem humanidade. Somente em títulos.
Sinalização
Fontes condensadas — alta eficiência de espaço e leitura à distância.
Comprimento de linha ideal
45 a 75 caracteres por linha para texto corrido. Linhas muito longas cansam; muito curtas, fragmentam o ritmo de leitura.
Entrelinha
Mínimo 1.4× o corpo. Para leitura contínua: 1.6 a 1.75×. Para títulos grandes: 1.0 a 1.15×.
Tracking
Não altere o tracking do texto corrido. Use tracking positivo apenas em texto em caixa-alta para melhorar legibilidade.
Contraste com o fundo
Mínimo de 4.5:1 (WCAG AA). Para textos pequenos: 7:1. Teste sempre em escala de cinza, não só com as cores finais.
Erros mais comuns
Tudo em negrito. Se tudo é importante, nada é importante. O destaque exige contraste com o não-destacado.
Tamanhos muito próximos. A diferença entre níveis precisa ser perceptível. Pule ao menos dois níveis na escala.
Centralizar tudo. Texto centralizado é difícil de seguir em parágrafos. Reserve para títulos curtos e chamadas isoladas.
Fonte display em corpo pequeno. Fontes com alto contraste de haste perdem legibilidade abaixo de 18pt e 24px.
Script em texto corrido. Fontes cursivas foram feitas para títulos e destaques. Em parágrafos comprometem completamente a leiturabilidade.
