Gerador de Escala Tipográfica – Tamanhos de fonte fluidos com clamp()

Gere uma escala modular de tamanhos de fonte, estática ou fluida com clamp(), com entrelinha por passo e exportação para CSS ou @theme do Tailwind v4.

Processado no navegador – nenhum dado enviado ao servidor

Tipografia fluida (cresce com a largura da tela usando clamp)

Tela pequena

Viewport (px)

Base (px)

Razão

Tela grande

Viewport (px)

Base (px)

Razão

Passos abaixo

Passos acima

Texto da prévia

Prévia num viewport de 800px

--step-5text-4xl39.81px → 57.98pxline-height 1.1
Tipografia boa é invisível
--step-4text-3xl33.18px → 46.39pxline-height 1.2
Tipografia boa é invisível
--step-3text-2xl27.65px → 37.11pxline-height 1.29
Tipografia boa é invisível
--step-2text-xl23.04px → 29.69pxline-height 1.36
Tipografia boa é invisível
--step-1text-lg19.2px → 23.75pxline-height 1.42
Tipografia boa é invisível
--step-0text-base16px → 19pxline-height 1.47
Tipografia boa é invisível
--step--1text-sm13.33px → 15.2pxline-height 1.51
Tipografia boa é invisível
--step--2text-xs11.11px → 12.16pxline-height 1.54
Tipografia boa é invisível

:root {
  --step--2: clamp(0.6944rem, 0.6676rem + 0.1192vw, 0.76rem);
  --step--2-lh: 1.54;
  --step--1: clamp(0.8333rem, 0.7856rem + 0.2121vw, 0.95rem);
  --step--1-lh: 1.51;
  --step-0: clamp(1rem, 0.9233rem + 0.3409vw, 1.1875rem);
  --step-0-lh: 1.47;
  --step-1: clamp(1.2rem, 1.0837rem + 0.517vw, 1.4844rem);
  --step-1-lh: 1.42;
  --step-2: clamp(1.44rem, 1.27rem + 0.7554vw, 1.8555rem);
  --step-2-lh: 1.36;
  --step-3: clamp(1.728rem, 1.4861rem + 1.0752vw, 2.3193rem);
  --step-3-lh: 1.29;
  --step-4: clamp(2.0736rem, 1.7359rem + 1.501vw, 2.8992rem);
  --step-4-lh: 1.2;
  --step-5: clamp(2.4883rem, 2.0237rem + 2.0648vw, 3.624rem);
  --step-5-lh: 1.1;
}

Os valores em rem assumem a raiz padrão de 16px. No clamp(), a parte em rem mantém o texto respondendo ao zoom de fonte do usuário — só vw ignoraria essa preferência.

Como usar esta ferramenta

Escolha entre escala estática ou fluida (que cresce com a largura da tela)
Defina a base em px e a razão — terça maior (1.25) é um bom começo para sites
Na fluida, informe o viewport, a base e a razão da tela pequena e da tela grande
Arraste o controle de viewport para ver a prévia e copie as variáveis CSS ou o @theme

Sobre esta ferramenta

O que é

Uma escala modular é uma sequência de tamanhos em que cada um é o anterior multiplicado pela mesma razão: com base 16 e razão 1.25, os passos são 16, 20, 25, 31,25… A proporção constante dá coerência entre corpo e títulos. Na versão fluida, o título pode ter 28px no celular e 40px no desktop, passando suavemente por todos os valores intermediários sem media queries.

Quando usar

Definir os tamanhos de fonte de um design system do zero
Substituir vários breakpoints de font-size por um clamp() por nível
Gerar o @theme de tipografia de um projeto Tailwind v4
Testar razões diferentes antes de fechar a hierarquia de títulos

Segurança

Processamento 100% no navegador. Nenhum dado é enviado ao servidor — seus dados sensíveis permanecem no seu dispositivo.

Perguntas frequentes

