Calculadora de Tamanho Fonte Titulo Corpo

Relação entre Tamanho de Título e Corpo

A hierarquia tipográfica se resume a manter consistentes as proporções de tamanho entre títulos e corpo de texto. Uma escala modular pega o tamanho do corpo e o multiplica pelo mesmo fator constante a cada passo. Você vai esbarrar bastante na razão áurea φ = 1.618, além da Quarta Perfeita 1.333 e da Terça Maior 1.25. A fórmula por trás disso tudo é tamanho_n = corpo × razão^n, em que n é o número do passo.

Pegue um corpo de 16px e rode uma escala 1.25: você chega a h3 = 20px, h2 = 25px, h1 = 31–39px. Suba para uma escala 1.5 mais marcante e o h1 cai em 48–54px, o que serve para hero headings. A escala padrão do Tailwind vai de text-sm (14px) até text-7xl (72px), seguindo em linhas gerais uma progressão 1.2–1.25 com saltos customizados quando chega aos extremos.

Aplicações

Você encontra essas escalas em design systems e brand guidelines, em layouts editoriais, na tipografia web pela propriedade CSS font-size e no design para impressão. Type-Scale.com e Modularscale.com geram as proporções para você. Material Design, Apple HIG e IBM Carbon publicam cada um as suas escalas recomendadas.

Perguntas frequentes

Devo usar a razão áurea? φ = 1.618 entrega um contraste dramático que combina com capas editoriais, mas pode soar agressivo demais em UI denso. Em dashboards, algo na faixa 1.2–1.333 funciona melhor.

Qual tamanho de corpo começar? 16px é o padrão web e o mínimo recomendado para acessibilidade. Impressos costumam ficar em 9–11pt. No mobile, dá para subir um pouco, para 17–18px, por legibilidade.

Posso misturar escalas? Pode. Vários sistemas rodam uma escala mais apertada (1.2) nos labels de UI e outra mais aberta (1.333) nas páginas de marketing, mantendo a mesma base de corpo.