Escala Tipográfica

A escala tipográfica (também conhecida como Type Scale, Typography Scale ou Type Stack) é uma seleção estratégica de estilos de fonte aplicada em uma interface para assegurar consistência e flexibilidade. Mais do que apenas definir tamanhos, uma escala completa detalha pesos, variações de altura de linha (line height) e espaçamento entre letras (letter spacing).

1. Escala Fixa: O Método de Seleção Manual (Hand-picking)

Na escala fixa, o designer utiliza valores predeterminados para definir os tamanhos das fontes, geralmente baseando-se em sistemas de grid consolidados, como o grid de 8 pixels (ou 4 pixels).

Lógica de Construção: Os valores seguem múltiplos de 8 (8, 16, 24, 32...) ou 4 para valores intermediários (12, 20, 28...).

Flexibilidade: Diferente de modelos matemáticos rígidos, a escala fixa permite o "Hand-picking", onde o designer seleciona apenas os tamanhos que fazem sentido para o projeto (ex: 12, 16, 24, 40, 56).

Vantagem: Facilita a criação de componentes e a manutenção da hierarquia visual, pois todos os elementos (títulos, subtítulos, corpo de texto e espaçamentos internos) compartilham a mesma lógica numérica.

2. Escala Modular: Harmonia Baseada em Proporções

A escala modular é categorizada pelo uso de um fator de multiplicação (proporção) para definir a progressão dos tamanhos a partir de um valor base.

Fatores Comuns:

• Perfect Fifth (1.5): Gera um contraste de tamanho muito alto entre os níveis.

• Major Third (1.25): Oferece um contraste mediano, comum em composições de interface.

• Major Second (1.125): Resulta em um contraste pequeno e sutil, sendo uma das escalas mais utilizadas por grandes empresas, como o Google.

3. Práticas de Mercado: Como Grandes Empresas Aplicam

A escolha da escala depende diretamente das necessidades e da expressão visual de cada produto.

Apple: Utiliza tamanhos dinâmicos que mudam conforme a configuração (Small, Medium, Large). Trabalham com um baseline grid de 6 pixels, o que combina conceitos de escala fixa e modular.

Uber: Adota a escala Major Second (1.125), fundamentada na teoria musical para transmitir uma sensação de harmonia e positividade no produto.

Wise: Apresenta tamanhos de fonte robustos, diferenciando as escalas para o produto e para o marketing, frequentemente utilizando valores que remetem a uma escala fixa de 8 pixels.

4. Implementação Técnica e Variáveis

No design moderno, especialmente no Figma, a recomendação é o uso de variáveis de tamanho.

Cadastrar os estilos de texto vinculados a variáveis torna o projeto dinâmico: ao alterar uma variável de tamanho, todos os estilos de texto e elementos relacionados (como componentes que usam esses estilos) são atualizados automaticamente. Isso garante que a interface permaneça consistente mesmo durante evoluções rápidas no design.

Confira na aula prática o restante dessas técnicas.