Tipografia

Princípios

Neste guia, decisões tipográficas não são puramente estéticas. Seguem quatro princípios que garantem conteúdo acessível e útil.

• Suporte à leitura: A função primária do texto é ser lido. Contraste, tamanho e entrelinha devem minimizar o esforço cognitivo.
• Ferramenta de hierarquia: Tamanho e peso não servem pra enfeitar. Servem pra indicar importância e relação entre elementos.
• Consistência acima de variedade: Menos estilos tipográficos, usados de forma consistente, criam interfaces mais previsíveis e fáceis de manter.
• Acessibilidade como critério básico: Tamanhos mínimos e contrastes adequados não são opcionais.

Fontes

Hierarquia tipográfica

A hierarquia guia o olho do usuário. São três níveis claros de informação:

Tamanhos, pesos e espaçamento

Propriedades tipográficas trabalham em conjunto. Alterar uma exige ajustar as outras.

• Tamanho (Size): Defina uma escala limitada. Não use valores arbitrários. Se precisa de um tamanho entre 14px e 16px, o problema provavelmente é layout, não tipografia.
• Peso (Weight): Use pesos para criar ênfase sem aumentar o tamanho. Regular para leitura, Medium para estrutura, Bold para destaque crítico.
• Line-height (Entrelinha): Títulos curtos aceitam entrelinhas menores (1.1 a 1.2). Textos longos precisam de ar (1.5 a 1.6). Apertar demais dificulta o retorno do olho pra próxima linha. Ar demais desorganiza o parágrafo.

Boas práticas de uso

• Alinhe textos longos à esquerda. Justificar texto na web cria "rios" de espaço branco que prejudicam a leitura (especialmente em mobile).
• Limite o comprimento da linha (measure) entre 45 e 75 caracteres. Linhas muito longas cansam o olho; muito curtas quebram o ritmo.
• Use Caixa Alta (UPPERCASE) com moderação absoluta. É mais difícil de ler e soa como "grito". Em siglas e botões, use tracking (letter-spacing) levemente aumentado.
• Centralize texto apenas se forem títulos curtos ou labels isolados. Parágrafos centralizados são difíceis de ler porque cada linha começa em um lugar diferente.

Tipografia no código

Tipografia no front-end é sistema, não conjunto de valores isolados. Pra garantir manutenção e consistência, a implementação precisa refletir as decisões de design.

• Tokens Semânticos: Use abstrações como text-body ou font-heading em vez de valores brutos. Isso desacopla a decisão de design da implementação técnica.
• Escalas modulares: Defina tamanhos (t-shirt sizing: xs, sm, md, lg, xl) que crescem em progressão previsível, evitando números mágicos e ajustes arbitrários.
• Manutenção centralizada: Alterar a fonte base ou a escala no arquivo de configuração deve propagar a mudança para todo o produto automaticamente, sem refatoração manual de arquivos.
• Unidades relativas: Use rem em vez de px para garantir que a tipografia respeite as preferências de escala do navegador do usuário.

Como argumentar a importância da tipografia

Tipografia é funcionalidade, não estética. Para defender decisões tipográficas num contexto de produto, foque no impacto mensurável:

• A leitura é a interface: ~90% da web é texto. Melhorar a tipografia é, na prática, melhorar a usabilidade central do produto.
• Redução de custo cognitivo: Boas escolhas tipográficas organizam a informação visualmente, permitindo que o usuário complete tarefas mais rápido e com menos erros.
• Acessibilidade: Contraste adequado e hierarquia clara não são bônus. São requisitos legais e éticos que ampliam o público do produto.
• Eficiência de manutenção: Um sistema tipográfico padronizado reduz tempo de desenvolvimento e QA, eliminando discussões recorrentes sobre ajustes arbitrários.

O que evitar

• Não use mais de 2 famílias tipográficas. Uma para UI e, se necessário, uma para branding/display é suficiente.
• Não reduza o tamanho da fonte para fazer o texto "caber". Se não cabe, revise o conteúdo ou o layout. Fontes menores que 12px são inacessíveis para muitos.
• Não confie apenas na cor para hierarquia. Pessoas com daltonismo podem não perceber a diferença. Use tamanho e peso também.

Estudos e guias aplicados