Gerador de Escala Tipográfica
O gerador de escala tipográfica calcula uma escala modular a partir de um tamanho de fonte base e uma razão, de Minor Second (1.067) até a proporção áurea (1.618), e gera nove tamanhos como propriedades personalizadas de CSS.
Sobre esta ferramenta
O gerador de escala tipográfica calcula uma escala modular a partir de um tamanho de fonte base e uma razão, de Minor Second (1.067) até a proporção áurea (1.618), e gera nove tamanhos como propriedades personalizadas de CSS.
Como usar
- Digite um tamanho de fonte base em pixels (16 px é o padrão do navegador).
- Escolha uma razão de escala, como Major Third (1.25).
- Selecione a unidade de saída: rem, px ou em.
- Clique em Copiar variáveis CSS para usar os tamanhos de --xs a --4xl.
Bom saber
- Cada etapa de uma escala modular multiplica o tamanho anterior pela mesma razão.
- O gerador produz nove etapas: duas abaixo da base, a base e seis acima dela.
- Razões menores (1.067–1.2) funcionam bem em interfaces densas; razões maiores (1.333–1.618), em páginas editoriais com títulos grandes.
- Os valores em rem são calculados em relação a um tamanho de fonte raiz de 16 px.
- Usar rem permite que o texto acompanhe a configuração de tamanho de fonte do navegador do usuário.
Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.
Perguntas frequentes
O que é uma escala tipográfica modular?
É um conjunto de tamanhos de fonte em que cada tamanho é o anterior multiplicado por uma razão fixa, o que mantém títulos e texto visualmente relacionados.
Qual razão de escala tipográfica devo usar?
Major Third (1.25) e Perfect Fourth (1.333) são opções versáteis e populares. Use uma razão menor para apps e dashboards e uma maior para landing pages e blogs.
Os tamanhos de fonte devem ser em rem ou px?
Em geral, recomenda-se rem, porque respeita o tamanho de fonte preferido do usuário no navegador, o que melhora a acessibilidade.
Qual tamanho de fonte base devo usar?
16 px é o padrão dos navegadores e uma boa base para o texto; muitos sites usam 16–18 px para uma leitura confortável.