Escala Tipográfica
Gera uma escala tipográfica harmônica baseada em razão (1.125, 1.25, 1.333, 1.5, 1.618). Saída em rem, px e CSS clamp.
| Passo | rem | px | Uso típico |
|---|
Como funciona uma escala tipográfica?
Numa escala tipográfica harmônica, o tamanho base é multiplicado por uma razão constante a cada passo. Daí surgem proporções visuais agradáveis e que se mantêm coerentes entre títulos, subtítulos e corpo de texto.
Entre as razões, a golden (1.618) é a que mais salta aos olhos; a major third (1.25) tem um ar mais equilibrado e se sai bem em interfaces. O resultado vai direto para o CSS por custom properties ou pode ser copiado para um design system.
O cálculo todo acontece no seu navegador.
Gere uma escala tipográfica harmônica
Num design bem feito, os tamanhos de fonte não saem do nada. Eles seguem uma escala apoiada numa razão matemática, e é dela que vem a hierarquia visual harmônica. A ferramenta monta essa escala a partir da razão que você escolher.
Você seleciona uma proporção clássica, entre 1.125 (segunda maior), 1.25 (terça maior), 1.333 (quarta), 1.5 (quinta) e 1.618 (a razão áurea), e o cálculo devolve a sequência de tamanhos com a saída em rem, pronta para jogar no CSS. É como dar ritmo e consistência à tipografia de um site sem ficar chutando valores.
A conta roda no navegador, na hora. Uma mão na roda para quem desenha ou desenvolve e quer uma hierarquia tipográfica proporcional e bem resolvida.
Ferramentas Relacionadas
Gerador de Glassmorphism CSS
Crie efeitos de vidro fosco (glassmorphism) com backdrop-filter, transparência e bordas. Ajuste blur, saturação e opacidade. Veja o preview em tempo real e copie o CSS. Tudo no navegador.
Gerador de Gradiente CSS
Crie gradientes lineares e radiais para CSS com prévia em tempo real. Ajuste cores, posições e ângulo. Copie o código CSS com um clique.
Gerador de Mesh Gradient
Crie mesh gradients modernos combinando vários radial-gradients. Adicione, remova e arraste pontos para compor fundos vibrantes ao estilo Stripe e Linear. Tudo no navegador.