Ferramentas de cor

Gerador de CSS Clamp (Tipografia Fluida)

Type-scale que cresce com a viewport. Escolha tamanhos mínimo e máximo de fonte, larguras mínima e máxima de tela — receba uma regra clamp() pronta com slider de prévia ao vivo.

Unidade de saída

rem px

Fonte raiz (px)

Fonte mín. (px)

Fonte máx. (px)

Viewport mín. (px)

Viewport máx. (px)

Saída

Prévia da viewport: 800px → Fonte calculada: 18.0px

O rato roeu a roupa do rei de Roma

Escala em lote (tamanhos px separados por vírgula)

Escala em lote (custom properties CSS)

O que é tipografia fluida?

Tipografia fluida é uma técnica CSS em que o texto escala suavemente entre um tamanho mínimo e máximo conforme a largura da viewport muda — em vez de saltar em breakpoints de media queries. Navegadores modernos suportam isso nativamente via clamp(MIN, FÓRMULA, MAX), que avalia a fórmula e prende o resultado entre o piso e o teto. A fórmula é tipicamente uma mistura de offset fixo e termo relativo à viewport (vw), então o valor segue a largura da tela dentro do intervalo definido.

Como usar este gerador

Escolha o tamanho de fonte mínimo e máximo para as larguras menor e maior. Depois escolha a faixa de viewport — geralmente um mínimo de smartphone (320–375 px) e um máximo de desktop (1200–1440 px). A caixa de saída mostra a declaração clamp() exata para colar no seu CSS. Arraste o slider de prévia para ver o que a regra produz em qualquer largura sem redimensionar o navegador. Para uma escala completa (h1, h2, h3, body, small), cole valores em px separados por vírgula na caixa de batch e receba um conjunto de custom properties de uma vez.

A matemática por trás do clamp()

Dados (minVw, minFont) e (maxVw, maxFont) como dois pontos, a função linear que passa pelos dois é fonte = inclinação · vw + intercepto onde inclinação = (maxFont − minFont) / (maxVw − minVw) e intercepto = minFont − inclinação · minVw. Convertendo a inclinação para vw multiplica por 100, e o intercepto vira rem dividindo pelo seu tamanho de fonte raiz (assim o zoom de acessibilidade ainda funciona). O termo do meio do clamp() é então {intercepto}rem + {inclinação*100}vw.

Perguntas frequentes

Por que usar rem em vez de px na saída?

Navegadores escalam valores rem quando o usuário muda o tamanho de fonte padrão nas configurações do browser, mas não escalam px absolutos. Usar rem no piso, teto e intercepto do clamp() preserva preferências de acessibilidade e respeita o WCAG 1.4.4 Resize Text. O termo vw não precisa ser convertido — já é relativo à viewport.

Que faixa de viewport devo usar?

Uma escolha comum é 320 px (smartphone pequeno) a 1280 px (laptop típico). Se você suporta monitores ultra-wide, suba o limite superior para 1920 px para o texto não continuar crescendo além do design. Se seu dispositivo mínimo é tablet, suba o limite inferior para 600 px. Quanto mais estreita a faixa, mais íngreme a inclinação, então a fonte cresce mais rápido dentro dela.

clamp() funciona em todo lugar?

Sim — clamp(), min() e max() são suportados em todo navegador grande desde início de 2020 (Chrome 79, Safari 13.4, Firefox 75). Para navegadores pré-2020, faça fallback com uma declaração font-size regular fora da regra, que é sobrescrita em todo lugar moderno.

Posso usar clamp() para coisas além de font-size?

Sem dúvida. Padding, gap, margin, width, border-radius — qualquer coisa que aceita um valor de comprimento funciona igual. Espaçamento fluido é um dos usos de maior alavanca: uma seção hero com padding clamp(2rem, 5vw, 6rem) fica apropriada do celular ao ultra-wide sem uma única media query.

Como construo uma escala tipográfica completa?

Defina um tamanho base (16 px) e uma razão (1,25 terça menor; 1,333 quarta perfeita; 1,618 áurea) — multiplique repetidamente para gerar uma sequência (16 → 20 → 25 → 31 → 39 → 49 → 61). Cole esses valores na caixa de batch e a ferramenta emite um clamp() fluido por nível como custom property, pronto para ir no :root.

O que é o aviso de slope-intercept que algumas ferramentas mostram?

Alguns geradores avisam quando o coeficiente vw ultrapassa um limite tipo 5 vw, porque com essa inclinação um zoom pequeno ou tela larga faz o texto saltar inesperadamente. Esta ferramenta não impõe limite — mas se sua saída fica tipo clamp(1rem, 0,5rem + 8vw, 5rem), considere alargar a faixa de viewport para a inclinação cair abaixo de 4–5 vw.

Gerador de CSS Clamp (Tipografia Fluida)