Gerador de escala tipográfica

O que é Gerador de escala tipográfica?

O Gerador de Escala Tipográfica transforma um tamanho base e uma proporção modular em uma escala tipográfica completa e matematicamente consistente, com quantos passos maiores de título e passos menores de legenda você precisar. Além dos tamanhos de fonte, ele deriva uma entrelinha e um espaçamento correspondentes para cada passo, mais uma expressão fluida clamp() opcional que interpola entre um viewport mobile e um desktop usando uma proporção mobile separada. Designers e desenvolvedores front-end o usam para montar tokens tipográficos de um design system, manter tamanhos consistentes e colar CSS, Sass, Tailwind ou JSON prontos. Digite qualquer proporção personalizada ou escolha uma clássica, defina o tamanho base e a unidade (px ou rem), pré-visualize na sua própria font-family e copie o formato que precisar.

Como usar Gerador de escala tipográfica

1. Digite qualquer proporção personalizada no campo de proporção, ou escolha uma clássica como quarta justa (1.333) no menu de presets nas configurações.
2. Defina o tamanho base; ele se torna o tamanho do corpo de texto e a âncora da escala.
3. Nas configurações, escolha quantos passos maiores e menores gerar; os passos menores ficam abaixo da base para legendas e letras miúdas.
4. Ajuste a entrelinha base e a compacta e o espaçamento em tamanhos grandes, e informe uma font-family para pré-visualizar a escala na sua própria tipografia.
5. Para tipografia responsiva, defina as larguras de viewport mínima e máxima e uma proporção mobile para montar uma escala fluida clamp().
6. Alterne o formato de saída entre variáveis CSS, clamp() fluido, Sass, config do Tailwind e JSON, e copie o código ou o tamanho de um passo específico.

Exemplos

proporção 1.333, base 16px, 5 acima / 1 abaixo

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

base 16px, proporção 1.333, proporção mobile 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

qualquer escala, export Tailwind

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

Perguntas frequentes

Posso usar uma proporção personalizada, não só os presets?

Sim. Digite qualquer número no campo de proporção, como 1.2, 1.5, 1.618 ou um valor fora do padrão como 1.45. O menu de presets nas configurações é só um atalho que preenche o mesmo campo, e escolher um valor que não corresponde a um preset simplesmente mostra Personalizada.

Como funcionam os passos menores (negativos)?

A escala é ancorada no tamanho base (passo 0). Passos maiores multiplicam a base pela proporção, enquanto os menores dividem por ela, produzindo tamanhos de legenda e letra miúda abaixo da base como sm e xs. Defina quantos passos maiores e menores quer nas configurações.

Como a entrelinha e o espaçamento são calculados?

A entrelinha vai do seu valor base no tamanho do corpo para um valor mais compacto conforme o texto cresce, e o espaçamento vai de zero na base para o seu valor de tamanhos grandes, de modo que textos grandes de exibição ficam um pouco mais apertados e os pequenos um pouco mais soltos. Ambas as curvas são ajustáveis nas configurações.

O que é a escala fluida clamp()?

Ela cria um font-size: clamp() para cada passo que cresce suavemente entre uma largura de viewport mínima e máxima, usando sua proporção principal na largura máxima e uma proporção mobile separada na mínima. Escolha o formato de saída CSS clamp() para exportá-la.

Algum dos meus dados é enviado a um servidor?

Não. Toda a escala, incluindo tamanhos, entrelinha, espaçamento e os valores fluidos clamp(), é calculada localmente no seu navegador com aritmética simples. Nada é enviado, então a ferramenta funciona offline e mantém suas configurações privadas.