Tipografia

Tipografia é a base de qualquer interface. Antes de cor, antes de layout, antes de qualquer detalhe visual existe texto. E como esse texto é apresentado define se a interface comunica ou confunde.

Por que tipografia importa

Mais de 90% do conteúdo de uma interface web é texto. Botões têm rótulos, formulários têm labels, navegação tem nomes de seção. Se a tipografia falha, tudo falha porque o usuário não consegue ler, escanear ou entender o que está na tela.

A decisão mais importante em tipografia não é qual fonte usar. É estabelecer uma hierarquia clara:

• O que é título
• O que é corpo
• O que é informação secundária

Sem hierarquia, não há leitura. Há ruído.

Escolhendo uma fonte

Para interfaces, a regra prática é simples: legibilidade primeiro, personalidade depois. Fontes do sistema (system UI) são a escolha mais segura porque já estão otimizadas para o sistema operacional do usuário, carregam instantaneamente e são familiares.

Quando você precisa de uma fonte customizada, considere:

• Quantos pesos ela oferece (regular, medium, semibold, bold)
• Se tem boa cobertura de caracteres (acentos, símbolos)
• Como se comporta em tamanhos pequenos (14px e abaixo)
• O impacto no performance de carregamento

Escala tipográfica

Uma escala tipográfica define os tamanhos que você vai usar e, mais importante, os que você não vai usar. Ter 3-4 tamanhos bem definidos é melhor do que escolher um tamanho arbitrário para cada elemento.

Exemplo de escala

Uma escala comum para interfaces usa um ratio de 1.25 (major third):

:root {
  --text-xs: 0.75rem;    /* 12px, labels, captions */
  --text-sm: 0.875rem;   /* 14px, body secundário */
  --text-base: 1rem;     /* 16px, corpo principal */
  --text-lg: 1.25rem;    /* 20px, subtítulos */
  --text-xl: 1.563rem;   /* 25px, headings menores */
  --text-2xl: 1.953rem;  /* 31px, headings médios */
  --text-3xl: 2.441rem;  /* 39px, heading principal */
}

Line-height e tracking

Dois ajustes que fazem mais diferença do que trocar de fonte:

• Line-height: texto pequeno precisa de mais respiro. Corpo de texto funciona bem entre 1.5 e 1.7. Headings podem ser mais apertados, entre 1.1 a 1.3, porque o tamanho grande já dá leitura.
• Tracking (letter-spacing): headings grandes ficam melhores com tracking levemente negativo (-0.02em a -0.04em). Texto pequeno e uppercase precisa de tracking positivo (+0.05em a +0.1em) para compensar a falta de espaço entre letras maiúsculas.

A decisão

Neste guia usamos Arimo para texto e JetBrains Mono para código. Arimo é uma sans-serif neutra com boa legibilidade em tamanhos pequenos. JetBrains Mono tem ligatures que ajudam na leitura de código sem ser distrativa.

A escala é simples: 3 tamanhos de heading, 1 corpo, 1 texto secundário. Sem excesso. Cada tamanho tem um papel definido e não se sobrepõe.