Altura de linha na grade base
Um texto de 16 px com proporção 1,5 numa grade de 8 px dá altura de linha de 24 px: exatamente 3 linhas da grade, e cada linha se apoia nos mesmos trilhos. Se o ideal não cair na grade, é ajustado a linhas inteiras. 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
- Grade
- 8
- Proporção preferida
- 1,5
- Ajustar
- nearest
- Entrelinha ideal
- 24
- Altura da linha
- 24
- Razão
- 1,5
Uma grade de linha de base mantém cada linha de texto nos mesmos trilhos horizontais invisíveis, para que parágrafos, legendas e layouts de várias colunas compartilhem um único ritmo vertical do topo da página ao rodapé. Designers e engenheiros front-end escolhem uma unidade de grade —muitas vezes quatro, seis ou oito pixels— e precisam de uma altura de linha que seja um múltiplo exato dessa unidade, não uma razão flutuante que deslize meio pixel a cada linha. Esta calculadora de altura de linha na grade base recebe o tamanho da fonte, a razão preferida sem unidade e a altura da fileira da grade, e encaixa a caixa de linha ideal no número inteiro de fileiras mais próximo (ou no teto, ou no piso). Você obtém a altura de linha encaixada em pixels, a razão efetiva para colar no CSS, quantas fileiras da grade essa linha ocupa e se o valor ideal já caía sobre a grade.
Como funciona o encaixe da altura de linha na grade base
Parta da regra familiar de altura de linha sem unidade: multiplique o tamanho da fonte por uma razão preferida como um ponto cinco para obter uma caixa de linha ideal na mesma unidade da fonte (quase sempre pixels CSS). Esse produto é confortável de ler, mas raramente cai exatamente sobre a grade base. Divida a altura de linha ideal pela altura da fileira da grade para saber quantas fileiras a linha quer ocupar; em seguida aplique um modo de encaixe.
Nearest arredonda para a contagem inteira de fileiras mais próxima, padrão para o corpo do texto quando você deseja a menor mudança visual em relação à razão preferida. Up (teto) sempre amplia a caixa de linha para que o texto nunca fique mais apertado que o ideal —útil em notas legais ou linhas longas que precisam de respiro—. Down (piso) reduz em direção à grade quando é preciso proteger um orçamento vertical apertado, como a altura de um cartão ou uma coluna de impressão.
Após o encaixe, multiplique a contagem inteira de fileiras pela unidade da grade para obter a altura de linha final, e divida pelo tamanho da fonte para recuperar a razão sem unidade que pode colocar em uma propriedade personalizada CSS. É imposta pelo menos uma fileira para que entradas patológicas não colapsem a altura de linha a zero.
Quando vale alinhar a linha à grade
Sistemas de design geram escalas de espaço e tipografia a partir de uma única constante de grade; chamar esta calculadora quando autores acrescentam um novo tamanho mantém cada token de altura de linha nos trilhos sem planilha. Pipelines de impressão e PDF que mapeiam CSS para grades de página fixas usam a mesma lógica de encaixe para que pré-visualizações na tela coincidam com a chapa. Validação falha não consome saldo.
Mantenha razões preferidas moderadas, fixe goldens nos campos arredondados e obtenha ritmo vertical reproduzível para tokens de design, workers de borda e geradores de guia de estilo sem montar um motor de layout próprio.
Casos de uso
Geração de tokens de design e escalas tipográficas
Quando você adicionar um novo tamanho de fonte a um sistema de design, encaixe a razão preferida na grade base compartilhada para que cada token de altura de linha seja um múltiplo inteiro da unidade da grade.
Layouts de várias colunas e cartões
Alinhe caixas de linha de corpo, legenda e títulos entre colunas e cartões empilhados calculando alturas de linha encaixadas para cada tamanho em relação a uma única grade.
Ritmo vertical em impressão e PDF
Mapeie escalas tipográficas de tela para uma linha de base de impressão fixa para que pipelines CSS para PDF mantenham o espaçamento de parágrafos coerente com a grade da página.
Perguntas frequentes
Qual é a diferença entre nearest, up e down?
Nearest arredonda a caixa de linha ideal para a contagem inteira de fileiras mais próxima. Up sempre aplica teto (entrelinha mais folgada). Down aplica piso (mais apertada). A contagem de fileiras nunca é menor que um.
Como isso difere de uma calculadora simples de altura de linha?
Uma calculadora simples apenas multiplica o tamanho da fonte por uma razão. Esta ferramenta também encaixa esse produto em uma grade base para que o ritmo vertical permaneça coerente entre tamanhos e colunas.
Qual unidade de grade devo escolher?
Designers costumam escolher 4, 6 ou 8 pixels e montar todo o espaçamento a partir desse número. Informe a mesma unidade aqui e cada altura de linha devolvida será um múltiplo exato dela, e não uma proporção que escorrega meio pixel por linha.
Como sei se a minha proporção preferida já se encaixa na grade?
O resultado avisa quando a altura de linha ideal já cai num número inteiro de linhas da grade. Aí nada muda: um texto de 16 px a 1,5 numa grade de 8 px fica em 24 px, três linhas, com a mesma proporção.
Uso o valor em pixels ou a proporção nos meus estilos?
Os dois mantêm o texto na grade. Use a altura de linha ajustada em pixels ou a proporção efetiva, que é essa altura dividida pelo tamanho da fonte, se os seus estilos usam alturas de linha sem unidade.
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/str/baseline-grid \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"grid":8}'const res = await fetch("https://api.kit.forhosting.com/str/baseline-grid", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"grid": 8
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/baseline-grid",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"grid": 8
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/baseline-grid", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"grid":8}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"grid":8}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/baseline-grid", 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,
"grid": 8
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.baseline_grid",
"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.
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
Como funciona o encaixe da altura de linha na grade base
Quando o produto ideal já equivale a um número inteiro de fileiras, a resposta marca on_grid true para que pipelines de tokens possam pular uma reescrita.
Contrato de entrada, campos de resposta e validação
Tipo de dezoito pixels na mesma grade de oito com razão um ponto cinco produz ideal vinte e sete, que encaixa nearest em vinte e quatro (três fileiras, razão cerca de um ponto três três) ou up em trinta e dois (quatro fileiras) conforme o snap. Envie por POST um corpo JSON com dois números finitos positivos obrigatórios: font_size (pixels CSS do texto que está dimensionando) e grid (altura da fileira da linha de base na mesma unidade). Opcionalmente envie preferred_ratio, que vale um ponto cinco se omitido, e snap como nearest, up ou down —aliases como round, ceil e floor são aceitos—. Campos numéricos podem chegar como números JSON ou strings decimais; valores ausentes, zero, negativos, NaN e Infinity falham com invalid_input e não são cobrados. Em caso de sucesso o payload ecoa font_size, grid, preferred_ratio e snap; informa ideal_line_height antes do encaixe; devolve line_height e ratio após o encaixe; inclui o inteiro grid_rows; define on_grid quando o ideal já coincidia com um múltiplo da grade; e oferece uma string formula curta para documentação. Exemplo: tipo de dezesseis pixels em grade de oito com razão preferida um ponto cinco produz ideal vinte e quatro, exatamente três fileiras, então line_height permanece vinte e quatro e a razão um ponto cinco. Combine os números com a própria conversão rem se o tamanho raiz diferir; este endpoint trabalha em pixels brutos para resultados determinísticos entre ambientes.
Onde uma API de altura de linha na grade base vale a pena
Bibliotecas de componentes que renderizam artigos em várias colunas, cartões de produto ou barras laterais de documentação precisam de linhas de base alinhadas entre breakpoints —processar tamanhos de fonte em lote pela API gera uma tabela estável de razões encaixadas para Storybook e regressão visual. Como a implementação é parse pura de nível A, cada chamada bem-sucedida custa o preço base publicado US$ 0,002 sem tokens de modelo nem rede de saída.
Perguntas técnicas
Como calculo uma altura de linha na grade base?
Envie font_size e grid positivos (e opcionalmente preferred_ratio, padrão 1.5, e snap: nearest, up ou down). A API devolve line_height como múltiplo inteiro da grade e a razão efetiva sem unidade.
Quais unidades devo usar para font_size e grid?
Use a mesma unidade para ambos —em geral pixels CSS—. A matemática é agnóstica de unidade desde que ambas as entradas compartilhem a escala; a conversão rem fica a cargo do tamanho de fonte raiz.
Quanto custa a ferramenta de altura de linha na grade base?
A ferramenta no navegador é gratuita. Solicitações API usam saldo pré-pago KIT a US$ 0,002 por chamada bem-sucedida; entrada inválida não é cobrada.