Fontes variáveis – A tipografia na web já percorreu um longo caminho. Passamos de apenas algumas fontes básicas, baseadas em sistema, para agora ter possibilidades quase infinitas. Mas toda essa escolha leva a alguns desafios para os web designers.
O desempenho, por exemplo, pode ser impactado negativamente para todas as fontes que carregamos em uma página. Até mesmo o uso de uma única família de fontes com vários estilos (negrito, itálico, etc.), requer várias chamadas para o servidor.
Aí reside a grande promessa de fontes variáveis. De repente, não há necessidade de carregar meia dúzia de arquivos de fontes para recuperar os estilos desejados.
Em vez disso, tudo o que você precisa para uma família de fontes é incluído em um único arquivo. É um grande impulso para a eficiência e fácil de implementar.
Mais flexibilidade
Embora ganhos potenciais de desempenho possam ser a característica mais óbvia de fontes variáveis, há mais a se amar. Outro dos principais pontos de venda é que eles oferecem um nível maior de flexibilidade do que as fontes tradicionais.
Por exemplo, as fontes variáveis permitem que os designers aproveitem as transições CSS. Isso pode ser usado para criações de animações ultra suaves, à medida que uma fonte muda de um estilo para outro.
Elementos como links e navegação podem ser muito mais interessantes e únicos. Embora possa parecer um pequeno detalhe, isso nos fornece ainda outra maneira de melhorar a experiência do usuário.
Sob esse mesmo guarda-chuva, também é possível criar estilos de fonte personalizados ao usar uma fonte variável. Por causa de como essas fontes são construídas, você não precisa se contentar com estilos pré-definidos como luz ou extra negrito.
Em vez disso, você pode optar por praticamente qualquer coisa entre os dois, ou ajustar os eixos de fontes disponíveis para adaptar o tipo às suas necessidades.
Ferramenta como o Font Playground torna esses ajustes super fáceis. Eles oferecem uma interface visual para ajustar as coisas ao conteúdo do seu coração. Você não precisa ser um especialista para obter os resultados desejados. E, inclusive, fornecerá o código CSS necessário.
O ponto principal é que a tipografia na web se torna menos rígida e mais aberta à interpretação de designers. Claro, você pode usar os estilos padrão, se quiser. Mas você também tem a opção de colocar o seu próprio toque pessoal em seu projeto.
Ainda em crescimento
O número de fontes variáveis parece estar crescendo diariamente. Ainda assim, a quantidade disponível parece pequena em comparação com as fontes tradicionais.
Nesse ponto, o Google Fonts não oferece nenhuma fonte variável em sua biblioteca padrão. Embora as fontes Amstelvar, Cabin e Nunito estejam disponíveis por meio de seu programa de acesso antecipado.
Mas há um número crescente de recursos alternativos. Locais como V-Fonts e Font Playground têm seleções suficientes para atender às necessidades de projetos. E vários desenvolvedores independentes começaram a publicar suas próprias famílias.
Suporte Limitado
O suporte do navegador para fontes variáveis abrange versões mais recentes dos navegadores mais modernos. Você não encontrará suporte para produtos legados como o Internet Explorer ou versões menos recentes do Chrome, Edge, Firefox e Safari.
Isso pode ou não ser um problema, dependendo do público-alvo. Naturalmente, quanto mais tempo passa, menos legado o suporte se torna. E a seleção de fontes disponíveis continuará a crescer.
A tipografia na web agradece
Fontes variáveis procuram levar a tipografia na web a um nível mais alto. Em vez de serem forçados a usar apenas os estilos disponíveis, os designers terão o poder de fazer mais.
Adicione isso ao gerenciamento simplificado de fontes e ao aumento do desempenho, e você terá algo que pode beneficiar praticamente qualquer projeto.
Não é difícil imaginar um futuro, onde fontes variáveis se tornem padrão. E quanto mais vemos fontes variáveis em ação, mais difícil é ver como ofertas mais tradicionais podem permanecer relevantes.
Tem algo a dizer sobre este artigo? Comente abaixo ou compartilhe conosco no Facebook, Twitter ou no nosso LinkedIn.
Leia também: