Textos

Escolher tipos para interfaces densas em dados

·4 min read

Esta página foi traduzida com auxílio de IA. O original em inglês é a versão de referência.

A maior parte dos conselhos sobre tipos é escrita para prosa — longas linhas de caixa-baixa lidas com calma. Aplicações de alto desempenho vivem em outro regime: números varridos em colunas, identificadores lidos uma única vez de relance, rótulos de onze pixels em telas que alguém observa por oito horas. Uma fonte adorável em um ensaio pode ser ativamente perigosa em uma tela de negociação. Eis o que interrogar em vez disso.

Algarismos primeiro, letras depois

Em uma interface densa em dados, os numerais fazem a maior parte do trabalho, então audite-os antes de qualquer outra coisa:

  • Algarismos tabulares são inegociáveis. Cada dígito com a mesma largura, para que as colunas se mantenham e um valor pulsando não sacuda os vizinhos. O CSS é uma linha — font-variant-numeric: tabular-nums lining-nums — mas só se a fonte tiver o recurso. Muitas fontes da moda não têm.
  • Alinhados, não old-style. Algarismos old-style, com suas ascendentes e descendentes, são belos na prosa e um caos em uma tabela.
  • Larguras estáveis entre pesos. Se os dígitos em negrito são mais largos que os regulares, cada célula enfatizada quebra sua coluna. As melhores fontes de interface desenham todos os pesos sobre uma mesma largura — e o eixo de grade de uma fonte variável (peso sem mudança de largura) é a solução mais limpa de todas, como cobre o capítulo do Universal Web sobre fontes variáveis.
A mesma coluna numérica em algarismos proporcionais, desalinhando-se, e em algarismos tabulares alinhados, mantendo o alinhamento.

O alfabeto da interface

Interfaces estão cheias de cadeias que precisam ser lidas corretamente exatamente uma vez: números de pedido, hashes de git, chaves de API, valores. Para elas, o conjunto de confundíveis é tudo o que importa — 0/O, 1/l/I, 5/S, 8/B. Teste-os no corpo de produção antes de olhar para uma única página de espécime. As fontes que passam tendem a anunciar isso: zeros cortados ou pontuados, eles com cauda, aberturas mais abertas. É o mesmo argumento de anatomia da legibilidade que o Universal Web faz para leitores com baixa visão — uma interface a 11px coloca todo usuário em condição de baixa acuidade.

Os caracteres confundíveis — 0O, 1lI, 5S — ambíguos em uma sans genérica, distintos em uma fonte desenhada para interfaces.

A lista de verificação

O que eu de fato faço uma fonte candidata atravessar antes de entrar em uma aplicação:

1. Componha uma tabela real — dados ao vivo, tabular-nums ligado — e observe um valor pulsar. Nada pode se mover além dos dígitos.
2. O teste do alfabeto: 0O 1lI 5S 8B rn/m no menor corpo de produção, nos dois temas.
3. Altura de x a 11–13px. Fontes com altura de x pequena desmoronam exatamente onde as interfaces vivem. Uma altura de x generosa compra corpo efetivo de graça.
4. Peso no tema escuro. Claro sobre escuro lê meio peso mais pesado; se a fonte não tem eixo de grade nem um corte mais leve para compensar, todo rótulo fica borrado. (O capítulo sobre modo escuro explica a física.)
5. O grep de recursos: tnum, lnum, zero, case — verifique os recursos OpenType realmente presentes, não os que a página de marketing sugere.
6. Classe de peso de desempenho. Tudo isso precisa chegar em um ou dois arquivos WOFF2 pequenos o bastante para não bloquear os dados que rotulam — o assunto do próximo ensaio.

O padrão da lista é o padrão de toda esta disciplina: em aplicações, a tipografia se mede por erros evitados por pixel, não por beleza por espécime. Escolha a fonte que falha em ser notada por dez mil leituras seguidas.