Gerador de escala tipográfica com proporção áurea

Informe um tamanho-base, escolha quantos passos maiores e menores deseja e receba uma lista determinística de valores arredondados, pronta para tokens de design, guias de estilo ou CSS. Diferentemente de uma predefinição fixa de títulos, este gerador permite controlar a profundidade da escala e usa a proporção áurea completa entre entradas adjacentes. Você pode manter a unidade padrão em pixels ou informar outra unidade sem alterar a aritmética subjacente.

Construa a escala a partir de uma base relevante

Comece pelo tamanho que sustenta a experiência de leitura, em vez de escolher primeiro o maior título. Em um site, a base costuma ser o tamanho do texto corrido; em uma apresentação, pode ser o texto comum dos slides; em um sistema impresso, pode corresponder ao tamanho padrão dos parágrafos em pontos. O gerador trata esse número como passo zero. Cada passo positivo multiplica a base por phi, aproximadamente 1.61803399, enquanto cada passo negativo a divide pela mesma proporção. Isso produz uma progressão consistente nas duas direções e mantém todas as entradas matematicamente ligadas ao ponto de referência. Escolha steps_up para controlar quantos valores maiores aparecem e steps_down para incluir legendas, notas ou rótulos auxiliares abaixo da base. Os dois controles são limitados para que o resultado permaneça prático e fácil de analisar. Uma base de dezesseis com três passos acima, por exemplo, cria tamanhos de destaque progressivamente mais fortes e preserva dezesseis como o centro conceitual exato. O campo de unidade funciona como rótulo, não como conversor: dezesseis pixels e dezesseis pontos produzem a mesma escala numérica, mas indicam ambientes de uso diferentes. Essa distinção evita sugerir que unidades físicas e de tela sem relação possam ser convertidas sem contexto. Comece com um tamanho que você já sabe ser adequado aos leitores e use a escala para explorar a hierarquia ao redor dele.

Leia, arredonde e aplique os valores gerados

A resposta apresenta as entradas do maior passo solicitado ao menor, facilitando a leitura como uma hierarquia tipográfica. Cada linha inclui o passo com sinal, o tamanho numérico, o tamanho formatado com a unidade escolhida e uma função simples que informa se o valor é maior, igual ou menor que a base. O passo zero sempre recebe a identificação de base. O campo de fórmula registra a regra exata utilizada, algo útil para documentar a origem dos tokens de design ou revisar posteriormente um tema gerado. A precisão controla a quantidade de casas decimais de cada tamanho. Três casas funcionam bem em CSS e na maioria das ferramentas de design digital, enquanto números inteiros podem ser melhores para interfaces restritas ou especificações impressas que evitam frações de propósito. O arredondamento só acontece depois do cálculo da potência, portanto os passos intermediários não acumulam erros. Se dois valores pequenos e próximos ficarem iguais com baixa precisão, aumente a precisão em vez de alterar um deles manualmente e quebrar a proporção. Considere a saída como um sistema inicial matematicamente coerente, e não como uma obrigação de usar todos os resultados. Um produto compacto talvez use apenas a base e duas entradas maiores, enquanto um site editorial pode aproveitar quase toda a escala. Copie os valores numéricos para tokens como font_size_base ou font_size_display e preserve os números dos passos em comentários, permitindo que outras pessoas regenerem o sistema de modo consistente sem adivinhar a origem de valores isolados.

Equilibre a proporção clássica com a tipografia prática

A proporção áurea completa cria um contraste expressivo, justamente por isso combina com layouts editoriais marcantes, sistemas de marca, cartazes e landing pages. Ela também pode consumir espaço demais quando muitos níveis consecutivos precisam caber em um aplicativo denso. Use menos passos quando a proporção oferecer mais hierarquia do que a interface exige e teste os tamanhos com a família tipográfica real, pois altura de x, peso, largura e tamanho óptico afetam a escala percebida. Layouts responsivos podem adotar tamanhos-base diferentes em cada breakpoint e manter as mesmas atribuições de passos, preservando o parentesco visual entre telas sem impor a um celular um tamanho de destaque criado para desktop. A acessibilidade ainda começa com texto corrido legível, comprimento de linha confortável, entrelinha apropriada e contraste adequado; uma proporção agradável não corrige uma base pequena demais nem uma fonte inadequada. A ferramenta calcula somente tamanhos de fonte e não inventa entrelinha, espaçamento entre letras, pesos ou HTML semântico. Essas decisões dependem do idioma, do meio, da família tipográfica e da densidade do conteúdo. Para automatizar, envie as mesmas entradas pela API por US$ 0,002 por solicitação e armazene a escala devolvida com seus tokens de design. Como o cálculo não utiliza rede, aleatoriedade ou hora atual, solicitações idênticas sempre retornam valores idênticos. Isso torna a saída adequada para scripts de build, testes de snapshot, geradores de documentação e auditorias de sistemas de design nas quais a reprodutibilidade importa tanto quanto a harmonia visual.