Ajuste de tamanho do CSS para @font-face

À medida que uma fonte da Web é carregada, agora você pode ajustar a escala para normalizar o tamanho da fonte do documento e evitar a mudança de layout ao alternar entre fontes.

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 explora um novo descritor de font-face de CSS chamado size-adjust. Ele também demonstra algumas maneiras de corrigir e normalizar os tamanhos das fontes para melhorar a experiência do usuário, 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 mudança de layout cumulativa (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. O conteúdo visualmente desagradável muda.
3. Movendo áreas de destino interativas (o menu suspenso pula).

Como dimensionar fontes com 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 um tipo de letra personalizado chamado 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 a família tipográfica personalizada acima da seguinte maneira:

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

Como mitigar a CLS com troca perfeita de fontes

No gif a seguir, observe os exemplos à esquerda e como há uma mudança quando a fonte é alterada. Este é apenas um pequeno exemplo 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 troque por uma fonte da Web quando a fonte da Web terminar de carregar. Com isso, você tem o melhor dos dois mundos: o conteúdo fica visível o mais rápido possível, e você recebe uma página bem estilizada sem sacrificar o tempo do usuário para acessar o conteúdo. No entanto, o problema é que, às vezes, quando a fonte da Web é carregada, ela muda toda a página, já que apresenta um tamanho de altura de caixa ligeiramente diferente.

Ao colocar size-adjust na regra @font-face, ele define um ajuste global de glifo para a face da fonte. Nesse momento certo, haverá uma mudança visual mínima, uma troca perfeita. Para criar uma troca perfeita, ajuste à mão ou use esta calculadora de tamanho de ajuste da Malte Ubl (link em inglês).

No início desta postagem, a correção do problema de tamanho da fonte foi feita por tentativa e erro. size-adjust foi deslocado no código-fonte até que o mesmo cabeçalho em Cookie e Arial renderizasse o mesmo 64px que Press Start 2P naturalmente. Alinhar duas fontes ao tamanho de fonte 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');
}

Calibrar fontes

Você, como autor, determina os objetivos de calibração para normalizar a escala da fonte. Você pode normalizar usando Times, Arial ou uma fonte do sistema e, em seguida, ajustar as fontes personalizadas. Também é possível ajustar as fontes locais para corresponder ao que você transferiu por download.

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

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

Exemplo 1: destino remoto

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

@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á sendo ajustada antes de uma fonte personalizada carregada, para uma troca perfeita.

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

A calculadora de Malte também funciona com uma família tipográfica de marca como alvo. Escolha uma fonte do Google e ele calculará como ajustar a Arial para trocar por ela. Veja um exemplo de Roboto CSS da calculadora, em que Arial é carregada e chamada de "Roboto-fallback":

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

Para criar um ajuste totalmente multiplataforma, consulte o exemplo a seguir, que fornece duas fontes substitutas locais ajustadas em antecipação a uma fonte da 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 seguinte snippet 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 todas as fontes recebidas para corresponder.

Aprimoramentos com ascent-override, descent-override e line-gap-override

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

ascent-override

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 da letra A e O maiúsculos, enquanto o título azul foi ajustado para que a altura do limite se encaixe bem na caixa limitante 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 das linhas de base 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 lacuna de linha da fonte. Esse é o intervalo de linha recomendado ou o cabeçalho externo da 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, essencialmente, 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 adicional de cortar o excesso da caixa delimitadora de texto seguro da Web. Você pode adaptar a caixa de texto para uma apresentação mais precisa.

Conclusão

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

• Especificações de fontes CSS de nível 5
• Ajuste de tamanho no MDN
• Gerador de @font-face com troca perfeita
• Mudança de layout cumulativa (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 (em inglês)