Ajuste de tamanho do CSS para @font-face

À medida que uma fonte da Web é carregada, agora é possível ajustar a escala dela para normalizar os tamanhos de fonte do documento e evitar mudanças de layout ao alternar entre 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 e 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 de layout de grade CSS do Chrome DevTools são usadas para mostrar as alturas.

Esta postagem explora um novo descritor de tipo 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 o mudança de layout cumulativa (CLS, na sigla em inglês).

Browser Support

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

Source

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 desagradáveis.
  3. Áreas de destino interativas em movimento (o menu suspenso fica pulando).

Como dimensionar fontes com 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 um tipo de letra personalizado chamado Adjusted Typeface.
  2. Usa size-adjust para aumentar cada glifo em 150% do tamanho padrão.
  3. Afeta apenas a única família tipográfica importada.

Use o typeface personalizado acima desta forma:

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

Como reduzir o CLS com troca de fontes sem interrupções

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

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

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 webfont quando ela terminar de carregar. Assim, você tem o melhor dos dois mundos: o conteúdo fica visível o mais rápido possível, e você tem uma página bem estilizada sem sacrificar o tempo do usuário para o conteúdo. O problema é que, às vezes, quando a fonte da Web é carregada, ela muda toda a página, já que é apresentada em uma altura de caixa ligeiramente diferente.

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

Ao colocar size-adjust na regra @font-face, você define um ajuste global de glifo para a família tipográfica. Fazer isso no momento certo vai levar a uma mudança visual mínima e uma troca perfeita. Para criar uma troca perfeita, ajuste manualmente ou use esta calculadora de ajuste de tamanho (link em inglês) de 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 de tamanho da fonte foi feita por tentativa e erro. size-adjust foi ajustado 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 a um tamanho de fonte de destino.

@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');
}

Calibragem de fontes

Você, como autor, determina as metas de calibragem para normalizar a escala da fonte. Você pode normalizar em Times, Arial ou uma fonte do sistema e ajustar as fontes personalizadas para corresponder. Ou você pode ajustar as fontes locais para corresponder ao que você baixa.

Estratégias para calibragem de size-adjust:

  1. Destino remoto:
    ajuste as fontes locais para as fontes baixadas.
  2. Segmentação local:
    ajusta as fontes baixadas para as fontes de segmentação 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 src remota. Uma fonte personalizada remota é o destino da calibragem, talvez uma fonte da 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á sendo ajustada em antecipação a uma fonte personalizada carregada, para uma troca perfeita.

Essa estratégia tem a vantagem de oferecer aos designers e desenvolvedores a mesma família tipográfica para dimensionamento e tipografia. A marca é a meta de calibragem. Essa é uma ótima notícia para sistemas de design.

Ter uma família tipográfica da marca como destino também é como a calculadora de Malte funciona. Escolha uma família tipográfica do Google e ela vai calcular como ajustar a Arial para trocar com ela sem problemas. Confira um exemplo de CSS do Roboto da calculadora, em que a 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 de substituição 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 snippet a seguir, que ajusta uma fonte personalizada da marca para corresponder à 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 mais preciso com ascent-override, descent-override e line-gap-override

Se o escalonamento genérico de glifos não for um 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 no Firefox 89+.

tesoura acima e sopre as substituições de palavras, demonstrando as áreas que os recursos podem cortar

ascent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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 a altura da maiúscula se encaixe perfeitamente na caixa delimitadora geral.

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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 bem na linha de base.

line-gap-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

O descritor line-gap-override define a métrica de espaçamento entre linhas 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, 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 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 delimitadora de texto dos seus layouts da Web para melhorar a experiência de troca de fontes e evitar mudanças de layout para os usuários. Para saber mais, confira estes recursos:

Foto de Kristian Strand no Unsplash