Tenho escutado bastante o termo Variable Fonts, e que esse seria um novo padrão que a Web deve adotar como um todo em breve… Não sei se isso realmente procede, mas parece que esse novo “formato” de fonts, juntos com suas novas propriedades oferecem possibilidades bem interessantes.

Com as Variable Fonts podemos ter algo desse tipo:

Mas minhas dúvidas são:

• As Variable Fonts já têm um bom suporte dos navegadores? Todos os browsers modernos aceitas as Variable Fonts?
• Quais são as novas propriedades do CSS como wght e wdth que podemos usar para trabalhar com essas fonts?
• 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 tio .otf por exemplo?
• Elas oferecem recursos e tratamentos tipográficos para melhorar a acessibilidade e a experiencia do usuário?
• Qual a diferença entre uma Fonte Normal e uma Variable Fonts na hora da animação?

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:

• Site com variable fonts
• Coisas estranhas que variable fonts podem fazer
• Exemplo de animação 1
• Exemplo de animação 2
• Exemplo de animação 3

Referências:

• Variable Fonts on the Web Using CSS
• Documentação da MDN
• What are variable fonts and how do they benefit UX?

Variable Fonts – Como o próprio nome supõe, são fontes variáveis.

Existem inúmeros benefícios para esta tecnologia, acho que a principal é que foi desenvolvida por essas pequenas empresas :
Microsoft, Google, Apple e Adobe. Um unico arquivo, mais velocidade na entrega, um carregamento mais rápido…

Respondendo perguntas

As Variable Fonts já têm um bom suporte dos navegadores? Todos os
browsers modernos aceitas as Variable Fonts?

Falando em relação a browser desktop, sim!
Todos os browsers atuais já aceitam.

Uma observação a ser feita aqui é que o IE não aceita em nenhuma versão.

Outro problema você teria com o “mobile”

Quais são as novas propriedades do CSS como wght e wdth que podemos
usar para trabalhar com essas fonts?

Propriedades:

• susi – podemos chamar de “Super Size”
• temp – podemos chamar de “Temperatura”
• yest – hm… deixa a fonte mais grossa…
• grvt – Vamos bincar com a gravidade, isso mesmo! haha
• DIST – podemos chamar de “Distorção”
• wght – podemos afirmar que esse cara aumenta ou diminui a espessura da font
• wdth – alarga ou aperta … haha
• BVEL – Profundidade ?
• SHDW – Sombreamento
• slnt – Aqui você faz isso : TESTE hahah
• opsz – Zoom ? temos também.
• cntr – Contraste da font
• ital – Irmão do cara ali em cima “slnt”
• STLE – Modificamos o estilo

Existem outros porém esses seriam os mais utilizados, você pode ver eles funcionando aqui :

QUERO VER ISSO NA PRATICA!

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 tio .otf por exemplo?

Pergunta simples, resposta mais simples ainda, sim! Você tem um ganho de performance por se tratar apenas de um binário, pode esperar mais velocidade e entendimento mais rápido.

Elas oferecem recursos e tratamentos tipográficos para melhorar a
acessibilidade e a experiencia do usuário?

Então, essa parte é com você! exatamente, você vai controlar e desenhar a font da sua forma, você quem vai ditar se o usuário vai ter uma experiencia boa ou não!

Qual a diferença entre uma Fonte Normal e uma Variable Fonts na hora da animação?

Devido ao seu grande número de eixos o ganho é extremamente notável comparado a uma font normal, e falando de performance vamos comparar com uma font normal ?

Então, aqui está uma breve comparação:

Roboto: doze arquivos de fonte, doze variantes.
Fontes variáveis: um arquivo de fonte, variantes ilimitadas.
Como você já pode imaginar, nossas opções tipográficas crescem incrivelmente com fontes variáveis.

Referências:

medium

google dev

v-font