Calculadora de altura de linha
Um texto de 16 px com proporção de 1,5 pede uma altura de linha de 24 px. Digite qualquer tamanho de fonte e proporção e receba o valor em pixels para um layout fixo, uma especificação de design ou um modelo de e-mail. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Tamanho da fonte
- 16
- Razão de altura de linha sem unidade
- 1,5
- Altura de linha em px
- 24
- Precisão
- 10
Esta calculadora de altura de linha converte um tamanho de fonte em pixels CSS e uma razão de altura de linha adimensional na altura de linha resultante em pixels, o valor exato que você define como line-height quando prefere uma pilha absoluta em pixels em vez de um multiplicador puro sem unidade. Designers e desenvolvedores front-end ainda recorrem a esse cálculo o tempo todo: um texto de corpo a dezesseis pixels com razão um vírgula cinco precisa de vinte e quatro pixels de altura de linha; títulos de dezoito pixels com razão um vírgula seis precisam de vinte e oito vírgula oito pixels. A identidade é totalmente determinística: a altura de linha em pixels é igual ao tamanho da fonte vezes a razão. Não há chamada de rede, amostragem nem atalho dependente de data — apenas aritmética finita sobre dois escalares positivos.
O que significa altura de linha e o que esta calculadora retorna
Altura de linha é o ritmo vertical do texto: a distância de linha de base a linha de base que navegadores e mecanismos de layout usam ao empilhar linhas de um parágrafo. Em CSS, você pode escrever line-height como uma razão sem unidade, como um vírgula cinco, como uma porcentagem, ou como um comprimento absoluto em pixels.
Muitos sistemas de design mantêm uma razão sem unidade na camada de tokens para herança e depois materializam um valor absoluto em pixels ao exportar mockups fixos, especificações do Figma ou modelos de e-mail que não podem herdar. Esta calculadora implementa o produto simples altura de linha em pixels igual ao tamanho da fonte vezes a razão, que é exatamente o que uma razão de line-height sem unidade multiplica sobre o tamanho de fonte usado.
Não há modelo de entrelinha de tipos móveis de impressão, nem consulta de métricas OpenType, nem conversão entre rem e em: esses são problemas separados. Razões não positivas também são rejeitadas para que o resultado permaneça um comprimento em pixels positivo.
Onde as alturas de linha em pixels se encaixam em sistemas de design, CSS e ensino
Designers de produto convertem uma escala tipográfica modular em alturas de linha absolutas ao entregar mockups mobile, quando clientes de e-mail ignoram a herança sem unidade, ou quando uma exportação em PDF de impressão congela toda medida em pixels ou pontos. Educadores que ensinam fundamentos de CSS podem mostrar que uma razão sem unidade de um vírgula cinco a dezesseis pixels equivale a vinte e quatro pixels sem depender do arredondamento opaco das DevTools do navegador.
Revisores de acessibilidade às vezes precisam de uma verificação rápida de que o texto de corpo atende a uma altura de linha absoluta mínima para leitura longa, mesmo quando o token de origem ainda é uma razão. Combine-a com conversores de unidades tipográficas quando também precisar converter px para em, e tenha em mente que a renderização real ainda depende de métricas de fonte, meia-entrelinha e modelos de caixa depois que o valor em pixels sai desta calculadora.
Casos de uso
Documentação de CSS e componentes
Documente exemplos do Storybook ou de guias de estilo com valores exatos de line-height em px que correspondem às razões sem unidade usadas em folhas de estilo de produção.
Perguntas frequentes
Como a altura de linha é calculada?
Por exemplo, 16 px com razão 1,5 resulta em 24 px.
O que acontece se o tamanho da fonte for zero ou negativo?
Um tamanho de fonte não positivo não pode definir uma altura de linha útil neste modelo.
Isso converte unidades rem ou em?
Não. O tamanho da fonte é interpretado como pixels CSS e a razão não tem unidade. Use um conversor de unidades dedicado se precisar de rem ou em.
Por que os resultados são arredondados a uma precisão?
A precisão padrão é 10 casas decimais; você pode definir a precisão de 0 a 15.
Qual altura de linha combina com texto de 16 px?
Com proporção de 1,5, são 24 px. Multiplique o tamanho da fonte pela proporção para obter o valor em pixels de um layout fixo, de um mockup ou de um modelo de e-mail.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/hobby/line-height \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"ratio":1.5}'const res = await fetch("https://api.kit.forhosting.com/hobby/line-height", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"ratio": 1.5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/hobby/line-height",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"ratio": 1.5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/hobby/line-height", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"ratio":1.5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"ratio":1.5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/hobby/line-height", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"font_size": 16,
"ratio": 1.5
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "hobby.line_height",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Limites
max_abs_value | 1000000000000000 |
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
O que significa altura de linha e o que esta calculadora retorna
Você informa um tamanho de fonte positivo em pixels CSS e uma razão positiva sem unidade; o mecanismo retorna o tamanho de fonte normalizado, a razão, a altura de linha calculada em pixels, a etiqueta de método line_height, a precisão usada no arredondamento e uma string curta de lembrete da fórmula. Entradas inválidas geram invalid_input, incluindo tamanho de fonte ou razão ausentes, valores não finitos, magnitudes acima do teto documentado e qualquer tamanho de fonte não positivo, porque um tamanho de fonte zero ou negativo não pode definir uma caixa de linha útil. O caminho é determinístico, de modo que as mesmas entradas sempre produzem os mesmos números arredondados para planilhas de exercícios, testes unitários, geradores de tokens de design e consumidores de API que não podem inventar espaçamento.
Como o tamanho da fonte e a razão são lidos e como os resultados permanecem reproduzíveis
Sinais de mais à esquerda e notação científica em strings numéricas são permitidos quando podem ser interpretados como decimais finitos; espaços incorporados, prefixos hexadecimais e tokens não numéricos são rejeitados com uma mensagem clara, para que uma célula ruim não vire uma altura de linha errada. A razão também precisa ser positiva: um multiplicador de zero colapsaria a caixa de linha, e uma razão negativa não é um produto de line-height CSS válido neste modelo. Os nomes de campo preferidos são font_size para o tamanho em pixels CSS e ratio para o multiplicador sem unidade, mas apelidos como fontSize, size, fs e px para o tamanho, e line_height_ratio, lineHeight, multiplier e lh para a razão são aceitos, para que planilhas, strings de consulta e formulários digitados possam reutilizar um único contrato. Tamanhos de fonte zero e negativos sempre falham com invalid_input, seguindo a regra de que a aritmética de line-height é indefinida para tipografia não positiva. Um campo opcional precision, com os apelidos decimals e dp, escolhe quantas casas decimais expor para todas as saídas numéricas, com padrão dez e teto de quinze, para que os goldens em JSON permaneçam estáveis entre runtimes. Combine a execução gratuita no navegador desta página com a API paga quando precisar do mesmo resultado matemático dentro de um pipeline automatizado ou de build de tokens de design sem reimplementar a multiplicação você mesmo.
Onde as alturas de linha em pixels se encaixam em sistemas de design, CSS e ensino
Engenheiros front-end usam a mesma aritmética ao gerar propriedades customizadas de CSS a partir de um arquivo JSON de tokens, ao documentar uma escala tipográfica no Storybook, ou ao escrever testes de snapshot que esperam line-height de vinte e quatro para um tamanho de corpo de dezesseis pixels. Nesta página, o trabalho roda inteiramente no seu navegador; pela API, cada consulta bem-sucedida custa US$ 0,002, a validação com falha não é cobrada, e nada é armazenado depois que a resposta é devolvida. Essa divisão — exploração interativa gratuita e uma API paga e idêntica — segue o padrão do restante do catálogo tier A do KIT e permite ir de uma crítica de design a um pipeline automatizado de tokens sem mudar o resultado matemático.
Casos de integração
Escalas tipográficas de tokens de design
A partir do tamanho de fonte de cada nível e de uma razão compartilhada, materialize pixels absolutos de altura de linha para entrega ao Figma, CSS de e-mail e exportações de tokens em JSON.
Fixtures determinísticas de CI
Gere resultados reproduzíveis de line_height_px para testes unitários, testes de snapshot e scripts de build de sistemas de design sem multiplicações escritas manualmente.
Perguntas técnicas
Quanto custa a calculadora de altura de linha?
É gratuita no navegador, nesta página. Pela API, uma solicitação bem-sucedida custa US$ 0,002; entradas inválidas não são cobradas.