Gere uma escala tipográfica modular harmoniosa com proporção áurea, terça maior e outras proporções clássicas. Pré-visualize os tamanhos e copie o CSS completo.
Uma escala tipográfica é um conjunto de tamanhos de fonte que seguem uma proporção matemática consistente. Em vez de escolher tamanhos aleatoriamente, cada etapa é multiplicada pela mesma proporção – criando ritmo visual e hierarquia entre títulos, corpo de texto e legendas.
Escolha um tamanho base (16px é o padrão do navegador e um ponto de partida sólido) e, em seguida, escolha uma proporção. Proporções menores, como 1,125, criam escalas sutis e elegantes para sites editoriais; proporções maiores, como 1,618, criam um contraste dramático para as páginas de marketing.
Uma escala tipográfica é um conjunto fixo de tamanhos de fonte que seguem uma mesma proporção matemática, de modo que cada degrau se relaciona com o próximo pela mesma razão. Em vez de escolher tamanhos a olho — 14, 17, 22, 31... — você escolhe um tamanho base e multiplica (ou divide) pela razão repetidamente: 16 × 1,25 = 20, × 1,25 = 25, e assim por diante. O resultado é uma hierarquia que parece intencional: títulos, corpo, legendas e rótulos parecem membros do mesmo sistema de design, não um amontoado de tamanhos soltos.
Razões comuns se comportam de formas diferentes. 1,125 e 1,2 criam degraus sutis e elegantes — ideais para interfaces densas e cheias de texto. 1,25 e 1,333 são os cavalos de batalha da web: hierarquia perceptível sem drama, e 1,333 por acaso é a quarta justa da música clássica. 1,5 produz saltos ousados para sites de conteúdo. 1,618 — a proporção áurea — é marcante, porém agressiva: linda para títulos de display e páginas de marketing, geralmente demais para leitura longa.
16px é o padrão do navegador e o ponto de partida certo para o corpo no desktop: iguala o conforto de leitura dos livros impressos, é legível para a maioria e segue as diretrizes de acessibilidade. Interfaces móveis podem começar um pouco menor (15px) ou manter 16px. Com o base definido, todo o resto deriva dele — títulos multiplicando para cima, legendas e rótulos dividindo para baixo — e uma única mudança no base reajusta toda a hierarquia de forma consistente.
Uma escala é mais que tamanhos de fonte. A altura de linha deve crescer quando o texto encolhe: 1,5–1,6 para o corpo, 1,2–1,4 para títulos. Para ritmo vertical, multiplique o tamanho base pela razão da escala e obtenha os degraus de espaçamento — se sua escala é 16/20/25/31, esses mesmos números servem como incrementos de margem e padding. Quando tamanhos e espaçamentos compartilham uma razão, cada elemento se encaixa numa grade invisível e a página parece composta, não montada.
O texto deve escalar fluidamente entre mobile e desktop. O CSS moderno resolve em uma linha: font-size: clamp(1rem, 0.7rem + 1.2vw, 1.75rem) — um mínimo, um trecho fluido e um máximo. Tire o mínimo e o máximo da sua escala (por exemplo, 16px a 28px) e o termo de viewport faz o resto: títulos encolhem com elegância no celular e crescem no monitor sem uma única media query.
Do verde da bandeira ao azul dos azulejos, as cores brasileiras misturam natureza tropical, herança portuguesa e a energia do carnaval. Uma paleta viva que reflete a identidade visual do país.
O verde da bandeira nacional, símbolo das matas
O ouro do losango da bandeira brasileira
O azul do círculo e das estrelas
Herança dos azulejos portugueses em igrejas e casarões
A energia vibrante do carnaval e das marcas jovens
A floresta tropical, pulmão do planeta
O ouro do barroco mineiro de Ouro Preto
A argila do sertão e do artesanato nordestino
Cor do vestido tradicional das baianas
As praias de areia clara do litoral