Escala tipográfica (sistema de tamanhos de fonte)
Monte um sistema de tamanhos para títulos e texto a partir de um tamanho base e uma proporção, com altura de linha, pré-visualização e variáveis CSS para copiar
Carregando a ferramenta…
Gera os tamanhos de fonte de títulos, texto e legendas a partir de um tamanho base e uma proporção, para que os tamanhos da página tenham relação entre si. Útil ao começar um site, uma tela de app ou um modelo de documento.
Como usar
- Digite o "Tamanho base" do texto em px e escolha uma "Proporção"; "Personalizada" aceita qualquer valor de 1,05 a 2.
- Em "Arredondamento", mantenha decimais, arredonde para px inteiros ou ajuste os tamanhos à "Grade de 4 px".
- Defina a "Altura da linha": "Mais justa nos títulos" reduz o multiplicador nos tamanhos grandes; "Igual em tudo" usa um único valor.
- Digite seu próprio "Texto de exemplo" e troque a "Fonte da pré-visualização" para ver cada passo no tamanho real.
- Pressione "Copiar variáveis CSS", "Copiar CSS dos elementos" ou "Copiar JSON".
Como funciona
- Tamanho do passo n = base × proporção elevada a n. Os passos vão de −2 (xs) a +6 (5xl); o passo 0 é o texto (p) e os passos 1 a 6 correspondem de h6 a h1.
- rem é o valor em px dividido pelo tamanho base; pt = px × 0,75 (96 px por polegada).
- Com "Mais justa nos títulos" o multiplicador cai em linha reta da "Altura da linha do texto" no tamanho base até a "Altura da linha dos títulos" em três vezes o tamanho base. "Grade de 4 px" também arredonda a caixa de linha para um múltiplo de 4 px.
- As configurações ficam guardadas neste navegador para a próxima visita.
Perguntas frequentes
- Qual proporção devo usar em um site?
- 1,2 e 1,25 dão títulos moderados, bons para artigos longos; 1,333 ou mais dão títulos grandes, estilo cartaz. Em telas pequenas, uma proporção menor costuma ficar melhor.
- Qual deve ser o tamanho do texto corrido?
- 16 px é o padrão do navegador e um ponto de partida comum; para leitura longa usam-se 17 a 18 px. O resto da escala acompanha o tamanho base digitado.
- Como converto os tamanhos para rem?
- A tabela mostra rem ao lado de px. Definindo html com o tamanho base em px, como faz o CSS dos elementos copiado, 1rem passa a valer o tamanho base.
- Qual altura de linha os títulos devem ter?
- O texto costuma ficar em torno de 1,5 e os títulos grandes entre 1,1 e 1,25, para que linhas de título quebradas não deixem espaços grandes. O modo automático aplica essa mudança.