Fontes Serif vs Sans-Serif: Quando Usar Cada Uma
Entenda as diferenças fundamentais entre os tipos de fontes e como escolher a melhor para seu projeto web.
Ler artigoEspaçamento de Linhas: O Guia Prático para Legibilidade
Descubra como o espaçamento entre linhas afeta a legibilidade e aprenda as melhores práticas para diferentes tamanhos de tela e contextos de leitura.
Por Que o Espaçamento Importa
Você já notou como alguns textos são fáceis de ler enquanto outros cansam os olhos em segundos? A resposta está frequentemente no espaçamento entre linhas — aquele espaço invisível mas crucial que separa cada linha de texto. Não é só sobre estética. É sobre conforto, compreensão e até velocidade de leitura.
O line-height (altura da linha) é um dos elementos mais subestimados do design web. Designers iniciantes costumam deixar o valor padrão do navegador e seguir adiante. Mas quem entende o poder dessa propriedade consegue transformar um parágrafo cansativo em algo que os leitores realmente querem devorar.
Os Números: Como Medir e Entender
O line-height em CSS pode ser definido de várias formas. Você pode usar valores absolutos em pixels (não recomendado), valores em ems, rems, ou melhor ainda — valores unitários que são multiplicadores do tamanho da fonte. Quando você escreve
line-height: 1.6
, isso significa que o espaço entre linhas é 1.6 vezes o tamanho da fonte. Se a fonte tem 16px, o espaçamento total será 25.6px.
Para corpo de texto em telas, você quer algo entre 1.5 e 1.8. Muito menos fica claustrofóbico. Muito mais e as linhas ficam tão separadas que fica difícil seguir o fluxo. A maioria dos designers experimenta e encontra seu ponto ideal. Começar com 1.6 é seguro. Ajuste a partir daí.
Responsividade: Diferentes Telas, Diferentes Valores
Aqui está a realidade: o espaçamento ideal em um celular não é o mesmo que em um monitor de 27 polegadas. Em dispositivos móveis, as pessoas seguram o aparelho perto dos olhos e as linhas são mais curtas, então você pode usar um line-height um pouco maior (1.7 a 1.9). Em telas maiores com linhas longas, você quer um espaçamento um pouco mais compacto para manter o fluxo de leitura.
Use media queries para ajustar. Comece com line-height mais generoso em mobile. Depois, em breakpoints maiores, você reduz um pouco. É contraintuitivo para alguns, mas funciona.
Implementação Prática: O Código Real
Exemplos que você pode usar hoje no seu projeto
Texto de Corpo Padrão
Para parágrafos e corpo do artigo, use
line-height: 1.6
em mobile e
line-height: 1.5
em desktop. Essa combinação oferece conforto de leitura em qualquer tela.
Títulos e Headings
Títulos podem ter line-height mais compacto:
line-height: 1.2
. Eles são maiores e têm menos linhas, então não precisam do mesmo espaçamento generoso do corpo do texto.
Listas e Itens
Listas funcionam bem com
line-height: 1.7
. Cada item precisa de respiração própria, especialmente se alguns itens têm múltiplas linhas.
O Impacto Real na Experiência do Usuário
Você já leu um artigo que simplesmente fluía? Que seus olhos se movimentavam naturalmente de linha para linha sem cansaço? Não era mágica. Era espaçamento bem pensado. Estudos mostram que leitores passam mais tempo em textos com espaçamento generoso e compreendem melhor o conteúdo.
Isso afeta métricas reais: tempo médio na página, taxa de rejeição, até conversões. Um site com boa legibilidade é um site que as pessoas querem usar. E a boa legibilidade começa com espaçamento entre linhas bem calibrado.
Resumo Prático: O Que Levar para Casa
- Use line-height: 1.6 como ponto de partida para corpo de texto
- Aumente para 1.7-1.8 em dispositivos móveis para melhor legibilidade
- Reduza para 1.4-1.5 em títulos para evitar excesso de espaço
- Use media queries para ajustar conforme o breakpoint
- Teste com usuários reais — o que funciona para você pode não funcionar para todos
Lembre-se: não existe um valor universal perfeito. O espaçamento ideal depende da fonte escolhida, do tamanho do texto, do comprimento da linha e do contexto de leitura. Comece com essas recomendações, depois ajuste conforme necessário.
Quer Aprofundar em Tipografia Web?
O espaçamento entre linhas é apenas uma peça do quebra-cabeça tipográfico. Combine esse conhecimento com escolhas certas de fontes, tamanhos e contraste para criar experiências de leitura verdadeiramente memoráveis.
Artigos Relacionados
Nota Importante
Este artigo apresenta recomendações e boas práticas para espaçamento entre linhas baseadas em padrões amplamente aceitos na indústria de design web. Cada projeto é único, e o que funciona melhor depende do contexto específico, da audiência, da fonte escolhida e do tipo de conteúdo. Recomendamos sempre testar com usuários reais e ajustar conforme necessário. As preferências de acessibilidade individuais também variam, então considere sempre oferecer opções de customização quando possível.