Calculadora de Altura de Linha

• Cálculo preciso da altura de linha: obtenha valores exatos em px, sem unidade, porcentagem e em a partir de qualquer tamanho de fonte. Nossa calculadora usa fórmulas tipográficas padrão para que seu ritmo vertical seja matematicamente correto e visualmente consistente em todo o design.
• Prévia ao vivo em tempo real: veja o efeito de cada ajuste na hora, com uma prévia de texto ao vivo renderizada na família e no tamanho de fonte escolhidos. Digite seu próprio texto de exemplo para ver exatamente como o conteúdo ficará com a altura de linha calculada.
• Recomendações inteligentes por tamanho de fonte: nossa ferramenta oferece recomendações de altura de linha sob medida para o tamanho da fonte - proporções mais justas para títulos e textos grandes, espaçamento mais generoso para o corpo do texto. Siga a faixa sugerida para legibilidade ideal e tipografia profissional.
• 100% privado e grátis: todos os cálculos acontecem localmente no seu navegador. Seu texto nunca sai do seu dispositivo. Sem cadastro, sem uploads, sem limites ocultos - só cálculos de altura de linha rápidos e precisos para qualquer projeto.

• Design e desenvolvimento web: defina valores precisos de line-height no CSS para estabelecer um ritmo vertical consistente em todo o site. Use o valor sem unidade para máxima responsividade e facilidade de manutenção nas folhas de estilo.
• Conteúdo e layout de blog: otimize a legibilidade de conteúdos longos calculando a altura de linha ideal para o corpo do texto. Uma altura de linha bem escolhida entre 1,4 e 1,8 melhora bastante a compreensão da leitura e reduz o cansaço visual.
• Tipografia responsiva: ao usar tipografia fluida com clamp() ou unidades de viewport, use nossa calculadora para determinar a altura de linha correta em cada breakpoint. Garanta que o texto continue legível em todos os tamanhos de tela e dispositivos.
• Tokens de design system: gere tokens de altura de linha consistentes para o seu design system. Defina uma escala (justa, normal, relaxada, espaçosa) e use a saída CSS direto na sua biblioteca de componentes ou na configuração do Tailwind.
• Conformidade com acessibilidade: as WCAG 2.1 recomendam altura de linha de pelo menos 1,5 para o corpo do texto. Use nossa calculadora para garantir que sua tipografia atende aos padrões de acessibilidade mantendo a harmonia visual e a intenção do design.
• Prototipagem de UI/UX: experimente rapidamente diferentes alturas de linha durante a fase de design. Visualize como a tipografia será renderizada antes de escrever qualquer código, garantindo alinhamento perfeito com os mockups.

A altura de linha, tradicionalmente chamada de entrelinha na tipografia impressa (das finas tiras de chumbo colocadas entre as linhas de tipos metálicos), é a distância vertical entre as linhas de base de linhas de texto consecutivas. No CSS, o line-height controla o espaço acima e abaixo de cada linha de texto, tornando-a uma das propriedades mais importantes para legibilidade e ritmo vertical. Uma altura de linha bem escolhida transforma um texto denso e desconfortável em uma leitura fluida e agradável.

Diferente do tamanho da fonte, medido do topo do ascendente mais alto até a base do descendente mais baixo, a altura de linha define a altura total de cada caixa de linha, incluindo os glifos e o espaçamento acima e abaixo deles. A diferença entre altura de linha e tamanho da fonte é distribuída igualmente acima do topo e abaixo da base do texto, criando um espaçamento entre linhas consistente.

Nossa calculadora usa uma fórmula simples: altura de linha (px) = tamanho da fonte (px) × proporção . Quando você ajusta o tamanho da fonte ou o controle de proporção, a ferramenta recalcula na hora os quatro formatos de saída - sem unidade, pixels, porcentagem e em - mostrando claramente a relação entre eles.

1. Informe o tamanho da fonte - escolha entre presets comuns (8 px a 72 px) ou use o controle para precisão. O tamanho da fonte determina a medida base de todos os cálculos de altura de linha.
2. Selecione uma família de fonte - escolha entre fontes web populares. Fontes diferentes têm alturas de x e proporções de ascendente/descendente diferentes, o que afeta a aparência visual da altura de linha mesmo com o mesmo valor numérico.
3. Ajuste a proporção de altura de linha - use o controle ou clique em um preset (Justa, Normal, Relaxada etc.). A ferramenta mostra os quatro formatos de saída ao mesmo tempo e atualiza a prévia ao vivo em tempo real.

• Sem unidade (recomendado): a proporção entre altura de linha e tamanho da fonte (por exemplo, 1,5). É a melhor prática em CSS porque é herdada de forma limpa dos elementos pais e escala proporcionalmente a qualquer mudança de tamanho da fonte. Prefira sempre line-height sem unidade nas folhas de estilo.
• Pixels (px): a altura de linha absoluta em pixels (por exemplo, 24px para texto de 16px na proporção 1,5). Útil quando você precisa de alinhamento vertical preciso com elementos de tamanho fixo, mas evite no corpo do texto porque não escala com as preferências de fonte do usuário.
• Porcentagem (%): a altura de linha expressa como porcentagem do tamanho da fonte (por exemplo, 150%). Comporta-se de forma parecida com o valor sem unidade, mas pode gerar resultados inesperados de herança em elementos aninhados.
• Em: relativo ao tamanho da fonte do elemento (por exemplo, 1.5em). Parecido com a porcentagem, mas expresso como multiplicador. Valores em em se acumulam na herança, o que pode causar problemas de espaçamento em componentes muito aninhados.

Sua privacidade é nossa prioridade. A Calculadora de Altura de Linha processa tudo localmente no seu navegador com JavaScript do lado do cliente. Nenhum dado é enviado a servidor algum - seu texto, suas escolhas de fonte e suas configurações nunca saem do seu dispositivo. A ferramenta é totalmente grátis, sem cadastro, sem limite de tamanho de arquivo e sem restrições ocultas. Use com confiança em projetos pessoais, sites comerciais ou trabalhos para clientes.