Altura de linha CSS recomendada por tamanho e tipo de texto

Esta ferramenta transforma o tamanho da fonte e a função tipográfica em um ponto de partida prático para a altura de linha CSS. Você escolhe texto corrido, título ou legenda, e o sistema aplica uma proporção comum antes de retornar o valor sem unidade e seu equivalente em pixels. Ela ajuda quando o design já tem tamanhos de fonte, mas ainda não possui tokens de ritmo vertical. O resultado é determinístico, fácil de copiar para CSS e deve ser tratado como orientação, não como a única configuração correta para todas as fontes.

Escolha a função do conteúdo antes do espaçamento

A altura de linha deve acompanhar a forma como o texto é lido, e não repetir um único multiplicador por toda a interface. O texto corrido normalmente ocupa várias linhas e precisa facilitar a passagem do fim de uma linha ao começo da próxima; por isso, a ferramenta recomenda 1.5. Títulos costumam ser maiores, curtos e limitados a uma ou duas linhas; a proporção mais compacta de 1.2 preserva sua unidade visual.

Legendas são menores, porém breves, e 1.4 oferece espaço sem fazê-las dominar elementos próximos. As proporções são pontos de partida baseados em práticas comuns e podem ser ajustadas após você avaliar a fonte e o layout reais.

Entenda a proporção e o valor em pixels retornados

A recomendação multiplica o tamanho positivo em pixels CSS pela proporção fixa do tipo escolhido. Um corpo de 16 pixels usa 1.5 e retorna 24 pixels; um título de 32 pixels usa 1.2 e retorna 38.4 pixels. Na produção, o valor sem unidade costuma ser melhor porque herda proporcionalmente quando descendentes mudam de tamanho.

O resultado em pixels continua útil para especificações, handoff, garantia visual, e-mails e tokens que exigem comprimentos explícitos. Os valores são arredondados a quatro casas decimais para manter frações úteis sem ruído de ponto flutuante. Dados ausentes, zero, negativos, infinitos ou não numéricos geram erro.

O número representa a caixa de linha, não a altura visível do glifo. Fontes distribuem ascendentes, descendentes e espaços internos de maneiras diferentes. Portanto, use a conta como base reproduzível e confira o texto renderizado antes de fixar o token.

Teste a recomendação no layout real

Depois de gerar o valor, aplique-o no contexto final e teste conteúdo representativo, não apenas uma frase ideal. Para texto corrido, inclua parágrafos, links longos, destaques, números e larguras móveis. Verifique se o leitor passa de uma linha à outra sem se perder e se o parágrafo continua coeso.

Para títulos, teste o maior texto plausível em cada breakpoint. A proporção 1.2 normalmente cria um bloco forte, mas uma fonte com acentos altos ou um título em três linhas pode exigir mais espaço. Para legendas, examine cartões densos, créditos, notas de tabela e textos localizados.

Teste também zoom e substituições de fonte. Registre ajustes necessários como tokens deliberados, não como declarações CSS espalhadas. Esta capacidade não mede métricas da fonte, comprimento de linha, idioma, peso ou ambiente de renderização; portanto, não substitui revisão visual ou testes de acessibilidade.

Ela oferece um início sensato, explicável e repetível.