Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Escala Modular de Fontes

DesenvolvedorMatemáticaTexto

ANUNCIADO Remover?

ENTRADA

Processo Automático

Base

Tamanho base (px)

O tamanho de referência de 1rem. A maioria dos navegadores define o padrão em 16px.

Relação

Cada etapa na escala é a etapa anterior multiplicada por essa proporção.

Proporção personalizada

Qualquer valor entre 1.01 e 3.

Saída

Unidade

Decimais

Casas decimais nos valores renderizados.

Formatar

Texto de pré-visualização

Amostra

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

O Gerador de Escala Tipográfica de Fontes cria uma escala tipográfica completa a partir de um tamanho base e de uma proporção matemática escolhida. Cada etapa na escala é a etapa anterior multiplicada por essa proporção.

Gerador de Escala Modular de Fontes

O Gerador de Escala Tipográfica com Base em Fontes cria uma escala tipográfica completa a partir de um tamanho base e de uma proporção matemática escolhida. Cada etapa na escala é a etapa anterior multiplicada pela proporção, mantendo as proporções entre tamanhos consistentes em todos os dispositivos.

Como usar

Defina o Tamanho base em pixels (comumente 16px, o que equivale a 1rem).
Escolha um Relação no menu suspenso, ou escolha Personalizado e digite um valor próprio.
Escolha a saída Unidade (rem, em ou px) e o número de Decimais.
Escolha um Formato de Exportação — Variáveis CSS, variáveis SCSS, configuração do Tailwind ou JSON.
Edite o Amostra texto para visualizar sua cópia personalizada em cada etapa da escala.
Copie ou baixe o código gerado e insira diretamente no seu projeto.

Características

Nove proporções clássicas – Do Segundo Menor até a Oitava, incluindo a Relação Dourada (1.618).
Entrada de proporção personalizada – Insira qualquer valor entre 1.01 e 3 para uma escala personalizada.
Prévia visual em tempo real – Veja o texto de exemplo renderizado em cada etapa, desde xs até 6xl.
Quatro formatos de exportação – Variáveis CSS, variáveis SCSS, configuração do Tailwind ou JSON. fontSize rem, em ou px
– Escolha a unidade que corresponda ao seu sistema de design. – Arredonde os valores gerados para 0 a 5 casas decimais.
Precisão ajustável Cálculo no lado do cliente
– Tudo é executado no navegador, portanto, nada é enviado para um servidor. O que é uma escala tipográfica modular?

 Perguntas frequentes

Uma escala tipográfica modular é uma sequência de tamanhos de fonte construída a partir de um tamanho base e de um multiplicador fixo. Cada etapa é a etapa anterior multiplicada por essa proporção, mantendo a relação proporcional entre os tamanhos consistente ao longo da totalidade do design.

Por que usar proporções matemáticas em vez de tamanhos arbitrários?
Proporções retiradas da teoria musical e da proporção clássica — Quarto Perfeito, Quinto Perfeito, a Relação Dourada — criam relações que o olho percebe como harmônicas. Tamanhos arbitrários tendem a parecer desiguais e exigem mais decisões visuais em cada tela.

Qual proporção devo escolher para conteúdo com grande quantidade de texto?
Proporções menores, como o Terceiro Menor (1.2) e o Terceiro Maior (1.25), mantêm os tamanhos dos títulos próximos ao do corpo do texto, o que funciona bem para documentações, blogs e interfaces com grande quantidade de conteúdo, onde o leitor passa a maior parte do tempo dentro de parágrafos.

Qual proporção devo escolher para layouts de marketing e editoriais?
Proporções maiores, como o Quinto Perfeito (1.5) e a Relação Dourada (1.618), produzem saltos dramáticos entre o corpo do texto e o texto de exibição. Funcionam bem em páginas de landing, revistas e seções de destaque, onde a tipografia é o ponto central.

Qual a diferença entre as unidades rem, em e px?
px é um tamanho absoluto em pixels. rem é relativo ao tamanho da fonte raiz, portanto, escala quando os usuários alteram as configurações padrão do navegador. em é relativo ao tamanho da fonte do elemento pai mais próximo, o que faz com que elementos aninhados se acumulem. A maioria dos sistemas de design prefere rem para escalas globais de tipografia, pois respeita as configurações de acessibilidade dos usuários.

O rápido coelho marrom salta sobre o cão preguiçoso