Fontes substitutas visualmente estáveis

Quando as fontes da Web são carregadas, elas geralmente substituem uma fonte substituta que tem dimensões diferentes, mesmo que ambas estejam definidas com o mesmo font-size. Isso causa uma "mudança de layout" (Cumulative Layout Shift) e pode tornar o texto ilegível se as letras minúsculas do substituto (altura x) forem significativamente diferentes da fonte preferida.

A propriedade font-size-adjust resolve isso normalizando o tamanho da fonte com base em uma métrica específica (geralmente a altura x), garantindo que o texto ocupe o mesmo espaço visual, independente da fonte ativa.

Etapas de implementação

1. Identificar a proporção da fonte que você quer usar

Para normalizar os substitutos, você precisa do "valor de aspecto" (a proporção de letras minúsculas em relação ao tamanho da fonte) da fonte principal.

• Descoberta automática (recomendado): use a palavra-chave from-font para permitir que o navegador extraia a proporção da sua fonte da Web principal.
• Cálculo manual: se você souber o valor específico (por exemplo, 0,545 para Verdana), informe-o diretamente para ter um controle mais preciso.

2. Aplicar font-size-adjust ao contêiner de texto

Aplique a propriedade ao elemento ou a um contêiner pai. Isso garante que, se a fonte principal não for carregada ou estiver em processo de carregamento, a fonte substituta será dimensionada para corresponder ao tamanho visual da fonte principal.

.text-content {
  /* Define your font stack as usual */
  font-family: "MyWebFont", "Arial", sans-serif;
  font-size: 1rem;

  /* MANDATORY: Normalize the font size based on the primary font's x-height.
     This ensures that if 'Arial' is used as a fallback, it is scaled 
     to match the x-height of 'MyWebFont'. */
  font-size-adjust: from-font;
}

3. (Opcional) Ajustar para métricas específicas

Embora a altura x seja o padrão e o mais comum, é possível normalizar por outras métricas, como cap-height (útil para cabeçalhos em maiúsculas) ou ch-width (útil para fontes monoespaçadas).

h1 {
  /* Normalize based on the height of capital letters */
  font-size-adjust: cap-height from-font;
}

4. Verificar a estabilidade visual

Verifique se o valor de font-size-adjust alinha corretamente o substituto. Para testar isso, bloqueie temporariamente a fonte da Web ou ajuste a declaração font-family no DevTools do navegador e verifique se o layout do texto permanece estável.

Estratégias de fallback

Em navegadores que não oferecem suporte a font-size-adjust, a fonte será renderizada na escala padrão. Isso pode resultar em mudanças de layout ou de legibilidade durante as trocas de fontes.

Para reduzir esse problema sem font-size-adjust, use os descritores @font-face size-adjust, ascent-override e descent-override para ajustar manualmente as fontes substitutas, embora sejam mais complexos de calcular do que um único valor font-size-adjust.