Fontes na web: FOIT, FOUT e o salto que se faz desaparecer

Entre o pedido da página e a letra chegar há um intervalo, e o browser tem de decidir o que mostrar nesse intervalo. Há duas respostas possíveis, as duas feias, e os nomes delas são a primeira coisa que convém saber para escolher.

1. FOIT e FOUT

FOIT — flash of invisible text. O browser esconde o texto até a letra chegar. A página aparece com os espaços certos e vazios, e quem visita espera a olhar para nada.

FOUT — flash of unstyled text. O texto aparece logo na letra de recurso e troca quando a verdadeira chega. Lê-se desde o primeiro instante, e há um salto visível a meio da leitura.

Por omissão os browsers fazem FOIT durante cerca de três segundos e, se a letra não chegar, passam a FOUT. Ou seja: sem se dizer nada, escolhe-se a pior das duas para quem tem uma ligação má.

2. O font-display escolhe por nós

• block — FOIT até três segundos. Para um logótipo em letra própria, defensável. Para texto, não.

• swap — FOUT imediato. É o que quase sempre se quer: ler é mais importante do que ler bonito.

• fallback — um FOIT muito curto (uns 100 ms), depois um período de troca, e depois desiste: se a letra chegar tarde, fica a de recurso até à navegação seguinte.

• optional — o mais interessante e o menos usado. Dá à letra cerca de 100 ms e, se ela não chegar, o browser pode não a usar nesta visita — e descarrega-a em segundo plano para a próxima. Zero salto, sempre.

A escolha entre swap e optional é uma escolha editorial, não técnica: swap diz «a minha letra importa, aceito o salto»; optional diz «a estabilidade importa mais do que a letra».

3. O salto do swap, e como se faz desaparecer

Esta é a parte que falta em quase tudo o que está escrito sobre fontes. O salto do FOUT não vem de a letra mudar de desenho — vem de ela ocupar outro espaço. Se a de recurso for mais estreita, o texto reflui; se for mais alta, a página empurra tudo para baixo. É CLS puro, do artigo das três medidas, e é parente do salto das imagens.

E resolve-se a declarar a letra de recurso com as métricas ajustadas:

@font-face {
  font-family: 'Georgia-ajustada';
  src: local('Georgia');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 22%;
}

Com as métricas a coincidir, a troca deixa de se ver: a letra muda de desenho e não mexe um pixel. É a diferença entre swap ser aceitável e swap ser invisível.

4. O que o next/font faz, concretamente

const fonteTitulo = Fraunces({
  subsets: ['latin', 'latin-ext'],
  display: 'swap',
  variable: '--fonte-titulo',
});

Três coisas, e as três importam. Descarrega a letra no build e serve-a do nosso domínio: o browser de quem visita nunca fala com o Google, o que poupa uma ligação a outro servidor e poupa também o problema de privacidade de o Google ver quem lê o site.

Gera o size-adjust da secção anterior sem se pedir nada. É por isso que o display: 'swap' aqui é seguro — swap sem ajuste de métricas é um reflow visível; com ajuste, não é.

E faz preload das letras usadas na primeira renderização. Com uma armadilha a conhecer: pré-carregar uma letra que só aparece no fim da página põe-na a competir com a imagem que decide o LCP.

5. O peso está nos glifos, não no ficheiro

O subsets é onde se decide o tamanho real. Uma letra completa traz cirílico, grego, vietnamita — alfabetos inteiros que um site em português nunca vai desenhar. Pedir só latin e latin-ext corta a maior parte do ficheiro sem perder um caractere que alguém veja.

E três letras não são três vezes o peso de uma, se cada uma só trouxer os pesos que se usam. O erro habitual é importar seis pesos de uma família e usar dois.

6. A pilha de recurso continua a ser escolhida à mão

--font-titulo: var(--fonte-titulo), 'Iowan Old Style', Georgia,
              'Times New Roman', serif;

Acabar em serif é o mínimo legal; o que interessa são as que estão antes. Iowan Old Style e Georgia são letras que já estão na máquina de quem visita e que se parecem com a verdadeira — portanto, nos milissegundos antes de a letra chegar, a página já tem a voz certa.

Quanto mais próxima a de recurso, menos a troca se nota. Uma pilha que salta de uma serifada estreita para a sans-serif do sistema é o pior caso, e é o que se escreve quando não se pensa nisto.

7. Variáveis: quando compensam

Uma letra variável traz todos os pesos num ficheiro só, e interpola o que estiver pelo meio. Compensa a partir de três ou quatro pesos, ou quando se quer um peso que não existe como ficheiro.

Com dois pesos, dois ficheiros estáticos são quase sempre mais leves do que um variável — porque o variável transporta a máquina de interpolação toda, usada ou não.

O resumo

swap para texto, e optional quando a estabilidade vale mais do que a letra. Métricas de recurso ajustadas, que é o que faz o salto desaparecer em vez de o esconder. Subconjuntos reduzidos, porque é aí que está o peso. E uma pilha de recurso escolhida pela semelhança, não pela última palavra genérica.