Gere uma escala tipográfica para títulos
Comece com texto de 16 px e razão 1,25, e os títulos sobem em degraus: h6 fica com 20, h5 com 25, h4 com 31,25, e cada nível acima multiplica pela mesma razão. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Uma escala tipográfica transforma um tamanho de corpo e uma razão em uma hierarquia previsível de títulos. Informe um tamanho-base, como 16, e uma razão positiva, como 1.25 para uma terça maior. O gerador atribui potências sucessivas dessa razão aos níveis e devolve uma lista ordenada e legível por máquinas desde h1. Ele ajuda a criar tokens CSS, documentar um sistema de design ou confirmar que uma hierarquia segue uma regra matemática coerente.
Escolha uma base e uma razão adequadas ao contexto de leitura
Comece pelo tamanho usado no texto corrido. Uma base de 16 pixels é comum na web, mas não é uma exigência universal: interfaces densas podem adotar um valor menor, enquanto projetos editoriais podem começar em 18 ou 20 pixels. A razão define a velocidade com que os títulos se afastam da base.
O valor 1.125 cria uma progressão discreta, 1.2 oferece uma hierarquia moderada e 1.25 costuma ser chamado de terça maior. Razões maiores produzem tamanhos de destaque rapidamente, principalmente quando os seis níveis HTML são solicitados. A capacidade aceita qualquer razão finita positiva.
Com 1, os tamanhos são iguais; abaixo de 1, diminuem à medida que o expoente aumenta. Apenas zero e valores negativos são erros. Mantenha a unidade coerente em seu sistema.
A resposta identifica px por conveniência, porém a relação numérica não depende de unidade. Escolha os valores considerando conteúdo real, largura disponível, métricas da fonte e dispositivos de destino, em vez de se apoiar apenas no nome tradicional da razão.
Entenda como cada nível de título é calculado
O tamanho-base corresponde ao passo zero e não aparece como título. Ao solicitar seis níveis, h6 recebe a base multiplicada pela razão elevada a 1, h5 usa o expoente 2, e a sequência continua até h1 com expoente 6. Assim, quando a razão é maior que 1, h1 fica mais distante do corpo, enquanto a saída preserva a ordem habitual de h1 a h6.
Com três níveis, a resposta contém h1, h2 e h3; h3 usa a primeira potência, h2 a segunda e h1 a terceira. Cada linha informa o nome, o expoente e o tamanho calculado. Os resultados são arredondados para seis casas decimais, removendo ruído de ponto flutuante sem perder a precisão necessária para variáveis CSS.
O campo opcional levels assume 6 e deve ser um inteiro de 1 a 6. Valores finais excessivos são rejeitados antes de gerar uma saída infinita ou impraticável.
Aplique a escala sem confundir tamanho com estrutura documental
Use os valores gerados como candidatos de design, não como instruções para escolher tags pela aparência. Os níveis HTML comunicam a estrutura do documento a navegadores, mecanismos de busca e tecnologias assistivas; um h2 deve representar uma subseção de h1 mesmo quando um componente o exibe com um token menor. Um fluxo prático é gerar a escala, copiar os tamanhos para tokens semânticos e depois mapear esses tokens para os elementos por meio dos estilos.
Teste o maior valor com títulos reais, telas móveis estreitas, traduções, pesos fortes e fontes com métricas diferentes. Você pode usar somente uma parte da escala, limitar tamanhos grandes de forma responsiva ou compartilhar um tamanho entre níveis. Essas adaptações fazem o sistema funcionar em condições reais.
Para auditoria, armazene juntos a base, a razão, o número de níveis e as linhas retornadas; assim, qualquer mudança poderá ser atribuída ao corpo, à razão ou à seleção de níveis.
Casos de uso
Criar tokens de design CSS
Gere tamanhos repetíveis para títulos e leve os valores para propriedades personalizadas ou para seu pipeline de tokens.
Documentar a hierarquia da marca
Registre base e razão junto aos valores de h1 a h6 para que a equipe reproduza a tipografia com consistência.
Comparar escalas candidatas
Execute várias razões positivas com a mesma base e compare a rapidez de crescimento dos títulos de destaque.
Perguntas frequentes
A razão pode ser menor que um?
Sim. Toda razão finita positiva é válida. Abaixo de um, os valores diminuem conforme o expoente aumenta.
Quantos níveis podem ser gerados?
De 1 a 6, correspondentes aos títulos HTML padrão. Quando levels é omitido, o padrão é 6.
Qual razão devo usar para começar?
A razão 1,125 cria uma progressão contida, 1,2 uma hierarquia visível mas moderada, e 1,25 a clássica terça maior. Razões maiores chegam rápido a tamanhos enormes quando os seis níveis são pedidos.
Qual degrau da escala cada título recebe?
O texto base é o degrau zero. O menor título, h6, é a base multiplicada uma vez pela razão, h5 usa a razão ao quadrado e assim por diante até h1, que usa a sexta potência.
Posso trabalhar em rem em vez de pixels?
Sim. Os tamanhos aparecem em px, mas a relação não tem unidade: comece com um valor em rem e as proporções serão as mesmas. Só mantenha uma única unidade em todo o seu sistema.
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/doc/typography-scale-generate \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"base_font_size":16,"ratio":1.25}'const res = await fetch("https://api.kit.forhosting.com/doc/typography-scale-generate", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base_font_size": 16,
"ratio": 1.25
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/doc/typography-scale-generate",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base_font_size": 16,
"ratio": 1.25
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/doc/typography-scale-generate", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base_font_size":16,"ratio":1.25}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base_font_size":16,"ratio":1.25}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/doc/typography-scale-generate", 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
{
"base_font_size": 16,
"ratio": 1.25
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "doc.typography_scale_generate",
"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_mb | 25 |
max_pages | 200 |
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
Entenda como cada nível de título é calculado
O algoritmo não consulta rede, relógio nem aleatoriedade, portanto entradas iguais sempre retornam o mesmo JSON. Os aliases base e font_size representam o tamanho-base, e scale_ratio representa a razão.
Aplique a escala sem confundir tamanho com estrutura documental
A API custa US$ 0,002 por solicitação bem-sucedida, e o mesmo cálculo determinístico pode rodar no navegador. Entradas inválidas, inclusive uma razão não positiva, retornam invalid_input em vez de uma escala parcial.
Perguntas técnicas
Qual fórmula o gerador utiliza?
Cada tamanho é base_font_size multiplicado por ratio elevado ao expoente informado na respectiva linha.
Por que uma razão igual a zero é rejeitada?
Zero não forma uma escala proporcional positiva. A capacidade retorna invalid_input para zero ou qualquer valor negativo.
Quanto custa uma solicitação de API?
Uma solicitação bem-sucedida custa US$ 0,002. Uma entrada inválida devolve um erro, não uma escala.