Ajuste de tamanho do CSS para @font-face

Quando uma fonte da Web é carregada, agora é possível ajustar a escala para normalizar os tamanhos das fontes do documento e evitar a mudança de layout ao alternar entre as fontes.

Adam Argyle

Considere a seguinte demonstração, em que o font-size é um 64px consistente, e a única diferença entre cada um desses cabeçalhos é o font-family. Os exemplos à esquerda não foram ajustados, têm um tamanho final inconsistente. Os exemplos à direita usam size-adjust para garantir que 64px seja o tamanho final consistente.

Neste exemplo, as ferramentas de depuração do layout de grade CSS do Chrome DevTools são usadas para mostrar alturas.

Esta postagem aborda um novo descritor de fonte CSS chamado size-adjust. Ele também demonstra algumas maneiras de corrigir e normalizar tamanhos de fonte para uma experiência do usuário mais tranquila, sistemas de design consistentes e um layout de página mais previsível. Um caso de uso importante é otimizar a renderização de fontes da Web para evitar Cumulative Layout Shift (CLS, na sigla em inglês).

Compatibilidade com navegadores

  • Chrome: 92.
  • Borda: 92.
  • Firefox: 92.
  • Safari: 17.

Origem

Confira uma demonstração interativa do espaço do problema. Tente mudar a família tipográfica com o menu suspenso e observe:

  1. As diferenças de altura nos resultados.
  2. Mudanças de conteúdo visualmente impactantes.
  3. Mover áreas de destino interativas (o menu suspenso pula).

Como dimensionar fontes com o size-adjust

Introdução à sintaxe:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}
  1. Cria uma família tipográfica personalizada chamada Adjusted Typeface.
  2. Usa size-adjust para aumentar o tamanho de cada glifo para 150% do tamanho padrão.
  3. Afetará apenas o único tipo de letra importado.

Use o tipo de letra personalizado acima desta forma:

h1 {
  font-family: "Adjusted Typeface";
}

Como reduzir o CLS com trocas de fonte perfeitas

No gif a seguir, veja os exemplos à esquerda e como há uma mudança quando a fonte é alterada. Este é apenas um exemplo pequeno com um único elemento de título, e o problema é muito perceptível.

O exemplo à esquerda tem a mudança de layout, o da direita não.

Para melhorar a renderização de fontes, uma ótima técnica é usar fontes para a troca de aparelho. Renderizar um carregamento rápido fonte do sistema para mostrar o conteúdo primeiro e, em seguida, troque por uma fonte da Web quando a fonte da Web terminar de carregar. Com isso, você terá o melhor dos dois mundos: a conteúdo seja visível o mais rápido possível, e você tem uma página bem estilizada sem sem sacrificar o tempo do usuário pelo conteúdo. No entanto, o problema é que, às vezes, quando a fonte da web é carregada, ela desloca toda a página ao redor, pois apresenta uma tamanho de caixa um pouco diferente.

mais conteúdo significa mais potencial de mudança de layout quando a fonte muda

Ao colocar size-adjust na regra @font-face, ele define um ajuste de glifo global para a fonte. O tempo certo levará a uma mudança visual mínima, uma troca perfeita. Para criar uma troca perfeita, ajuste manualmente ou faça um teste size-adjust calculadora por Malte Ubl.

Escolha uma fonte da Web do Google e receba um snippet @font-face pré-ajustado.

No início desta postagem, a correção do problema do tamanho da fonte foi feita por tentativa e erro. O size-adjust foi empurrado no código-fonte até que o mesmo cabeçalho em Cookie e Arial renderizasse o mesmo 64px que Press Start 2P naturalmente. Alinhei duas fontes ao tamanho desejado.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

Calibrando fontes

Você, como autor, determina os alvos de calibração para normalizar a escala da fonte. Você pode normalizar em Times, Arial ou uma fonte do sistema e ajustar as fontes personalizadas para combinar. Também é possível ajustar as fontes locais de acordo com o conteúdo transferido por download.

Estratégias para calibração de size-adjust:

  1. Destino remoto:
    ajuste as fontes locais para as fontes transferidas por download.
  2. Alvo local
    : ajuste as fontes transferidas para fontes de destino locais.

Exemplo 1: destino remoto

Considere o snippet a seguir, que ajusta o tamanho de uma fonte disponível localmente corresponder a uma fonte personalizada src remota. Uma fonte personalizada remota é o alvo da calibragem, talvez uma fonte de marca:

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

Neste exemplo, a fonte local Arial está se ajustando para carregar uma fonte personalizada, para uma troca perfeita.

Essa estratégia tem a vantagem de oferecer a designers e desenvolvedores a mesma fonte para tamanho e tipografia. A marca é o alvo da calibragem. Essa é uma ótima notícia para os sistemas de design.

Ter uma família tipográfica de marca como destino também é como a calculadora de Malte funciona. Escolha uma fonte do Google, e ela vai calcular como ajustar o Arial para trocar sem problemas. Confira um exemplo de CSS Roboto da calculadora, em que o Arial é carregado e nomeado como "Roboto-fallback":

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

Para criar um ajuste totalmente entre plataformas, consulte o exemplo a seguir, que fornece duas fontes locais substitutas ajustadas para antecipar uma fonte de marca.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

Exemplo 2: segmentação local

Considere o snippet a seguir, que ajusta uma fonte personalizada da marca para corresponder a Arial:

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

Essa estratégia tem a vantagem de renderizar sem ajustes e, em seguida, ajustar as fontes recebidas para corresponder.

Ajuste melhor com ascent-override, descent-override e line-gap-override

Se a escalagem genérica de glifos não for ajuste suficiente para suas estratégias de design ou carregamento, confira algumas opções de ajuste mais refinadas que funcionam com size-adjust. O ascent-override, descent-override, e line-gap-override no momento estão implementadas no Chromium 87+ e no Firefox 89+.

tesouras acima e assoprar as palavras, demonstrando as áreas os recursos podem ser cortados

ascent-override

Compatibilidade com navegadores

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: incompatível.

Origem

O descritor ascent-override define a altura acima da linha de base de uma fonte.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

O título vermelho (não ajustado) tem espaço acima das letras maiúsculas A e O, enquanto o título azul foi ajustado para que o altura da letra se encaixe bem na caixa de contorno geral.

descent-override

Compatibilidade com navegadores

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: não é compatível.

Origem

O descritor descent-override define a altura abaixo da linha de base do fonte.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

O título em vermelho (não ajustado) tem espaço abaixo do D e O valores de referência, e os valores título foi ajustado para que as letras fiquem confortáveis na linha de base.

line-gap-override

Compatibilidade com navegadores

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: não é compatível.

Origem

O descritor line-gap-override define a métrica de espaçamento entre linhas da fonte. Esta é a fonte recomendada para espaçamento de linha ou espaçamento externo.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

O título em vermelho (não ajustado) não tem line-gap-override, basicamente está no 0%, embora o título azul tenha sido ajustado em 50%, criando espaço acima e abaixo das letras, conforme adequado.

Como tudo funciona em conjunto

Cada uma dessas substituições oferece uma maneira extra de cortar o excesso da caixa delimitadora de texto segura da Web. Você pode personalizar a caixa de texto para uma apresentação precisa.

Conclusão

O recurso CSS @font-face size-adjust é uma maneira interessante de personalizar os caixa delimitadora de texto dos seus layouts da Web para melhorar a experiência de troca de fontes evitando assim a mudança de layout para os usuários. Para saber mais, confira estes recursos:

Foto de Kristian Strand no Unsplash