Design / Tipografia
Gerador de escala tipográfica (escala modular para CSS e Tailwind)
Gere uma escala tipográfica modular a partir de um tamanho de fonte base e de uma proporção, como 1.25 ou a proporção áurea. Visualize cada etapa com seu próprio texto e copie os tamanhos como propriedades personalizadas do CSS ou em uma configuração fontSize do Tailwind, em rem ou px.
Gerador de escala tipográfica (escala modular para CSS e Tailwind): Cada tamanho é o valor base multiplicado pela proporção uma vez para cada etapa: com 16 px e uma terça maior, 1.25, as etapas acima são 20, 25, 31.25, 39.06 e 48.83 px, e as etapas abaixo são 12.8 e 10.24 px. Os tamanhos são listados em px e rem e recebem nomes como os tamanhos de texto do Tailwind, de xs a 4xl. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.
- Categoria
- Ferramentas para desenvolvedores
- Execuções
- No seu navegador
- Custo
- Grátis · sem cadastro
- Disponibilidade
- Pronto para usar
Roda inteiramente no seu navegador
:root {
--step-5: 3.0518rem;
--step-4: 2.4414rem;
--step-3: 1.9531rem;
--step-2: 1.5625rem;
--step-1: 1.25rem;
--step-0: 1rem;
--step--1: 0.8rem;
--step--2: 0.64rem;
}Cada nível é o nível abaixo multiplicado pela proporção: com uma base de 16 px e uma proporção de 1.25, os tamanhos acima são 20, 25 e 31.25 px, e os abaixo são 12.8 e 10.24 px. Proporções menores, como 1.125, são adequadas para interfaces densas; proporções maiores, como 1.5, dão mais contraste aos títulos. Os valores em rem pressupõem o tamanho padrão da raiz do navegador, de 16 px.
De onde vêm os nomes das proporções
Os nomes vêm de intervalos musicais: uma quinta justa tem uma proporção de frequência de 3 : 2, então uma escala tipográfica baseada em 1,5 cresce na mesma proporção que notas separadas por uma quinta. A escala modular de Tim Brown popularizou a ideia na web.
A proporção áurea, 1,618, gera saltos muito grandes; ela é explicada na calculadora da proporção áurea.
Arredondamento
Os navegadores renderizam tamanhos fracionários em pixels, então 31,25 px está perfeito assim. Se um sistema de design precisar de pixels inteiros, arredonde cada etapa e mantenha os valores em rem com quatro casas decimais, como a ferramenta faz; converta outros valores com o conversor de px para rem.
Como usar
- Informe o tamanho base e escolha uma proporção.
- Defina quantas etapas avançar e recuar e visualize-as com seu texto.
- Copie as variáveis CSS ou a configuração do Tailwind.
Privacidade e limitações
Tudo é executado no seu navegador.
Ferramentas relacionadas
Perguntas frequentes
Qual proporção devo usar?
Interfaces com muito texto e telas pequenas combinam com proporções suaves, como 1.125 ou 1.2; páginas editoriais e landing pages podem usar de 1.333 a 1.618 para títulos mais marcantes.
Por que usar rem?
Os tamanhos em rem seguem a configuração de tamanho da fonte do navegador do leitor, fazendo o texto aumentar para quem precisa dele maior. A conversão pressupõe a raiz padrão de 16 px.
Posso deixar os tamanhos fluidos?
Sim: escolha o menor e o maior tamanho desejados para uma etapa e transforme-os em uma expressão clamp() com o gerador de clamp do CSS.
Ferramenta grátis · no seu navegador execuções · não precisa de conta