Como o clamp() fluido é calculado?: É a reta que passa pelos dois pontos (viewport mínimo, tamanho mínimo) e (viewport máximo, tamanho máximo). A inclinação é a diferença de tamanho dividida pela diferença de viewport; multiplicada por 100 vira o valor em vw. O ponto onde a reta cruza o viewport zero vai em rem. Nos viewports extremos o resultado bate exatamente com os tamanhos informados, e fora deles o clamp trava.
Por que usar razões diferentes no celular e no desktop?: Em tela pequena não cabe um salto grande entre corpo e título: com razão 1.25, o passo 5 de uma base de 16px já tem 49px. Uma razão menor no celular (1.2) e maior no desktop (1.25 ou 1.333) mantém o contraste de hierarquia onde há espaço e evita títulos quebrando em várias linhas no telefone.
Por que o clamp tem rem além de vw?: Um tamanho só em vw ignora o zoom de fonte do navegador: quem configurou a fonte padrão maior continua vendo o mesmo tamanho, o que falha no critério 1.4.4 da WCAG. A parte em rem cresce com essa preferência. Os valores assumem a raiz de 16px.
Como a entrelinha recomendada é escolhida?: Ela cai conforme a fonte cresce: 1,5 no corpo de 16px e até 1,1 nos títulos grandes. Em texto corrido a entrelinha folgada ajuda o olho a achar a próxima linha; em título, a distância absoluta entre linhas já é grande e 1,5 deixa as linhas parecendo soltas.

Ferramentas relacionadas

:root { --step--2: clamp(0.6944rem, 0.6676rem + 0.1192vw, 0.76rem); --step--2-lh: 1.54; --step--1: clamp(0.8333rem, 0.7856rem + 0.2121vw, 0.95rem); --step--1-lh: 1.51; --step-0: clamp(1rem, 0.9233rem + 0.3409vw, 1.1875rem); --step-0-lh: 1.47; --step-1: clamp(1.2rem, 1.0837rem + 0.517vw, 1.4844rem); --step-1-lh: 1.42; --step-2: clamp(1.44rem, 1.27rem + 0.7554vw, 1.8555rem); --step-2-lh: 1.36; --step-3: clamp(1.728rem, 1.4861rem + 1.0752vw, 2.3193rem); --step-3-lh: 1.29; --step-4: clamp(2.0736rem, 1.7359rem + 1.501vw, 2.8992rem); --step-4-lh: 1.2; --step-5: clamp(2.4883rem, 2.0237rem + 2.0648vw, 3.624rem); --step-5-lh: 1.1; }

Como usar esta ferramenta

Escolha entre escala estática ou fluida (que cresce com a largura da tela)

Defina a base em px e a razão — terça maior (1.25) é um bom começo para sites

Na fluida, informe o viewport, a base e a razão da tela pequena e da tela grande

Arraste o controle de viewport para ver a prévia e copie as variáveis CSS ou o @theme

Sobre esta ferramenta

O que é

Quando usar

Definir os tamanhos de fonte de um design system do zero
Substituir vários breakpoints de font-size por um clamp() por nível
Gerar o @theme de tipografia de um projeto Tailwind v4
Testar razões diferentes antes de fechar a hierarquia de títulos

Segurança

Processamento 100% no navegador. Nenhum dado é enviado ao servidor — seus dados sensíveis permanecem no seu dispositivo.

Perguntas frequentes

Como o clamp() fluido é calculado?

É a reta que passa pelos dois pontos (viewport mínimo, tamanho mínimo) e (viewport máximo, tamanho máximo). A inclinação é a diferença de tamanho dividida pela diferença de viewport; multiplicada por 100 vira o valor em vw. O ponto onde a reta cruza o viewport zero vai em rem. Nos viewports extremos o resultado bate exatamente com os tamanhos informados, e fora deles o clamp trava.

Por que usar razões diferentes no celular e no desktop?

Em tela pequena não cabe um salto grande entre corpo e título: com razão 1.25, o passo 5 de uma base de 16px já tem 49px. Uma razão menor no celular (1.2) e maior no desktop (1.25 ou 1.333) mantém o contraste de hierarquia onde há espaço e evita títulos quebrando em várias linhas no telefone.

Por que o clamp tem rem além de vw?

Um tamanho só em vw ignora o zoom de fonte do navegador: quem configurou a fonte padrão maior continua vendo o mesmo tamanho, o que falha no critério 1.4.4 da WCAG. A parte em rem cresce com essa preferência. Os valores assumem a raiz de 16px.

Como a entrelinha recomendada é escolhida?

Ela cai conforme a fonte cresce: 1,5 no corpo de 16px e até 1,1 nos títulos grandes. Em texto corrido a entrelinha folgada ajuda o olho a achar a próxima linha; em título, a distância absoluta entre linhas já é grande e 1,5 deixa as linhas parecendo soltas.