Skip to main content
FreeToolkit .ai

Gerador de Escala Tipográfica Gere uma escala tipográfica modular com tamanho base, razão e unidades personalizáveis.

Gerador de Escala Tipográfica illustration
🎨

Gerador de Escala Tipográfica

Gere uma escala tipográfica modular com tamanho base, razão e unidades personalizáveis.

1

Definir tamanho base e proporção

Escolha o tamanho da fonte base e uma escala matemática de progressão.

2

Configurar saída

Selecione a unidade (px, rem, em), altura da linha e número de etapas de escala.

3

Copiar o CSS

Visualizar a escala de tipo e copiar as propriedades personalizadas do CSS.

Loading tool...

What Is Gerador de Escala Tipográfica?

O Gerador de Escala Tipográfica cria um conjunto harmônico de tamanhos de fonte com base em uma razão matemática, também conhecida como escala modular. A tipografia consistente é fundamental para um bom design, e as escalas modulares fornecem tamanhos de fonte que se relacionam naturalmente entre si por meio da proporção matemática. Essa ferramenta oferece oito razões de escala clássicas: Segunda Menor (1.067), Segunda Maior (1.125), Terça Menor (1.200), Terça Maior (1.250), Quarta Perfeita (1.333), Quarta Aumentada (1.414), Quinta Perfeita (1.500) e a Razão Áurea (1.618). A partir de um tamanho base, cada etapa é multiplicada pela razão escolhida. A saída inclui propriedades personalizadas CSS nomeadas (--font-size-xs até --font-size-5xl) na unidade preferida, juntamente com uma prévia visual que mostra cada tamanho com texto de exemplo.

Why Use Gerador de Escala Tipográfica?

  • Oito proporções de escala matemática clássicas da música e teoria do design
  • Saída em unidades px, rem ou em para diferentes necessidades de projeto
  • Tamanho base ajustável, altura da linha e número de etapas
  • Saída de propriedades personalizadas do CSS para fácil integração

Common Use Cases

Tipografia de Sistema de Design

Estabelecer uma escala de tipo consistente como base de um sistema de design.

Configuração de Novo Projeto

Gerar tamanhos de fonte harmônicos ao iniciar novos projetos web.

Estilização de Blog e Artigo

Criar uma hierarquia tipográfica legível para conteúdo de longa forma.

Tipografia Responsiva

Gerar valores de escala para usar em diferentes pontos de quebra responsivos.

Technical Guide

Uma escala tipográfica modular usa uma razão matemática para gerar uma série de valores proporcionais. A partir de um tamanho base (tipicamente 16px para web), cada etapa é calculada multiplicando pela razão. Para uma escala Terça Maior (1,25) com tamanho base de 16px: 12,8px, 16px, 20px, 25px, 31,25px, 39,06px. A razão determina o contraste entre os tamanhos - razões menores (1.067, 1.125) criam diferenças sutis ideais para texto do corpo, enquanto razões maiores (1,5, 1,618) criam diferenças dramáticas adequadas para tipografia de exibição. Razões populares vêm da teoria musical (Terça Menor, Quarta Perfeita, Quinta Perfeita) e matemática (Razão Áurea). Para implementação na web, defina os tamanhos como propriedades personalizadas CSS e use-as em todo o stylesheet. Unidades rem são preferidas para acessibilidade, pois respeitam as preferências de tamanho de fonte do usuário. A altura da linha deve diminuir à medida que o tamanho da fonte aumenta - 1,5 para texto do corpo e 1,1-1,2 para títulos grandes.

Tips & Best Practices

  • 1
    Use Terça Maior (1,25) ou Quarta Perfeita (1,333) para a maioria dos projetos web
  • 2
    Use unidades rem para tipografia acessível e respeitosa às preferências do usuário
  • 3
    Diminua a altura da linha para títulos maiores (1,1-1,2) e aumente para o corpo (1,5-1,7)
  • 4
    Mantenha 5-7 etapas de escala para uma hierarquia tipográfica gerenciável

Related Tools

Gerador de Escala de Espaçamento - free online tool

Gerador de Escala de Espaçamento

Gere um sistema de escala de espaçamento consistente com unidade base personalizável e multiplicadores.

🎨 CSS & Design
Visualizador de Fontes do Google - free online tool

Visualizador de Fontes do Google

Pré-visualize as fontes do Google com texto personalizável, tamanho, peso e espaçamento entre letras.

🎨 CSS & Design
Gerador de Variáveis CSS - free online tool

Gerador de Variáveis CSS

Gere propriedades personalizadas do CSS (variáveis) para cores, espaçamento e tipografia.

🎨 CSS & Design
Gerador de Layout de Rolar com Snaps em CSS - free online tool

Gerador de Layout de Rolar com Snaps em CSS

Gere layouts de rolagem com snaps em CSS para rolagem horizontal e vertical com alinhamento de snap.

🎨 CSS & Design

Frequently Asked Questions

Q O que é uma escala modular?
Uma escala modular é uma série de números que se relacionam entre si por meio de uma proporção matemática consistente, criando harmonia visual.
Q Qual proporção devo escolher?
Terça Maior (1,25) é versátil para a maioria dos projetos. Use proporções menores para hierarquias sutis e maiores para contrastes dramáticos.
Q Devo usar px ou rem?
rem é recomendado pois respeita as preferências de tamanho de fonte do usuário, melhorando a acessibilidade.
Q Quantas etapas de escala eu preciso?
5-7 etapas cobrem a maioria das necessidades: xs, sm, base, lg, xl, 2xl, 3xl.
Q Posso usar escalas diferentes para mobile e desktop?
Sim, use consultas de mídia para alternar entre uma proporção menor no mobile e uma maior no desktop.

About This Tool

Gerador de Escala Tipográfica is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.