Textos

A pilha de fontes de zero kilobyte

·3 min read

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

Toda conversa sobre estratégia de carregamento de fontes — preload, subsetting, ajuste de font-display — está a jusante de uma decisão que a maioria das equipes nunca toma conscientemente: carregar fontes ou não. Para uma grande classe de aplicações de alto desempenho, a seleção tipográfica correta é a que já está instalada na máquina do usuário. Zero kilobytes, zero requisições, zero deslocamento de layout, legível já na primeira renderização.

Duas linhas do tempo de carregamento: uma pilha do sistema renderiza em zero milissegundos; uma webfont renderiza o texto no fallback e troca depois de mais de um segundo em uma conexão lenta.

O que "pilha do sistema" significa agora

O velho atalho preguiçoso de Arial, sans-serif não é o que estou descrevendo. Uma pilha moderna do sistema é uma composição deliberada:

font-family: ui-sans-serif, system-ui, -apple-system,
  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Essa única declaração compra San Francisco nos dispositivos Apple, Segoe UI no Windows, Roboto no Android — três tipos que os fornecedores de plataforma gastaram, coletivamente, centenas de milhões de dólares aperfeiçoando para as próprias telas, com hinting e renderização feitos pelos motores que os conhecem melhor. Seus usuários os leem o dia inteiro; a familiaridade é, em si, um recurso de legibilidade, um ponto que o capítulo do Universal Web sobre seleção de tipos desenvolve longamente.

As pilhas de serifa e mono merecem o mesmo cuidado: ui-serif/Georgia/Charter para superfícies de leitura, ui-monospace/SF Mono/Consolas/"Cascadia Code" para código e dados. A própria fonte display deste site segue exatamente essa lógica — uma fonte comercial para quem a tem, uma cadeia de fallback afinada para todos os demais.

Quando zero é o número certo

A decisão é sobre o que a interface é. Pilhas do sistema vencem quando o produto é uma ferramenta: dashboards, painéis administrativos, interfaces de negociação e monitoramento, produtos para desenvolvedores, qualquer coisa usada de hora em hora, em que o trabalho da tipografia é desaparecer. Nessas aplicações a fonte é pura infraestrutura — ninguém admira o tipo da coisa que o aciona às três da manhã — e o orçamento de desempenho é melhor gasto em dados.

A fonte da marca merece seus bytes quando o produto é um lugar: superfícies de marketing, leitura editorial, qualquer lugar em que a tipografia carrega identidade. Este portfólio serve webfonts, deliberadamente; sua tipografia é o conteúdo. Esse é o teste — se você apagasse a fonte personalizada, o produto significaria menos, ou só carregaria mais rápido?

Engenharia do fallback como se fosse a fonte

O ofício de uma pilha de zero kilobyte é disciplina métrica. Diferentes fontes de plataforma têm diferentes alturas de x e larguras, de modo que um layout afinado apenas no macOS respirará diferente no Windows. Três ferramentas fecham essa lacuna:

  • font-size-adjust normaliza as alturas de x dos fallbacks para que cada fonte da cadeia seja lida no mesmo corpo efetivo.
  • text-wrap: balance e pretty absorvem as diferenças de quebra de linha entre fontes metricamente incompatíveis.
  • Testar na pilha real — a disciplina que ninguém pratica. Capture a interface em Segoe, SF e Roboto; onde o design só funciona em uma delas, o design está errado.
A pilha de zero kilobyte não é uma posição de meio-termo. É a aparência de levar a sério tanto o desempenho quanto a tipografia quando a aplicação é uma ferramenta — e escolhê-la conscientemente, superfície por superfície, é a marca de uma equipe que sabe para que serve a sua tipografia.