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

Compatibilidade com navegadores

  • 127
  • 127
  • 3
  • 16.4

Origem

A propriedade CSS font-size-adjust chega ao Chrome hoje, e se torna parte do valor de referência recentemente disponível. Essa propriedade ajuda a evitar mudança do layout quando as fontes substitutas são carregadas e garantir a legibilidade de fontes substitutas em tamanhos menores. O font-size-adjust faz parte de Interoperabilidade de 2024, Portanto, essa é outra vitória para o esforço de melhorar a interoperabilidade plataforma da Web.

O problema

Quando você compara duas fontes definidas com o mesmo tamanho, dependendo da forma e do tamanho dos glifos, o texto exibido pode ocupar uma quantidade de espaço muito diferente. Como exemplo, a demonstração a seguir mostra textos em Verdana e Arial, com 16 pixels.

.
Texto exibido em 16 px em Verdana e Arial.

A diferença de tamanho é justificada pelo fato de que o valor do aspecto, a altura de letras minúsculas em comparação com 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. Primeiro, a quantidade de espaço ocupado pela fonte mudará. Segundo, sua opção de fonte substituta pode ser menos legível do que a especificada pela primeira vez, especialmente em fontes de tamanho pequeno. Isso ocorre porque o altura relativa de letras minúsculas para maiúsculas é um fator chave em legibilidade.

Como o font-size-adjust ajuda

A propriedade font-size-adjust permite ajustar a fonte substituta para melhorar corresponder à primeira fonte. O exemplo a seguir mostra as duas fontes mostradas antes, desta vez a segunda fonte foi ajustada para corresponder à primeira.

.
Usar font-size-adjust.

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

.
Uso de font-size-adjust com a métrica de fonte ch-width.

Para ver todos os valores possíveis, consulte o Documentação do MDN para font-size-adjust.

Confira seu site usando a fonte substituta e veja se um pouco de o ajuste com font-size-adjust pode ajudar os leitores que usam a fonte substituta tenham uma experiência melhor, especialmente agora estão disponíveis em todos os lugares!