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

Compatibilidade com navegadores

  • Chrome: 92.
  • Edge: 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 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.

O exemplo à esquerda tem mudança de layout, 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 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.

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 use esta calculadora de ajuste de tamanho do 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. 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.

tesouras acima e sopram as substituições de palavras, demonstrando as áreas que os recursos podem aparar para

ascent-override

Compatibilidade com navegadores

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: não é compatí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 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

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. 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:

Foto de Kristian Strand no Unsplash