Como Escolher o Par Perfeito de Fontes para Seu Site
Aprenda a combinar uma fonte de cabeçalho com outra de corpo que trabalhem bem juntas e criem harmonia visual.
Ler artigoEspaçamento Tipográfico: Linha, Letra e Parágrafo
Números concretos que você pode aplicar agora no seu projeto. Descubra como altura de linha, rastreamento e espaçamento de parágrafos transformam a legibilidade.
Por Que o Espaçamento Importa Tanto
A maioria dos designers iniciantes escolhe uma fonte bonita e acha que terminou. Mas aqui está a verdade: a fonte é apenas 30% da equação. O espaçamento? Isso é o que realmente faz as pessoas conseguirem ler sem cansaço.
Quando você ajusta a altura de linha, o rastreamento e o espaçamento entre parágrafos, você não tá só melhorando a aparência. Você tá criando um ritmo visual que guia os olhos do leitor de forma natural. É a diferença entre um texto que parece denso e opressor e um que respira.
Neste guia, você vai aprender os valores específicos que funcionam. Não vou falar de “espaçamento adequado” — vou dar você números reais, técnicas práticas e exemplos que pode implementar hoje mesmo no seu projeto.
Altura de Linha: O Fundamento
A altura de linha (line-height) é o espaço vertical entre linhas de texto. Parece simples, mas é absolutamente crítico para legibilidade.
Para texto de corpo em projetos web, você quer algo entre 1.5 e 1.75. Sim, valores bem específicos. Um 1.5 funciona bem para a maioria dos casos. Já um 1.75 é melhor quando você tem texto mais longo ou está trabalhando em telas grandes.
Números que funcionam:
- Corpo de texto: line-height 1.5 a 1.75
- Cabeçalhos: line-height 1.2 a 1.3
- Legendas pequenas: line-height 1.4
Quando você usa um 1.5, o espaço entre as linhas é igual a 50% do tamanho da fonte. Se você tá usando 16px, a altura de linha será 24px. Simples assim. E funciona porque dá aos olhos espaço para respirar sem parecer espaçado demais.
Rastreamento (Letter Spacing)
O rastreamento é o espaço entre caracteres individuais. Aqui tá um detalhe importante: a maioria das fontes web já vem bem ajustada. Você provavelmente não vai querer adicionar muito.
Mas em alguns casos, você vai querer. Cabeçalhos em caixa alta, por exemplo, ficam muito melhores com um rastreamento de 0.05em a 0.1em. Isso abre o texto e dá um ar mais premium.
Quando usar rastreamento:
Texto de corpo? Deixa em zero ou até -0.01em se quiser ser agressivo. Cabeçalhos? Pode ir de 0.02em a 0.1em. Pequenas labels? Até 0.05em. A regra de ouro: quanto menor o texto, menos rastreamento você precisa.
Espaçamento Entre Parágrafos
Aqui é onde muita gente erra. Você não precisa de muito espaço. De verdade.
A maioria dos designers coloca um espaço igual ao tamanho da fonte (1em de margin-bottom). Mas na prática, algo entre 0.5em e 1em funciona melhor. Se você tá usando 16px de tamanho base, um 12px a 16px entre parágrafos tá perfeito.
Há também a questão do margin collapse. Quando dois parágrafos ficam juntos, seus margins colapsam. O maior vence. Então se um parágrafo tem margin-bottom de 1.5em e o próximo tem margin-top de 1em, o espaço real é 1.5em, não 2.5em. Conhecer isso evita surpresas.
Implementação CSS:
p { margin-bottom: 1.5rem; line-height: 1.6; }
Como Implementar: Passo a Passo
01
Defina a altura de linha base
Comece com line-height: 1.6 no seu body. Isso funciona para a maioria dos projetos. Depois você ajusta por tipo de elemento se precisar.
02
Reduza para cabeçalhos
h1, h2, h3 ganham line-height: 1.2. Texto grande com muita altura de linha fica estranho. Cabeçalhos precisam de um valor menor.
03
Adicione rastreamento estratégico
Cabeçalhos em maiúscula? Adiciona 0.05em a 0.1em de letter-spacing. Texto de corpo? Deixa como tá ou coloca -0.01em para ser minimalista.
04
Controle o espaço entre parágrafos
p { margin-bottom: 1.5rem; } é seu ponto de partida. Teste em diferentes tamanhos de viewport e ajusta se necessário.
Espaçamento Responsivo
Aqui tá a coisa: seus valores de espaçamento mudam com o tamanho da tela. E isso é normal.
Em mobile, você pode usar line-height 1.5. Mas em desktop com texto mais largo, 1.6 ou 1.7 funciona melhor. A razão é simples: em telas largas, as linhas ficam longas demais e os olhos ficam perdidos. Um espaço vertical maior ajuda.
Mesma coisa com margin entre parágrafos. Em mobile, talvez 1rem seja o suficiente. Em desktop, 1.5rem ou 2rem dá mais respiro. Você pode usar media queries ou calc() com viewport width para fazer isso fluir naturalmente.
“O espaçamento tipográfico não é uma escolha estética. É uma escolha de acessibilidade. Quando você tira tempo para ajustar esses valores, você tá facilitando a vida de quem tá lendo.”
Resumo: Valores que Funcionam
Altura de Linha
Corpo: 1.5–1.75 Cabeçalhos: 1.2–1.3
Rastreamento
Corpo: 0 a –0.01em Cabeçalhos: 0.05–0.1em
Espaço entre Parágrafos
0.5em–1.5em (ajusta com a tela)
Não precisa ser complicado. Pegue esses números, coloca no seu CSS e testa. Você vai ver de imediato como o seu projeto fica mais profissional. E o melhor? Seus leitores vão conseguir ler sem cansaço.
Tipografia é 90% prática. Você aprende fazendo. Então comece agora. Abre um projeto, ajusta a altura de linha, testa em diferentes telas e vê como muda tudo. Depois você não volta atrás.
Nota Importante
Os valores apresentados neste guia são recomendações baseadas em melhores práticas de design tipográfico. Cada projeto é único e pode exigir ajustes conforme o contexto, tipo de fonte escolhida, público-alvo e meio de publicação. Recomenda-se sempre testar em diferentes dispositivos e coletar feedback dos usuários para otimizar a experiência de leitura.
Leia Também
