Reverzereverze

Font Size Scale Calculator

Free Calculator

Transforme um tamanho base e uma razão de escala em uma escala tipográfica modular e harmônica — um nível abaixo e três níveis acima para os títulos.

100% privado

Roda no seu navegador — nenhum número sai do seu dispositivo.

Seus números

O tamanho do seu texto corrido em pixels — normalmente 16px na web.

O multiplicador entre os níveis, por ex. 1,25 (terça maior) ou 1,5.

1 nível acima

20

Base × razão — subtítulos e texto de abertura.

Pequeno (base ÷ razão)

12,8

Um nível abaixo da base — legendas e letras miúdas.

2 níveis acima

25

Base × razão² — títulos de seção.

3 níveis acima

31,3

Base × razão³ — títulos de página e de hero.

Como funciona

1

Defina o tamanho base

Insira o tamanho do seu texto corrido — 16px é o ponto de partida comum na web.

2

Escolha uma razão de escala

Escolha um multiplicador como 1,2, 1,25 ou 1,5 para controlar o contraste entre os níveis.

3

Multiplique e divida

Cada nível acima multiplica pela razão; o tamanho pequeno divide a base por ela.

4

Leia sua escala

Quatro tamanhos aparecem na hora e se atualizam ao vivo quando você muda a base ou a razão.

Uma ótima escala tipográfica merece ótimos screenshots

Reverze rebuilds App Store screenshots into higher-converting creative

O que é um font size scale calculator?

Um font size scale calculator cria uma escala tipográfica modular a partir de dois dados: um tamanho base e uma razão. Em vez de escolher tamanhos de títulos ao acaso, você multiplica a base por uma razão constante para subir na escala e divide por essa razão para descer. Uma base de 16px com razão de 1,25 gera 12,8px de texto pequeno, 20px, 25px e 31,25px — tamanhos relacionados entre si pela mesma proporção, de modo que títulos e texto corrido ficam harmônicos.

É a mesma ideia por trás de um type scale calculator usado em design systems e frameworks de CSS. As razões comuns vêm de intervalos musicais — 1,125 (segunda maior), 1,25 (terça maior), 1,5 (quinta justa) e 1,618 (proporção áurea) — em que uma razão maior gera mais contraste entre o texto corrido e os títulos. Use esta calculadora para fixar uma escala antes de escrever CSS e depois reutilize os mesmos quatro tamanhos nas suas páginas web, telas de app e criativos da App Store para um visual coerente e profissional.

Perguntas frequentes

Como uma escala tipográfica modular é calculada?
Comece com um tamanho base e uma razão. Cada nível acima multiplica o tamanho anterior pela razão; o tamanho pequeno divide a base por ela. Com base de 16px e razão 1,25: pequeno 12,8px, depois 20px, 25px e 31,25px.
Qual razão de escala devo usar?
De 1,2 a 1,25 dá um contraste sutil e legível para interfaces com muito texto; 1,5 ou a proporção áurea 1,618 cria títulos marcantes e editoriais. Teste algumas razões e veja qual combina com o seu conteúdo.
Qual tamanho de fonte base é melhor?
16px é o padrão do navegador e um ponto de partida seguro para texto corrido na web. Layouts mobile e de marketing às vezes usam 17px ou 18px para mais legibilidade — defina o que combina com o seu design.
Posso usar esses tamanhos em rem ou variáveis CSS?
Sim. Divida cada valor em pixels pelo seu tamanho raiz (normalmente 16) para converter em rem, ou coloque os valores em pixels direto em propriedades personalizadas de CSS para manter toda a escala consistente.