Ajuste de tamanho do CSS para @font-face

Ao carregar uma fonte da Web, agora é possível ajustar a escala 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.

Nesta postagem, vamos analisar um novo descritor de tipo de fonte do 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).

Browser Support

• 92
• 92
• 92
• 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. Mover áreas de destino interativas (o menu suspenso se move).

Termo-chave : família de fontes x família tipográfica: uma família tipográfica é conhecida pelo nome da família mais o tipo de fonte. Helvetica Bold se refere à família tipográfica em negrito específica, enquanto Helvetica se refere genericamente a toda a família de mais de 8 famílias tipográficas (normal, negrito, itálico etc.). Com o CSS @font-face, você vai lidar com famílias tipográficas, mesmo que precise escrever font-family para usá-las.

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 uma família tipográfica personalizada chamada Adjusted Typeface.
2. Usa size-adjust para aumentar cada glifo em 150% do tamanho padrão.
3. Afeta apenas a família tipográfica importada.

Use a família tipográfica personalizada acima da seguinte forma:

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

Aviso : se o segundo título na demonstração acima não for maior que o primeiro, seu navegador não é compatível com size-adjust.

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

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.

O exemplo à esquerda tem mudança de layout, mas 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-a por uma fonte da Web quando o carregamento dela for concluído. 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 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 desloca toda a página, já que é apresentada em um tamanho de altura de caixa ligeiramente diferente.

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

Ao colocar size-adjust na regra @font-face, ele define um ajuste global de glifo para o tipo de fonte. Se você fizer isso no momento certo, a mudança visual será mínima, uma troca perfeita. Para criar uma troca perfeita, ajuste manualmente ou use esta calculadora de ajuste de tamanho de Malte Ubl.

Escolha uma fonte da Web do Google e receba um snippet @font-face pré-ajustado.

No início deste post, 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 renderizou 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');
}

Calibrando fontes

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

Estratégias para calibrar o size-adjust:

1. Destino remoto:
   ajuste as fontes locais para as fontes baixadas.
2. Segmentação por local:
   ajusta as fontes baixadas para as fontes de segmentação por local.

Exemplo 1: destino remoto

Considere o snippet a seguir, que ajusta uma fonte disponível localmente para que o tamanho corresponda a 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 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 fonte para dimensionamento e tipografia. A marca é o objetivo da calibragem. Essa é uma ótima notícia para os sistemas de design.

Ter uma família tipográfica de marca como meta também é como a calculadora de Malte funciona. Escolha uma fonte do Google Fonts e ele vai calcular como ajustar a Arial para que ela seja trocada perfeitamente. Confira um exemplo de CSS da Roboto na calculadora, em que a Arial é carregada e nomeada como "Roboto-fallback":

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

Aviso : a ordem de font-family é essencial. É onde a ordem e a prioridade são definidas. Verifique se a família tipográfica que você mais quer está em primeiro lugar. Além disso, talvez local(Arial) não esteja disponível em todos os dispositivos do usuário. Por isso, é importante fornecer vários substitutos na família de fontes.

Para criar um ajuste totalmente multiplataforma, confira o exemplo a seguir, que fornece duas fontes de substituição locais ajustadas em antecipação a 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 por local

Considere o snippet a seguir, que ajusta uma fonte personalizada de 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 que correspondam.

Ajuste mais preciso com ascent-override, descent-override e line-gap-override

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

ascent-override

Browser Support

• 87
• 87
• 89
• 

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

descent-override

Browser Support

• 87
• 87
• 89
• 

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 das letras D e O, enquanto o título azul foi ajustado para que as letras fiquem bem ajustadas na linha de base.

line-gap-override

Browser Support

• 87
• 87
• 89
• 

Source

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

@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. É possível personalizar a caixa de texto para uma apresentação precisa.

Aviso : se alguma das demonstrações acima não mostrar diferenças, seu navegador não é compatível com as substituições.

Conclusão

O recurso CSS size-adjust @font-face é 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ção de fontes CSS nível 5
• Ajuste de tamanho no MDN
• Gerador de troca @font-face perfeita
• Cumulative Layout Shift (CLS) no web.dev
• Uma nova maneira de reduzir o impacto do carregamento de fontes: descritores de fonte CSS