Gerador de escala tipográfica com clamp() fluido

Uma escala modular é um conjunto de tamanhos de fonte em que cada tamanho é o anterior multiplicado pela mesma proporção. Em vez de escolher 14, 18, 22 e 31 no olho, você define uma base e uma proporção, e todo título, legenda e rótulo ganha um tamanho relacionado aos demais. A ideia vem da música, onde os intervalos entre notas são proporções de frequência, e foi popularizada na web por Tim Brown no artigo “More Meaningful Typography” (A List Apart, 2011).

Passos negativos dão legendas e letras miúdas; positivos, títulos. Proporções comuns e onde se encaixam:

• 1,067 segunda menor, 1,125 segunda maior — muito contidas; dashboards, apps com muitos dados, telas pequenas.
• 1,2 terça menor, 1,25 terça maior — a escolha mais comum para interfaces de produto e documentação.
• 1,333 quarta justa, 1,414 quarta aumentada — hierarquia clara para páginas de marketing e blogs.
• 1,5 quinta justa, 1,6 sexta menor, 1,618 proporção áurea — bem expressivas; use poucos passos ou os títulos ficam enormes já no passo 4.

Não é preciso arredondar: os navegadores renderizam tamanhos fracionados, e a coerência entre os passos importa mais que números inteiros.

Uma única escala raramente serve ao mesmo tempo para um celular de 360 px e um desktop de 1440 px: títulos que ficam bons no desktop estouram no celular. A solução antiga era um conjunto de media queries que pulam de um tamanho para outro. A tipografia fluida faz cada tamanho crescer de forma linear com a largura da tela entre dois pontos e o mantém fixo fora deles — e o CSS expressa isso numa única declaração:

Este gerador permite definir base e proporção separadamente para cada ponta, a abordagem do Utopia (utopia.fyi). Uma proporção menor no celular e maior no desktop mantém o texto corrido quase constante enquanto os títulos ganham presença em telas grandes. Todos os valores são escritos em rem, então a escala respeita o tamanho de fonte que o usuário configurou.

Tipografia fluida e acessibilidade

O critério 1.4.4 da WCAG exige que o texto possa ser ampliado a 200 % sem perda de conteúdo. O zoom do navegador aumenta valores em rem, mas não em vw, então um tamanho muito dependente da largura da tela pode não dobrar com o zoom. Duas regras mantêm a tipografia fluida segura:

• Sempre inclua rem no valor preferido — nunca use apenas 5vw. O gerador sempre entrega rem + vw.
• Mantenha o máximo em até 2,5 vezes o mínimo. Como mostrou Maxwell Barvian (Smashing Magazine, 2023), quando o maior tamanho de um clamp() não passa de 2,5 vezes o menor, o texto sempre consegue chegar a 200 % de zoom. Passos que quebram essa regra são sinalizados acima da prévia.

• Comece pelo texto corrido. 16 px é o padrão do navegador e um bom mínimo para leitura; textos longos costumam usar 17–18 px no desktop. Rótulos de interface e células de tabela podem usar o passo −1.
• Limite o número de passos. A maioria dos produtos precisa de 2 passos abaixo da base e 4–5 acima. Mais tamanhos não deixam a hierarquia mais clara, e sim mais confusa.
• Diminua a entrelinha conforme o tamanho cresce. Cerca de 1,5 para texto corrido e 1,1–1,2 para títulos grandes; a exportação para Tailwind inclui uma entrelinha sugerida por passo.
• Use proporções menores em telas pequenas. 1,2 no celular e 1,25–1,333 no desktop é uma combinação segura para interfaces de produto.
• Textos curtos de interface também precisam ser legíveis. Tooltips, dicas de onboarding e itens de checklist muitas vezes usam 12–13 px para caber num balão pequeno. Mantenha-os no passo −1 ou maior e encurte o texto — a calculadora de tempo de leitura de tooltips ajuda.
• Confira o contraste no menor tamanho. Pesos finos e tamanhos pequenos precisam de mais contraste; teste os pares no verificador de contraste de cores.

1. Brown T. More Meaningful Typography. A List Apart, 2011 — escalas modulares para a web.
2. Bringhurst R. The Elements of Typographic Style. Hartley & Marks — a escala tipográfica clássica e os intervalos musicais.
3. Utopia (utopia.fyi), J. Gilyead e T. Hill — escalas fluidas com proporções diferentes por largura de tela.
4. Barvian M. Addressing Accessibility Concerns With Using Fluid Type. Smashing Magazine, 2023 — a regra de 2,5× para zoom de 200 %.
5. W3C. WCAG 2.2, critério 1.4.4 Redimensionar texto.
6. W3C. CSS Values and Units Module Level 4 — clamp(), rem e vw.