Gerador de escala tipográfica modular
Partindo de 16 px com proporção de 1,25, cinco passos dão 16, 20, 25, 31,25, 39,0625 e 48,828125. Escolha três números e receba toda uma hierarquia de tamanhos de fonte sem chutar cada um. 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 de fonte base
- 16
- Razão da escala modular
- 1,25
- Contagem de passos
- 5 px
- Tamanhos
- 16, 20, 25, 31,25, 39,0625, 48,828125
- Contagem de tamanhos
- 6
Um gerador de escala tipográfica modular transforma três números de design — tamanho de fonte base, razão de escala e contagem de passos — em uma escada coerente de tamanhos para títulos, corpo e legendas. Informe uma base como dezesseis, uma razão como um ponto vinte e cinco para uma terça maior ou um ponto seiscentos e dezoito para a razão áurea, e quantos passos você quer acima da base; a ferramenta devolve cada tamanho como base vezes razão elevado a n para n de zero até a contagem de passos, mais uma tabela de escala estruturada, uma string de fórmula fechada e passos de substituição ordenados que você pode afirmar em testes ou design systems. Kits de UI, guias de marca, tokens de design CSS e exercícios de sala precisam dessa mesma progressão geométrica determinística sem abrir planilha nem plugin do Figma.
O que é uma escala tipográfica modular e por que a razão deve superar um
Uma escala tipográfica modular é uma sequência geométrica de tamanhos de fonte controlada por uma única base e uma única razão. Se a base é dezesseis e a razão é um ponto vinte e cinco, o passo zero é dezesseis, o um é vinte, o dois é vinte e cinco, o três é trinta e um ponto vinte e cinco, e assim por diante — cada tamanho é o anterior multiplicado pela mesma razão.
Designers escolhem razões com nomes musicais ou clássicos: segunda maior perto de um ponto cento e vinte e cinco, terça maior um ponto vinte e cinco, quarta justa cerca de um ponto trezentos e trinta e três, quinta justa um ponto cinco e razão áurea perto de um ponto seiscentos e dezoito. O poder do método é a contenção: em vez de inventar valores de pixel arbitrários de h1 à legenda, você escolhe três números e herda uma hierarquia que parece intencional entre breakpoints e componentes.
A razão deve ser estritamente maior que um porque razão um produz sequência constante em que cada passo iguala a base, e razão menor que um encolhe tamanhos conforme o índice de passo cresce, o que inverte a hierarquia de títulos e quase nunca é o que uma landing de escala tipográfica promete.
O caminho de verificação recalcula cada tamanho com multiplicação iterativa e o mesmo arredondamento a doze decimais dos campos publicados, de modo que uma resposta bem-sucedida sempre traz passos que você pode recomputar à mão ou fixar em testes unitários.
Dicas práticas, limites e buscas relacionadas
Marcos comuns de estúdio são fáceis de memorizar: base dezesseis com terça maior um ponto vinte e cinco em cinco passos é uma escada familiar de corpo a display; base dezoito com razão áurea em quatro passos serve sistemas de artigo longo; base quinze com quarta justa funciona bem em UIs administrativas densas. Prefira enviar números em vez de strings pré-formatadas quando controlar o cliente; strings numéricas só são aceitas se corresponderem a um padrão numérico finito estrito.
Esta página atende quem busca gerador de escala tipográfica modular, calculadora de escala tipográfica ou ferramenta de razão e passos de tamanho de fonte; não é conversor px-para-rem, nem calculadora de clamp fluido, nem recomendador de pareamento de fontes. Prefira esta capacidade quando você já conhece base, razão e contagem de passos e só precisa da escada de tamanhos; se precisar de conversão rem depois, converta cada tamanho publicado com uma ferramenta separada de fonte raiz.
Checagens de ida e volta são diretas: recalcule base vezes ratio de forma iterativa e confirme que cada entrada em sizes e scale coincide no mesmo arredondamento a doze decimais usado pelo solver.
Casos de uso
Tokens de design para títulos e corpo
Designers informam base, razão e passos uma vez e copiam o array sizes em variáveis CSS ou estilos de texto do Figma para uma hierarquia de produto consistente.
Planilhas de guias de marca
Equipes documentam uma escala de terça maior ou razão áurea com números determinísticos que alunos e freelancers podem recomputar sem plugins proprietários.
Perguntas frequentes
O que é uma escala tipográfica modular?
Uma sequência geométrica de tamanhos de fonte size(n) = base × ratio^n. Uma base e uma razão produzem uma escada coerente para corpo, títulos e display.
Por que a razão deve ser maior que um?
Razão um mantém cada passo igual à base; razão abaixo de um encolhe tamanhos conforme os passos aumentam.
Quantos tamanhos eu obtenho para uma contagem de passos dada?
Cinco passos rendem seis tamanhos começando na base.
Em que unidade estão os tamanhos?
Os tamanhos são números puros na mesma unidade da sua base (por convenção px). A resposta rotula unit como px por conveniência de tokens de design; converta para rem se o sistema exigir.
O gerador de escala tipográfica modular é gratuito?
A ferramenta no navegador é gratuita e roda localmente.
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/modular-scale \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"base":16,"ratio":1.25,"steps":5}'const res = await fetch("https://api.kit.forhosting.com/hobby/modular-scale", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base": 16,
"ratio": 1.25,
"steps": 5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/hobby/modular-scale",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base": 16,
"ratio": 1.25,
"steps": 5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/hobby/modular-scale", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base":16,"ratio":1.25,"steps":5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base":16,"ratio":1.25,"steps":5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/hobby/modular-scale", 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": 16,
"ratio": 1.25,
"steps": 5
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "hobby.modular_scale",
"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 | 1000000000000 |
max_steps | 32 |
min_base | 1e-12 |
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
Quando a razão é um ou menos a escala não cresce, então a API devolve um erro invalid_input claro em vez de uma lista plana ou encolhendo que quebraria a hierarquia. O caminho é aritmética pura — sem rede, sem sementes aleatórias nem dependência de relógio — de modo que o executor gratuito no navegador e a API pré-paga devolvem o mesmo JSON após arredondamento decimal fixo toda vez que você chama.
O que é uma escala tipográfica modular e por que a razão deve superar um
Por isso esta capacidade rejeita razão de um ou menos com invalid_input, alinhada a expectativas de sala e intenção SEO de um gerador de escala tipográfica modular. Tamanhos base positivos e contagem de passos inteira não negativa limitada mantêm potências intermediárias finitas em precisão dupla IEEE.
Como chamar a API e o que volta
Base deve ser um número finito estritamente positivo dentro do limite absoluto publicado de um trilhão. Ratio deve ser um número finito estritamente maior que um e dentro do mesmo limite absoluto. Envie um corpo JSON com três campos obrigatórios: base (aliases base_size, font_size e base_font), ratio (aliases scale_ratio, modular_ratio e r) e steps (aliases step_count, count e n). Steps deve ser um inteiro não negativo de zero a trinta e dois inclusive; a resposta então inclui step_count mais um tamanhos cobrindo expoentes de zero a steps. Em sucesso a resposta ecoa base e ratio arredondados, define step_count na contagem inteira de passos, sizes no array ordenado de tamanhos de fonte arredondados, scale num array de objetos cada um com step e size, size_count no comprimento de sizes, unit na string px como rótulo convencional de token de design, formula na relação fechada tamanho de n igual a base vezes ratio à n para n de zero a steps, message num breve resumo em inglês e steps num percurso ordenado de linhas intermediárias. Validação falha — campos ausentes, números não finitos, base não positiva, ratio de um ou menos, steps fracionários ou fora da faixa, ou tamanho estourado não finito — devolve invalid_input e nunca é cobrada. O preço é fixo US$ 0,002 por requisição bem-sucedida com unidade item e preço unitário marginal zero.
Dicas práticas, limites e buscas relacionadas
Mantenha base e ratio dentro da faixa absoluta publicada para que multiplicações sucessivas sigam finitas no Worker e no navegador; prefira contagens de passos modestas quando a razão é grande para que o título maior não exploda além dos limites de layout. Ao ensinar ou documentar um design system, combine um caminho feliz com razão deliberada de um ou zero ponto nove para demonstrar o caminho duro de invalid_input, e confirme que tamanhos no passo k igualam base vezes ratio à k no arredondamento a doze decimais. Tarefas falhas com invalid_input não consomem saldo pré-pago, o que mantém baratos scripts exploratórios quando alunos sondam deliberadamente bordas.
Casos de integração
Testes unitários de geradores de design system
Desenvolvedores alimentam triplas base-razão-passos conhecidas e afirmam linhas de sizes e scale contra fixtures golden em CI sem ferramentas de UI flutuantes.