15

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, junto com suas novas propriedades oferecem possibilidades bem interessantes.

Com as Variable Fonts podemos ter algo desse tipo:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui


Mas minhas dúvidas são:

  • As Variable Fonts já têm um bom suporte dos navegadores? Todos os browsers modernos aceitam 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, tipo .otf por exemplo?
  • Elas oferecem recursos e tratamentos tipográficos para melhorar a acessibilidade e a experiência do usuário?
  • Qual a diferença entre uma Fonte Normal e uma Variable Fonts na hora da animação?

2 Respostas 2

13

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:

6
  • Por que é mais performático? Se é mais flexível e "vem tudo junto", ou seja, não da pra carregar apenas os estilos da fonte que deseja, a tendência é algo menos performático. Que milagre é esse que as Variable Fonts fazem?
    – Costamilam
    Commented 25/10/2018 às 1:01
  • Então, você tem um arquivo só que contém todas essas variações (negrito, itálico, regular, entre outras). Se você já trabalhou com desenvolvimento direto de sites sabe que muitas vezes precisamos importar vários arquivos, por exemplo, Roboto Light, Roboto Bold, Roboto Italic, entre outros para poder aplicar os diferentes tipos de especificações para as fontes. Sabendo disso, na hora de carregar a página teria que fazer várias requisições ao servidor, e isso poderia custar tempo e dados, pois são 3 arquivos com tamanhos diferentes. Ao usar variable fonts você econimiza esses dados. Commented 25/10/2018 às 2:24
  • Isso creio que você entendeu, mas o que acontece é que as variable fonts possuem um ou mais eixos, onde cada um fornece uma variação entre os diferentes extremos de uma letra (negrito, itálico, inclinações, tudo...). Você tem um controle maior sobre as variações. Esse é o milagre das variable fonts. É por isso que só precisa de um arquivo, que geralmente é mais leve que carregar vários arquivos para aplicar diferentes estilos a mesma fonte. Commented 25/10/2018 às 2:24
  • 1
    Seria legal comentar das propriedades custom. Além dos eixos pré-definidos, o autor pode colocar outras variações arbitrárias. Todas são definidas por um identificador de 4 caracteres.
    – Largato
    Commented 25/10/2018 às 3:40
  • @Bacco essa parte dos FONT FEATURES é bem interessante! Tem algumas tipo essa que dão um efeito bem legal harbortype.com/rocher-color e outras tipo a Dunbar que tem uns 20 font features
    – hugocsl
    Commented 25/10/2018 às 11:41
1

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.

inserir a descrição da imagem aqui

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .