Gerador de Escala Modular de Fontes
Gere uma escala modular tipográfica harmoniosa a partir de um tamanho de fonte base e uma proporção (major third, proporção áurea, perfect fifth ou um valor personalizado). Obtenha uma tabela completa de passos e código pronto para colar: propriedades personalizadas CSS, variáveis SCSS, configuração fontSize do Tailwind ou JSON.
Entrada
Base
O tamanho de referência para 1rem. A maioria dos navegadores usa 16px por padrão.
Cada passo é o passo anterior multiplicado por esta proporção.
Saída
Número de casas decimais nos valores exibidos.
Saída
| Passo | Tamanho | Pixels |
|---|---|---|
| No data yet | ||
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/font-modular-scale-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseSize": "16",
"ratio": "1.25",
"customRatio": "1.25",
"unit": "rem",
"decimals": "3",
"exportFormat": "css"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `font-modular-scale-generator` tool (Font Modular Scale Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/font-modular-scale-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Escala Modular de Fontes — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
Uma escala modular é uma sequência de tamanhos de fonte em que cada passo é o anterior multiplicado por uma proporção fixa. Em vez de escolher tamanhos de texto à mão e torcer para que fiquem equilibrados, você escolhe um tamanho base e uma proporção de estilo musical, e cada título, subtítulo e legenda se encaixa em um ritmo proporcional e harmonioso. Este gerador cria essa escala para você e entrega código pronto para copiar e colar em CSS, SCSS, Tailwind ou JSON.
Como usar
- Defina seu tamanho base em pixels — a referência para
1rem, normalmente 16px. - Escolha uma proporção. As predefinições são intervalos tipográficos clássicos: Segunda menor (1.067) para uma interface densa e compacta, até a Proporção áurea (1.618) e a Oitava (2.0) para um contraste dramático e editorial. Escolha Personalizado para ajustar qualquer valor entre 1,01 e 3.
- Escolha a unidade de saída (
rem,emoupx) e quantas casas decimais arredondar. - Escolha um formato de exportação. A tabela de escala é atualizada ao vivo, e a caixa de código oferece um bloco pronto para colar no seu stylesheet ou na sua configuração.
Os passos recebem os nomes da convenção Tailwind já conhecida — xs, sm, base, lg, xl, 2xl … até 6xl — onde base é o tamanho escolhido e cada passo acima ou abaixo multiplica (ou divide) pela proporção.
Qual proporção devo usar?
Proporções menores (1.067–1.2) mantêm os tamanhos próximos entre si, o que combina com painéis densos em dados e páginas com muito texto. Proporções maiores (1.333–1.618) criam uma hierarquia forte e evidente, que funciona bem em sites de marketing e textos longos. Na dúvida, a Terça maior (1.25) é um padrão confiável e versátil.
Devo usar rem, em ou px?
rem é a escolha mais segura para acessibilidade: os tamanhos se ajustam à preferência de tamanho de fonte raiz do usuário. em é calculado em relação ao elemento pai, o que é útil para componentes autocontidos. px é fixo e previsível, mas ignora as preferências de zoom do usuário, então reserve-o para casos em que você realmente precisa de um tamanho exato.
Por que a base fica sempre em 1rem/1em?
Porque as unidades relativas são expressas como múltiplo da base. No passo base o valor é exatamente 1rem (ou 1em); a coluna de pixels mostra o tamanho concreto resultante. Troque a unidade para px para ver cada passo como um valor absoluto em pixels.
Posso usar isto em um projeto Tailwind?
Pode. Escolha o formato Configuração Tailwind (fontSize) e cole o bloco fontSize gerado dentro de theme.extend no seu tailwind.config.js. As chaves correspondem aos nomes de tamanho padrão do Tailwind, então seus utilitários existentes text-lg, text-2xl e similares passam a usar a nova escala.
Privacidade
Tudo roda inteiramente no seu navegador. Seu tamanho base, sua proporção e o código gerado nunca saem do seu dispositivo e nunca são enviados a um servidor.