O elemento "font-size-adjust" do CSS agora está no valor de referência

Rachel Andrew

Publicado em 23 de julho de 2024

A propriedade CSS font-size-adjust foi lançada no Chrome hoje e faz parte da versão mais recente da linha de base. Essa propriedade pode ajudar a evitar a mudança do layout quando as fontes padrão são carregadas e garantir a legibilidade das fontes padrão em tamanhos menores. A propriedade font-size-adjust faz parte da Interop 2024, então essa é mais uma vitória para o esforço de melhorar a interoperabilidade da plataforma da Web.

O problema

Ao comparar duas fontes definidas com o mesmo tamanho, dependendo da forma e do tamanho dos glifos, o texto exibido pode ocupar uma quantidade muito diferente de espaço. Como exemplo, a demonstração a seguir mostra texto em Verdana e Arial, ambos definidos como 16 pixels.

A diferença de tamanho é explicada pelo fato de que o valor do aspecto, a altura das letras minúsculas em comparação com as letras maiúsculas em uma fonte, varia entre as fontes.

Isso pode causar dois problemas quando uma fonte com um valor de aspecto diferente é usada como substituto. Em primeiro lugar, a quantidade de espaço ocupada pela fonte vai mudar. Em segundo lugar, a fonte de substituição escolhida pode ser menos legível do que a especificada primeiro, principalmente em tamanhos pequenos. Isso acontece porque a altura relativa das letras minúsculas em relação às maiúsculas é um fator-chave na legibilidade.

Como o font-size-adjust ajuda

A propriedade font-size-adjust permite ajustar a fonte de substituição para que ela combine melhor com a primeira. O exemplo a seguir mostra as duas fontes mostradas anteriormente. Desta vez, a segunda fonte foi ajustada para corresponder à primeira.

Este exemplo usa um único valor, um número, que ajusta as fontes usando a métrica de fonte padrão de ex-height. Essa é a proporção da altura x, a altura de um x em minúsculas na fonte para o tamanho da fonte. Também é possível especificar a métrica da fonte usada. No próximo exemplo, eu normalizei as fontes usando a palavra-chave ch-width, além do número.

Para conferir todos os valores possíveis, consulte a documentação da MDN para font-size-adjust.

Vale a pena conferir seu site usando a fonte de fallback e ver se um pequeno ajuste com font-size-adjust pode ajudar os leitores que estão usando a fonte de fallback a ter uma experiência melhor, especialmente agora que ela está disponível em todos os lugares.