Gerador de escala tipográfica com clamp() fluido

Uma escala modular é um conjunto de tamanhos de letra em que cada tamanho é o anterior multiplicado pela mesma proporção. Em vez de escolher 14, 18, 22 e 31 a olho, define uma base e uma proporção, e cada título, legenda e rótulo recebe um tamanho relacionado com os restantes. 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).

Os passos negativos dão legendas e letra pequena; os positivos, títulos. Proporções comuns e onde encaixam:

• 1,067 segunda menor, 1,125 segunda maior — muito contidas; dashboards, aplicações com muitos dados, ecrãs pequenos.
• 1,2 terceira menor, 1,25 terceira maior — a escolha mais comum para interfaces de produto e documentação.
• 1,333 quarta perfeita, 1,414 quarta aumentada — hierarquia clara para páginas de marketing e blogues.
• 1,5 quinta perfeita, 1,6 sexta menor, 1,618 proporção áurea — muito expressivas; use poucos passos, ou os títulos ficam enormes logo no passo 4.

Não é preciso arredondar: os navegadores apresentam tamanhos com casas decimais, e a coerência entre passos importa mais do que números inteiros.

Uma única escala raramente serve ao mesmo tempo um telemóvel de 360 px e um computador de 1440 px: títulos que ficam bem no computador saem do ecrã no telemóvel. A solução antiga era um conjunto de media queries que saltam de um tamanho para outro. A tipografia fluida faz crescer cada tamanho de forma linear com a largura do ecrã entre dois pontos e fixa-o fora deles — e o CSS exprime isso numa só declaração:

Este gerador permite definir separadamente a base e a proporção de cada extremo, a abordagem do Utopia (utopia.fyi). Uma proporção menor no telemóvel e maior no computador mantém o texto corrido quase constante enquanto os títulos ganham presença em ecrãs grandes. Todos os valores são escritos em rem, pelo que a escala respeita o tamanho de letra definido pelo utilizador.

Tipografia fluida e acessibilidade

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

• Inclua sempre rem no valor preferido — nunca use apenas 5vw. O gerador devolve sempre rem + vw.
• Mantenha o máximo até 2,5 vezes o mínimo. Como mostrou Maxwell Barvian (Smashing Magazine, 2023), quando o maior tamanho de um clamp() não ultrapassa 2,5 vezes o menor, o texto consegue sempre chegar a 200 % de zoom. Os passos que violam esta regra são assinalados acima da pré-visualização.

• Comece pelo texto corrido. 16 px é o valor predefinido do navegador e um bom mínimo para leitura; textos longos usam muitas vezes 17–18 px no computador. 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 clarificam a hierarquia: complicam-na.
• Reduza a entrelinha à medida que 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 ecrãs pequenos. 1,2 no telemóvel e 1,25–1,333 no computador é uma combinação segura para interfaces de produto.
• Textos curtos de interface também têm de se ler bem. Tooltips, dicas de onboarding e itens de checklist usam muitas vezes 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.
• Verifique o contraste no tamanho mais pequeno. 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 ecrã.
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.