Também disponível em: English · Español · Français · العربية
Gerador de escala tipográfica modular
Uma escala tipográfica a partir de qualquer base e proporção, com a proporção real impressa ao lado de cada passo para você ver o que o arredondamento custou.
O que é uma escala modular?
Uma escala modular é um conjunto de tamanhos de fonte construído multiplicando repetidamente um tamanho base por uma proporção fixa. Comece em 18px com proporção 1,25 e você obtém 22,5, 28,125 e 35,15625 para cima, e 14,4 e 11,52 para baixo. O apelo é a coerência: cada par vizinho guarda a mesma relação, então os tamanhos parecem um sistema em vez de uma lista de números de que alguém gostou.
As proporções têm nome porque foram emprestadas da música. A terça maior, a quarta justa, a quinta justa e a oitava são intervalos em entoação justa e, nesse sistema, são frações exatas: 5/4, 4/3, 3/2 e 2. Vale saber disso porque toda tabela publicada de proporções mostra as decimais no lugar delas, e essas decimais estão arredondadas.
Este gerador de escala modular faz o trabalho comum e ainda faz o que nenhum outro faz: ao lado de cada passo ele imprime a proporção que aquele passo realmente alcançou, e diz quantos ainda batem com a que você pediu. Normalmente a maioria não bate.
Como usar
- Defina o tamanho base e escolha uma proporção. Nove intervalos com nome já vêm prontos, ou escolha Outra e digite a sua. A linha abaixo do seletor diz qual fração exata o intervalo realmente é, e a decimal arredondada que as tabelas costumam imprimir.
- Escolha quantos passos você precisa acima e abaixo da base. Os passos negativos são os tamanhos pequenos — legendas, rótulos — e os positivos são os títulos.
- Olhe a última coluna e depois desmarque a caixa do arredondamento. Aquela coluna é a proporção que cada passo guarda de fato com o de baixo. Com o arredondamento ligado a maioria se desvia; sem ele, todos são exatos. O resumo embaixo conta quantos, e o bloco de CSS entrega propriedades personalizadas prontas para colar.
Arredondar para pixels inteiros quebra a escala
Uma progressão geométrica não sobrevive ao arredondamento. Pegue o exemplo padrão desta página: uma terça maior a partir de uma base de 18px. Arredondados para pixels inteiros os tamanhos ficam 12, 14, 18, 23, 28, 35, 44, 55 e 69, e só dois desses oito passos ainda guardam uma relação de 1,25 com o anterior. O primeiro par, de 12 para 14, dá 1,1667: está 6,67% longe da proporção pela qual a escala foi escolhida, e é o maior texto da página ao lado do menor.
Não é uma esquisitice de um ajuste específico. Nas nove proporções desta página com os dois tamanhos base mais comuns, 16 e 18 pixels, só 39 de 144 pares vizinhos mantêm a proporção prometida — 27,1% — e o pior par se desvia 10%. Ou seja, a propriedade que faz valer a pena usar uma escala modular está, no caso comum, quase toda ausente dos números que chegam à folha de estilo.
O infrator mais surpreendente é a oitava. Dobrar é a proporção mais simples que existe e o arredondamento não consegue quebrá-la, porque o dobro de um número inteiro é um número inteiro. Mas arredondar antes de dobrar consegue: a partir de uma base de 18px, o passo dois abaixo é 4,5, que arredonda para 5, e 5 dobrado dá 10 em vez do 9 que a escala quer. É um erro de 10% na proporção mais simples da tabela, e é o maior desvio de toda ela. A partir de uma base de 16px essa mesma oitava é perfeita em todos os passos, porque 16 se divide limpo até embaixo. Quem decide é a paridade da base, e por isso a base é o primeiro controle da página.
A saída não é escolher outra proporção, e sim parar de arredondar: o CSS aceita 1,3333rem e 22,5px numa boa, e a coluna rem daqui é exata esteja ou não a de pixels. Desmarque a caixa do arredondamento e o contador vai para oito de oito com desvio máximo zero.
As proporções publicadas também estão arredondadas
Existe um segundo arredondamento, menor, embaixo do primeiro, e ele está em quase toda tabela de proporções da web. Uma quarta justa é escrita 1,333. Ela não é 1,333: é 4/3, ou seja, 1,3333 periódico. Uma terça menor é 6/5, uma terça maior 5/4, uma quinta justa 3/2 e uma segunda maior 9/8. Isso é exato; as decimais publicadas ao lado não são.
A diferença de tamanho é pequena: no sexto passo acima de uma base de 16px, usar 1,333 em vez de 4/3 custa menos de um pixel inteiro. Mas o erro vai sempre na mesma direção, porque 1,333 fica abaixo de 4/3 e não de um lado e de outro, então ele se acumula em vez de se cancelar. E tem uma consequência que não é nada pequena: com a fração exata, três dos pares arredondados numa base de 16px caem exatamente na proporção, porque 4/3 é uma razão de inteiros pequenos e pares como 12 e 16 a satisfazem. Com 1,333 nenhum par pode ser exato, porque 1,333 não é a razão de nenhum par de inteiros pequenos.
Duas das nove são de fato irracionais e nenhuma decimal será exata para elas. A quarta aumentada é a raiz quadrada de dois, e a proporção áurea é um mais a raiz de cinco, tudo dividido por dois. Esta página usa o valor exato nas nove e diz embaixo do seletor com qual dos dois tipos você está trabalhando.
Limites assumidos
Nada disso quer dizer que uma escala arredondada seja inútil. Tamanho de fonte é decisão de design, não medição, e 23px em vez de 22,5px não machuca ninguém. A afirmação aqui é mais estreita e vale ser precisa: assim que você arredonda, o que você tem já não é uma escala modular, é uma lista de tamanhos que começou como uma. Se a proporção era o seu motivo para escolher este método, convém saber quando você deixou de tê-la.
O contador compara cada par com a proporção que você pediu e só chama de exato quando os dois batem até uma fração de um trilionésimo. É proposital ser estrito, porque qualquer folga maior faria quase-acertos passarem por acertos e a coluna perderia o sentido.
Os navegadores acrescentam mais um arredondamento que esta página não consegue mostrar. Um tamanho em rem é calculado de forma exata, mas os glifos acabam sendo desenhados sobre uma grade de pixels do dispositivo, e como isso é resolvido depende do navegador, do sistema e da tela. Então a coluna rem é exata como valor calculado e aproximada como tinta. Ainda assim é melhor que arredondar por conta própria, porque o navegador arredonda no último momento possível e não no primeiro.
Por fim, a escala não diz nada sobre quais tamanhos você deveria usar de verdade. Um gerador entrega nove passos com prazer; a maioria das interfaces precisa de quatro ou cinco, e os que você pula importam tanto quanto os que você mantém.
Por que é grátis?
É aritmética, e roda no seu navegador. Não há servidor envolvido, então não há nada para cobrar nem conta para criar.
Nada é enviado e nada é guardado. Recarregue a página e ela terá esquecido a sua escala.