devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoria do site

Gerador de Escala Tipográfica — Tamanhos de Fonte Modulares e Fluidos

Escolha um tamanho base da fonte e uma razão — Terça Menor, Terça Maior, Quarta Justa, Proporção Áurea — e receba um conjunto harmônico de tamanhos para títulos e texto corrido. Ative a tipografia fluida para que cada passo cresça suavemente entre uma escala de celular e uma de desktop com clamp(), visualize em qualquer largura de tela e copie as variáveis CSS, uma configuração do Tailwind ou SCSS.

Atualizado em

Prévia


  


    
 Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

    
    
    

      
Como usar: Gerador de Escala Tipográfica
  1. Defina o tamanho base (geralmente 16 px, o seu texto corrido) e uma razão — razões maiores criam mais contraste entre os títulos.
  2. Escolha quantos passos devem ficar abaixo (textos pequenos, legendas) e acima (de h4 até h1, títulos de destaque).
  3. Ative o Fluido para usar uma base e razão menores em celulares, que crescem até a escala de desktop; arraste o controle de largura de tela para visualizar.
  4. Copie as variáveis CSS, a configuração fontSize do Tailwind ou um mapa SCSS.


O que é uma escala modular


Uma escala tipográfica multiplica o tamanho base pela mesma razão a cada passo: com 16 px e 1,25, os passos são 16, 20, 25, 31,25, 39 px… Tamanhos que compartilham uma mesma razão parecem relacionados, e por isso os tipógrafos tomaram emprestadas as razões da música — a Terça Maior (1,25), a Quarta Justa (1,333) e a Quinta Justa (1,5) — além da Proporção Áurea (1,618).


  • Razões pequenas (1,125–1,2) funcionam bem em interfaces densas, painéis e leituras longas.
  • Razões grandes (1,333–1,618) funcionam bem em páginas de marketing com títulos grandes e marcantes.


Tipografia fluida com clamp()


Um título que fica perfeito no desktop costuma ficar grande demais em um celular. Os passos fluidos fazem uma interpolação entre uma escala mobile e uma escala desktop: font-size: clamp(1.5rem, 1.28rem + 0.98vw, 2.44rem) mantém o valor mínimo em telas pequenas, cresce de forma linear conforme a janela e para no máximo. Os valores estão em rem, então continuam respeitando a configuração de tamanho de fonte do navegador do visitante. Para valores isolados, veja a Calculadora de Clamp; para converter unidades, use PX para REM.
Também pesquisado como: escala tipográfica, gerador de escala modular, gerador de tipografia fluida, escala de tamanho de fonte, gerador clamp font size, escala de tamanho de fonte tailwind, calculadora de escala tipográfica.
Ferramentas que combinam com: Gerador de Escala Tipográfica
  • Gerador de CSS Grid — Defina as colunas, linhas e o espaçamento (gap), depois arraste sobre as células para criar áreas como header, sidebar e main.
  • Gerador de Flexbox CSS — Veja exatamente o que cada propriedade flexbox faz: defina a direção, a quebra de linha, o justify-content, o align-items e o gap, adicione ou remova itens e clique em qualquer um deles para ajustar o flex-grow, shrink, basis, order e align-self.
  • Gerador de cores do Tailwind — Cole uma cor da marca e obtenha uma escala de tons equilibrada de 11 etapas (50 a 950) integrada ao OKLCH — com dicas de contraste e exportações para Tailwind v3, v4, CSS e SCSS.
  • Verificador de Contraste — Informe uma cor de texto e uma cor de fundo para obter a razão de contraste WCAG exata, o resultado de aprovado ou reprovado em cada nível, uma pontuação APCA e correções com um clique que mantêm o seu tom.
Perguntas frequentes
Qual razão de escala tipográfica devo usar?
Comece com 1,25 (Terça Maior) para a maioria dos sites. Use 1,2 ou menos para aplicativos e páginas com muito texto, e 1,333 ou mais para landing pages com títulos grandes.
O que é tipografia fluida?
Tamanhos de fonte que crescem suavemente conforme a largura da tela, em vez de pularem nos breakpoints. Cada passo usa clamp() com um mínimo para celulares e um máximo para telas grandes.
Como usar a escala no Tailwind?
Escolha a saída Tailwind e cole o objeto fontSize em theme.extend no tailwind.config.js. Depois, use classes como text-lg ou text-3xl normalmente.
Por que rem em vez de px?
O rem segue a configuração de tamanho de fonte do navegador do visitante, então o texto escala para quem precisa de letras maiores. Por padrão, 1rem equivale a 16 px.
Posso instalar o Gerador de Escala Tipográfica como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Escala Tipográfica é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

      
    

    
    
Ferramentas relacionadas
localCalculadora de braçadeirasDigite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de…localConversor PX para REMConverta entre pixels, rem e em usando o tamanho de fonte raiz do seu projeto — ou cole uma folha de…localGerador de CSS GridDefina as colunas, linhas e o espaçamento (gap), depois arraste sobre as células para criar áreas como…localGerador de Flexbox CSSVeja exatamente o que cada propriedade flexbox faz: defina a direção, a quebra de linha, o…localGerador de cores do TailwindCole uma cor da marca e obtenha uma escala de tons equilibrada de 11 etapas (50 a 950) integrada ao OKLCH…localVerificador de ContrasteInforme uma cor de texto e uma cor de fundo para obter a razão de contraste WCAG exata, o resultado de…