Calculadora de Escala Tipográfica
Escolha um tamanho base e uma razão para gerar uma escala completa de tamanhos de fonte, em pixels e rem.
Entradas
Cada passo multiplica (ou divide) o tamanho base pela razão escolhida.
Resultados
| Passo | px | rem | |
|---|---|---|---|
| -2 | 10.24 | 0.64 | Ag |
| -1 | 12.8 | 0.8 | Ag |
| 0 | 16 | 1 | Ag |
| 1 | 20 | 1.25 | Ag |
| 2 | 25 | 1.563 | Ag |
| 3 | 31.25 | 1.953 | Ag |
| 4 | 39.06 | 2.441 | Ag |
| 5 | 48.83 | 3.052 | Ag |
Como montar uma escala tipográfica
Escolha um tamanho base e uma razão para gerar uma escala completa de tamanhos de fonte, em pixels e rem.
Como é calculado
Cada passo multiplica (passos acima) ou divide (passos abaixo) o tamanho base pela razão uma vez por passo — a mesma progressão geométrica usada por escalas tipográficas modulares em ferramentas de design.
Escolhendo uma razão
- Razões menores (1,067-1,2) combinam com interfaces densas com muitos tamanhos de texto.
- Razões maiores (1,333-1,618) combinam com layouts editoriais, com títulos em destaque.
Exemplo prático
Uma base de 16px com uma razão de 1,25 (Major Third) produz 20px, 25px, 31,25px, e assim por diante subindo, e 12,8px, 10,24px descendo.
Notas de cálculo
Todo o cálculo roda no seu navegador; nada do que você informa é enviado a lugar nenhum.
Perguntas frequentes
Qual tamanho raiz devo usar para o rem?
Use o tamanho de fonte raiz real da sua página — 16px é o padrão do navegador e a escolha mais comum.
Posso usar uma razão personalizada?
A razão é escolhida em uma lista fixa de razões nomeadas conhecidas, de Minor Second a Golden Ratio, em vez de entrada livre.
Preciso usar todos os passos que a escala gera?
Não — a maioria dos designs usa apenas alguns dos tamanhos gerados (para texto do corpo, alguns níveis de título e legendas), não cada passo individual.