Calculadora de escala tipográfica
Monte uma hierarquia de títulos consistente.
Digite um tamanho de base e escolha uma proporção para gerar uma escala tipográfica modular completa, do H1 ao texto pequeno, com um trecho de CSS correspondente.
1.250
h1O veloz rapozo marrom39.06pxh2O veloz rapozo marrom31.25pxh3O veloz rapozo marrom25.00pxh4O veloz rapozo marrom20.00pxh5O veloz rapozo marrom16.00pxpO veloz rapozo marrom16.00pxsmallO veloz rapozo marrom12.80px:root {
--font-base: 16px;
--type-scale: 1.25;
}
h1 {
font-size: 39.06px;
}
h2 {
font-size: 31.25px;
}
h3 {
font-size: 25.00px;
}
h4 {
font-size: 20.00px;
}
h5 {
font-size: 16.00px;
}
p {
font-size: 16.00px;
}
small {
font-size: 12.80px;
}Como montar uma escala tipográfica
- Digite seu tamanho de base em pixels.
- Escolha uma proporção ou selecione Personalizado para definir a sua.
- Confira os tamanhos gerados para cada nível de título.
- Copie as variáveis e regras de CSS para a sua folha de estilos.
Perguntas frequentes
Qual proporção devo escolher?
1,125 e 1,2 geram escalas sutis; 1,333 e 1,618 criam mais contraste. Use entre 1,2 e 1,25 para a maioria dos sites.
Por que a pré-visualização do H1 é limitada?
Tamanhos muito grandes são limitados apenas na pré-visualização; a saída de CSS mantém o valor calculado exato.
Posso usar com unidades rem?
Sim. Divida os valores em pixels pelo seu tamanho de fonte raiz, ou troque px por rem no CSS gerado.