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 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 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 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, 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:
- As diferenças de altura nos resultados.
- Mudanças visuais bruscas no conteúdo.
- Mover áreas de destino interativas (o menu suspenso pula).
Como dimensionar fontes com o size-adjust
Uma introdução à sintaxe:
@font-face {
font-family: "Adjusted Typeface";
size-adjust: 150%;
src: url(some/path/to/typeface.woff2) format('woff2');
}
- Cria uma família tipográfica personalizada chamada
Adjusted Typeface
. - Usa
size-adjust
para dimensionar cada glifo até 150% do tamanho padrão. - Afeta apenas a família tipográfica importada.
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 o tipo de fonte. O tempo certo leva a uma mudança
visual mínima, uma troca perfeita. Para criar uma troca perfeita, ajuste manualmente ou teste esta
calculadora
de ajuste de tamanho
da Malte Ubl (link em inglês).
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
fazia naturalmente.
Alinhei duas fontes ao tamanho 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');
}
Como calibrar fontes
Você, como autor, determina os alvos de calibração para normalizar a escala da fonte. É possível normalizar Times, Arial ou uma fonte do sistema e, em seguida, ajustar as fontes personalizadas de acordo com elas. Também é possível ajustar as fontes locais de acordo com o conteúdo transferido por download.
Estratégias para calibrar size-adjust
:
- Destino remoto:
ajuste as fontes locais para as fontes transferidas por download. - Local de destino:
ajuste as fontes transferidas por download para as fontes de destino 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 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 a designers e desenvolvedores a mesma fonte de tamanho e tipografia. A marca é o alvo da calibragem. Essa é uma ótima notícia para os sistemas de design.
Ter uma família tipográfica de marca como destino 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 locais substitutas ajustadas para antecipar 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 local
Considere o snippet a seguir, 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 as fontes recebidas para corresponder.
Ajustes mais precisos com ascent-override
, descent-override
e line-gap-override
Se o escalonamento genérico de glifos não for 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 versões mais recentes e no Firefox 89 e versões mais recentes.
ascent-override
O descritor ascent-override
define a altura acima do valor de referência 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 do limite se encaixe perfeitamente na caixa delimitadora 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 dos valores de referência 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 intervalo de linha 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, ele 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 fonte
evitando a mudança de layout para os usuários. Para saber mais, confira estes
recursos:
- Especificação de fontes CSS de nível 5
- Tamanho do ajuste no MDN
- Gerador de @font-face de troca contínua
- Cumulative Layout Shift (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