Antes de começar é importante saber que as variable fonts são um novo formato de fonte que oferece muita flexibilidade no estilo da fonte.
Sabe quando você baixa uma fonte da internet sempre vem um pacote de fontes (normalmente), por exemplo, para a Arial poderia ter, Arial, Arial Black, Arial Regular entre outros milhares de arquivos que você precisaria importar no CSS se quisesse usar. As variable fonts vieram para "acabar" com isso, elas permitem conter múltiplas variações para uma fonte em um único arquivo, isso mesmo, em um único arquivo. Isso permite o uso de um arquivo na web que poderá alcançar diferentes estilos de fonte. Além disso as variable fonts permitem animar e fazer transições nos estilos das fontes, o que não é possível com as fontes estáticas.
Mas enfim, agora que já conseguimos ter uma ideia de o que é e para que serve vamos as perguntas.
As Variable Fonts já têm um bom suporte dos navegadores? Todos os
browsers modernos aceitam as Variable Fonts?
Na verdade o suporte ainda não é universal, mas segundo o Can I Use cerca de 76% dos navegadores já suportam variable fonts, o que é muito bom, mas lembre-se que esse valor é da data dessa resposta e pode estar desatualizado, então consulte esse link para ver se o suporte aumentou.
Quais são as novas propriedades do CSS como wght e wdth que podemos
usar para trabalhar com essas fonts?
wght
: Controla a intensidade da fonte. O valor é setado com font-weight
.
wdth
: Controla a largura da fonte. Para isso usamos a propriedade font-stretch
.
ital
: Controla a intensidade do itálico. O valor pode ser setado com font-style
.
opsz
: Controla o tamanho óptico da fonte. A propriedade usada é font-optical-sizing
.
slnt
: Controla a inclinação da fonte. O valor pode ser setado com font-style
.
Elas oferecem uma performance melhor por ter várias estilos,
condensed, bold, italic, tudo dentro de um arquivo só sem precisar
importar vários arquivos tipo .otf por exemplo?
A maioria dos usuários da web querem páginas carregadas rapidamente, e o Google também, que disse que as páginas da web devem ser carregadas em até 2 segundos (veja esse artigo para saber mais). Sabendo disso temos a consciência que a experiência do usuário está ligada com o tempo de carregamento de um site. Logo sites que demoram a permitir interação tendem a ter menos acessos.
As variable fonts atuam nesse sentido, como você precisa de um arquivo são menos dados para carregar na página e menos requisições, o que leva a mais velocidade de carregamento.
Porém você pode estar se perguntando: mas como ela consegue carregar tudo junto em um arquivo?
O que acontece é que as variable fonts possuem um ou mais eixos, cada um fornecendo uma variação entre os diferentes extremos de uma letra (negrito, itálico, ...). Por isso precisamos só de um arquivo e não de vários.
Elas oferecem recursos e tratamentos tipográficos para melhorar a
acessibilidade e a experiência do usuário?
Para a melhor experiência do usuário a sua fonte deve ser legível, agradável e acessível.
A legibilidade de um texto refere-se a quão fáceis os caracteres são para distinguir uns dos outros, enquanto a agradabilidade refere-se a como é fácil analisar e compreender o texto. Por fim, a tipografia acessível envolve coisas como garantir que uma fonte tenha contraste suficiente em relação ao plano de fundo, o que beneficia os usuários com deficiências visuais.
E as variable fonts permitem um controle sobre todos esses elementos apontados. O que fornece uma maior acessibilidade e uma experiência agradável ao usuário.
Qual a diferença entre uma Fonte Normal e uma Variable Fonts na hora
da animação?
Existe uma grande diferença na hora de realizar uma animação com uma fonte normal e com uma variable font. As "fontes variáveis" (tradução literal) possuem, como já mencionado, uma alta flexibilidade, você pode trocar o tamanho, inclinação e realizar diversas alterações de uma maneira prática. Vou colocar alguns links na parte de dicas com exemplos de animação.
Dicas:
Referências: