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.

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.

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 mudança cumulativa de layout (CLS).

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 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 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 a fonte. O tempo certo levará a uma mudança visual mínima, uma troca perfeita. Para criar uma troca perfeita, ajuste manualmente ou use esta calculadora de ajuste de tamanho do Malte Ubl.

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

Como calibrar 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. Ou você pode ajustar as fontes locais para corresponder ao que você fez o download.

Estratégias para calibrar size-adjust:

1. Alvo remoto:
   ajuste as fontes locais para as fontes salvas.
2. Alvo local
   :ajuste as fontes transferidas para fontes de destino locais.

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 aos designers e desenvolvedores a mesma fonte para dimensionamento e tipografia. A marca é o alvo da calibragem. Essa é uma ótima notícia para os sistemas de design.

Ter um tipo de letra de marca como alvo 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 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.

Ajustes mais precisos 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. 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 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

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

line-gap-override

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 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 fontes e evitar a mudança de layout para os usuários. Para saber mais, confira estes recursos:

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

Foto de Kristian Strand no Unsplash