Gerador de escala tipográfica
Pré-visualização da escala
Código
:root {
--text-xs: 0.5628rem; /* 9px */
--text-sm: 0.7502rem; /* 12px */
--text-base: 1rem; /* 16px */
--text-lg: 1.333rem; /* 21.33px */
--text-xl: 1.7769rem; /* 28.43px */
--text-2xl: 2.3686rem; /* 37.9px */
--text-3xl: 3.1573rem; /* 50.52px */
--text-4xl: 4.2087rem; /* 67.34px */
--text-5xl: 5.6102rem; /* 89.76px */
--text-6xl: 7.4784rem; /* 119.66px */
}Perguntas frequentes
Tudo sobre tipografia e escalas modulares
O que é uma escala tipográfica?
Uma escala tipográfica é um conjunto de tamanhos de texto ligados entre si por uma proporção fixa. Usar uma escala consistente dá harmonia visual ao design, porque cada tamanho está matematicamente relacionado com os outros.
Que proporção devo escolher?
Para interfaces digitais, a Quarta Perfeita (1,333) e a Terça Maior (1,250) são as escolhas mais comuns: dão contraste visível sem exagero. A Proporção Áurea (1,618) cria contrastes muito marcados, boa para títulos e landing pages. A Segunda Menor (1,125) é discreta, para interfaces muito densas.
Como uso o CSS gerado?
Copie as variáveis CSS para o seu ficheiro de estilos global (por exemplo `app.css`) e use-as com `font-size: var(--text-lg)`. No Tailwind, cole a configuração no bloco `fontSize` do seu `tailwind.config.js`.
Que razão devo escolher?
Para interfaces, 1,25 e 1,333 funcionam bem e dão contraste sem exagerar. A razão de ouro, 1,618, cria saltos muito marcados, adequados a títulos e a páginas de apresentação.
Como uso a escala num projeto?
As variáveis CSS entram na folha de estilo global e são chamadas nas regras com var. No Tailwind, cola-se o bloco com os tamanhos na configuração do projeto.