O que é uma escala tipográfica?

Uma escala tipográfica é o conjunto ordenado de tamanhos de fonte que um design system permite, geralmente gerado multiplicando um tamanho base por uma razão constante. Restringir o texto a esses passos é o que mantém a tipografia consistente em uma interface construída por muitas pessoas.

Como uma escala é construída

Escolha um tamanho base, normalmente 16px porque é o padrão do navegador e o tamanho que o texto corrido geralmente deveria ter. Escolha uma razão. Multiplique para cima e para baixo.

Uma razão de 1,25 (uma terça maior) a partir de uma base de 16px dá aproximadamente:

12px  ← 16 / 1,25 / 1,067
14px
16px  ← base
20px
25px
31px
39px

Depois os valores são arredondados para algo sensato. Razões comuns vão de 1,125 (sutil, boa para interfaces densas) a 1,5 (dramática, melhor para páginas de marketing do que para aplicações).

Por que restringir tamanhos

Sem uma escala, os tamanhos são escolhidos individualmente, e uma aplicação acumula texto de 13px, 14px e 15px que ninguém quis que fossem diferentes. Lê-se como algo levemente sem resolução, sem que nada em particular esteja identificavelmente errado.

Uma escala também torna o ritmo vertical tratável. Quando os tamanhos se relacionam por uma razão conhecida, entrelinhas e espaçamentos podem se relacionar a eles de forma previsível, em vez de serem ajustados por componente.

O que um tamanho sozinho não cobre

Um tamanho é só parte de uma decisão tipográfica. Um conjunto completo de tokens associa a cada passo:

Entrelinha: mais fechada em títulos, mais aberta em texto corrido. Cerca de 1,2 para tamanhos de display e 1,5 para corpo é um padrão razoável.
Peso: quais pesos estão disponíveis em quais tamanhos
Espaçamento entre letras: texto grande de display costuma precisar de leve tracking negativo; texto pequeno, muitas vezes de leve positivo

Sistemas que tokenizam apenas o tamanho deixam os outros três para serem redecididos em cada componente, que é onde a inconsistência volta.

Nomenclatura semântica

Nomear os passos pelo papel em vez do tamanho compensa pelo mesmo motivo que na cor:

--font-size-body: 16px;
--font-size-heading-2: 25px;

--text-lg descreve um tamanho. --font-size-heading-2 descreve uma decisão, e mudar para onde ele aponta não exige encontrar cada título.

Escolhendo as fontes

O par usual é uma fonte de display com caráter para títulos e uma fonte de trabalho muito legível para o corpo. O modo de falhar é escolher duas fontes parecidas mas não idênticas, o que se lê como um erro em vez de uma decisão. Contraste ou iguale; não fique no quase.

Onde o Flash DSM entra

Sistemas gerados incluem um par de fontes e uma escala completa com tokens de tamanho, peso, entrelinha e espaçamento entre letras em cada passo, escolhidos para o produto descrito no prompt.