Ajuste de tamanho do CSS para @font-face

Agora, ao carregar uma fonte da Web, você pode ajustar a escala dela para normalizar os tamanhos de fonte do documento e evitar a mudança de layout ao alternar entre fontes.

Adam Argyle

Considere a seguinte demonstração em que 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 e têm um tamanho final inconsistente. Os exemplos à direita usam size-adjust para garantir que 64px tenha o tamanho final consistente.

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 layout de página mais previsível. Um caso de uso importante é otimizar a renderização de fontes da Web para evitar a Cumulative Layout Shift (CLS, na sigla em inglês).

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 visuais bruscas no conteúdo.
3. Mover áreas de destino interativas (o menu suspenso pula).

Como dimensionar fontes com o size-adjust

Uma 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 dimensionar cada glifo até 150% do tamanho padrão.
3. Afeta apenas a família tipográfica importada.

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 abaixo, observe 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.

Para melhorar a renderização de fontes, uma ótima técnica é a troca de fontes. Renderize uma fonte do sistema de carregamento rápido para mostrar o conteúdo primeiro e, em seguida, troque por uma fonte da Web quando ela terminar de carregar. Isso oferece o melhor dos dois mundos: o conteúdo fica visível o mais rápido possível, e você tem uma página com um estilo bonito sem sacrificar o tempo do usuário para o conteúdo. No entanto, o problema é que, às vezes, quando a fonte da Web é carregada, ela muda a página inteira, já que aparece em um tamanho de caixa ligeiramente diferente.

Ao colocar size-adjust na regra @font-face, ele define um ajuste de glifo global para o tipo de fonte. O tempo certo leva a uma mudança visual mínima, uma troca perfeita. Para criar uma troca perfeita, ajuste manualmente ou teste esta calculadora de ajuste de tamanho da Malte Ubl (link em inglês).

No início desta postagem, a correção do problema do tamanho da fonte foi feita por tentativa e erro. 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 fazia 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');
}

Como calibrar fontes

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

Estratégias para calibrar size-adjust:

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

Exemplo 1: destino remoto

Considere o snippet a seguir, que ajusta uma fonte disponível localmente para corresponder ao tamanho de uma fonte personalizada de 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 de 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.

Ajustes mais precisos com ascent-override, descent-override e line-gap-override

Se o escalonamento genérico de glifos não for ajuste suficiente para seu design ou estratégias de carregamento, confira algumas opções de ajuste mais refinadas que funcionam com size-adjust. As propriedades ascent-override, descent-override e line-gap-override estão implementadas no Chromium 87 e versões mais recentes e no Firefox 89 e versões mais recentes.

ascent-override

O descritor ascent-override define a altura acima do valor de referência 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 a altura do limite se encaixe perfeitamente na caixa delimitadora geral.

descent-override

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

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

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

line-gap-override

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

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

O título vermelho (não ajustado) não tem line-gap-override, ou seja, ele está em 0%, enquanto o título azul foi ajustado em 50%, criando espaço acima e abaixo das letras.

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 a caixa de contorno de texto dos layouts da Web para melhorar a experiência de troca de fonte evitando a mudança de layout para os usuários. Para saber mais, confira estes recursos:

• Especificação de fontes CSS de nível 5
• Tamanho do ajuste no MDN
• Gerador de @font-face de troca contínua
• Cumulative Layout Shift (CLS) no web.dev
• Uma nova maneira de reduzir o impacto no carregamento de fontes: descritores de fonte CSS

Foto de Kristian Strand no Unsplash