Uma fonte variável é um único arquivo de fonte que pode armazenar uma gama contínua de variações de estilo de fonte (com diferentes larguras, pesos ou tamanhos).

As fontes variáveis têm novas estruturas de dados introduzidas na especificação OpenType 1.8. Essas estruturas de dados permitem o empacotamento compacto de dois ou mais estilos de uma família de fontes em um único arquivo de fonte.

Uma fonte variável contém um único conjunto de contornos, a partir do qual quase ilimitadas instâncias podem ser derivadas por conjuntos de dados. Isso ocorre pela definição de um conjunto de variações de contorno dentro da fonte, que constituem um espaço de design de um ou múltiplos eixos, dentro do qual muitas instâncias de fonte podem ser interpoladas.

Use a opção Exibir apenas fontes variáveis de Fontes variáveis na seção Filtros, em Navegar > Fontes, da Monotype Fonts para visualizar as fontes variáveis.

Observação: Todas as fontes variáveis disponíveis na Monotype Fonts estão rotuladas como

Diferença entre fontes estáticas e fontes variáveis

Você pode entender a diferença entre fontes estáticas e fontes variáveis na tabela abaixo:

	Fonte estática	Fonte variável
Definições	Fontes que possuem estilos fixos e requerem um arquivo diferente para cada variação.	Fontes que permitem que muitas variações diferentes de uma tipografia sejam armazenadas em um único arquivo.
Arquivo diferente para cada variação	Sim	Não.
Melhora o desempenho do site	Não	Sim
Oferece flexibilidade de design	Não	Sim
É compatível com transições em CSS	Não	Sim
Compressão	Não	Sim
Tipografia responsiva	Não	Sim
Facilidade de distribuição	Não	Sim
Tipografia acessível	Não	Sim
Número de estilos inclusos	Único	Mais de um
Suporte de navegador	Sim	Sem suporte a todos os navegadores da Web
Disponibilidade de efeitos de texto dinâmico	Não	Sim

Benefícios das fontes variáveis

Existem muitos benefícios ao usar fontes variáveis, como:

Compressão
O tamanho de uma fonte variável é menor do que o tamanho coletivo das fontes que representam a mesma faixa de estilo discreto na fonte variável. Por exemplo, o tamanho coletivo de duas fontes estáticas usadas separadamente em um projeto será maior do que o tamanho de uma única fonte variável com essas duas fontes. Quanto mais estilos você adicionar a uma fonte variável, maior será a economia.
Melhora o desempenho do site
Um site pode carregar um único arquivo de fonte variável e ajustar as variações, se necessário. Isso melhora a velocidade de carregamento e o desempenho do site.
Facilidade de distribuição
Efeitos de texto dinâmico
As fontes variáveis podem ser animadas usando transições ou animações CSS, permitindo a criação de efeitos de texto dinâmico que alteram o peso, a largura, a inclinação ou outros atributos ao longo do tempo.
Maior variabilidade
É possível embalar uma ampla gama de estilos em um único arquivo de fonte. A especificação OpenType 1.9 define tags para cinco eixos específicos:
- Peso
- Largura
- Tamanhos ópticos
- Itálico (versus romano)
- Inclinado (versus romano)
No entanto, a especificação OpenType permite que construamos qualquer variação imaginável por meio de eixos definidos pelo usuário.

A Monotype possui muitas famílias de fontes projetadas para incluir uma variedade de pesos ou larguras. Por exemplo, Helvetica Now, Cotford, Kairos Sans e Futura Now.
Tipografia responsiva
As fontes variáveis oferecem tipografia responsiva e ajuste de aplicações. Otimizando a legibilidade em dispositivos específicos por meio do ajuste de peso, contraste ou outras variáveis. É como um ajuste de borda; exceto que podemos aplicar o ajuste de forma mais direcionada do que um filtro que afeta X e Y da mesma maneira.

Observação: Na tipografia, o ajuste de borda refere-se ao processo de ajustar o espaçamento, curvas e ângulos de uma forma de letra para alcançar legibilidade e harmonia visual ótimas.
Oferece eficiência criativa
Fontes variáveis são flexíveis, eficientes e têm potencial criativo, tornando-se um recurso poderoso para designers criativos.
Tipografia acessível
É possível fornecer uma experiência mais inclusiva com as variações em fontes variáveis, adaptando-se às necessidades dos leitores e seus ambientes.

Limitações das fontes variáveis

Uma fonte variável pode apresentar as seguintes limitações, dependendo do caso de uso:

Uma fonte variável é uma forma compactada de mais de um estilo. No entanto, se você estiver interessado apenas em usar dois ou três pesos de uma grande família variável, pode acabar perdendo a economia de espaço. Assim, embora as fontes variáveis possam reduzir o tamanho do arquivo, elas também podem aumentá-lo se muitas variações desnecessárias forem incluídas.
Nem todas as fontes estão disponíveis no formato variável.

Dados de fontes mais recentes são geralmente projetados para serem interpoláveis e podem ser facilmente desenvolvidos como uma fonte variável. Fontes mais antigas, que foram desenhadas separadamente como designs estáticos, podem apresentar maior variabilidade estrutural ao longo de um eixo e não são facilmente construídas como fontes interpoláveis.

Por exemplo, Times New Roman é um caso preocupante, pois as mudanças na direção do estresse, assim como alterações na forma e no alinhamento das serifas na versão minúscula, resultam em interpolações estranhas.

Existem algumas famílias de fontes no mundo onde um estilo ereto é desenhado como interpolável com seu correspondente em itálico. E há muitas fontes oblíquas ou inclinadas que podem funcionar, mas essa variabilidade entre os extremos acrescenta valor para os clientes.
Nem todos os navegadores suportam fontes variáveis.
Consulte suporte de navegadores para mais detalhes.
Ajustar as variações de uma fonte dentro do arquivo de fonte variável pode ser complexo e requer um bom entendimento de CSS e design de fontes.

Compatibilidade de navegadores com fontes variáveis

Nossos arquivos de fonte WOFF e WOFF2 são compatíveis com todos os navegadores modernos. Diferentes navegadores ou versões de navegadores podem suportar formatos distintos.

Compatibilidade de navegadores com WOFF

Internet Explorer 9 e posterior
Edge 12 e posterior
Firefox 3.6 e posterior
Chrome 5 e posterior
Safari 5.1 e posterior
Opera 11.5 e posterior
iOS Safari 5 e posterior
Android 4.4 e posterior
Blackberry 7 e posterior
Opera Mobile 12 e posterior
Chrome Android 70 e posterior
Firefox Android 63 e posterior
Internet Explorer Mobile 10 e posterior
UC for Android 11.8 e posterior
Samsung Internet 4 e posterior
QQ 1.2 e posterior
Baidu 7.12 e posterior

Compatibilidade de navegadores para WOFF2

Edge 14 e posterior
Firefox 39 e posterior
Chrome 36 e posterior
Safari 12 e posterior
Opera 23 e posterior
iOS Safari 10 e posterior
Android 67 e posterior
Opera Mobile 46 e posterior
Chrome Android 70 e posterior
Firefox Android 63 e posterior
Samsung Internet 4 e posterior
QQ 1.2 e posterior
Baidu 7.12 e posterior

Casos de uso de fontes variáveis

Download de fontes variáveis

Observação: Usuários selecionados da empresa podem baixar arquivos de fontes.

Não há download disponível durante o período de 30 dias de teste. Entre em contato com [email protected] para qualquer dúvida.

Siga os passos abaixo para baixar fontes variáveis da plataforma Monotype Fonts:

Clique no ícone de Opções de sincronização e download da fonte variável desejada.
Abra a aba Opções de download.
Selecione seu formato de arquivo preferido (como CFF ou TTF) para download.
Selecione pesos e estilos de fonte individuais para download ou clique em Baixar família para baixar toda a família.

Instalação de fontes variáveis

Mac

Siga os passos abaixo para instalar uma fonte no Mac:

Dê um clique duplo no arquivo .zip baixado para extrair seu conteúdo.
Você tem duas opções para instalar uma fonte no Mac:
Para ativar uma fonte, arraste os arquivos de fonte para a pasta Fonts localizada dentro da pasta Library: Macintosh HD/Library/Fonts. Você também pode usar o atalho Cmd + Shift + G.
Utilize o Font Book, o aplicativo de gerenciamento de fontes do Mac OS, para gerenciar suas fontes instaladas.
Dê um clique duplo na fonte e uma janela do Font Book aparecerá.
Clique em Instalar fontes para realizar a instalação.
Consulte a seção de suporte do site da Apple em http://support.apple.com/kb/HT2509 para mais informações.
Para acessar suas novas fontes instaladas, reinicie qualquer aplicativo em uso.

Windows

Windows XP ou posterior:

Clique com o botão direito no arquivo .zip e selecione Extrair tudo. Isso criará uma nova pasta contendo suas fontes no local de sua escolha.

Qualquer outra versão do Windows:

Acesse Local Disk (C:) › Windows › Fonts. Localize a pasta que você expandiu a partir do arquivo .zip baixado e arraste os arquivos de fonte para a pasta Fonts.

Windows 7 e posterior:

Clique com o botão direito nos arquivos de fonte extraídos e selecione Instalar ou Instalar para todos os usuários.
Para acessar as novas fontes instaladas, reinicie qualquer aplicativo em uso.

Sincronização de fontes variáveis

A sincronização de fontes envolve a transferência de fontes do painel do navegador ao aplicativo Monotype para desktop.

As fontes e famílias de fontes sincronizadas com o aplicativo Monotype para desktop estão automaticamente acessíveis na maioria dos aplicativos criativos. Não é necessário que os usuários baixem arquivos de fonte individuais.

A sincronização é o método principal de acesso a fontes por meio da Monotype Fonts.

Siga os passos abaixo para sincronizar uma fonte variável com o aplicativo Monotype para desktop:

Clique no ícone de Opções de sincronização e download para sincronizar a fonte variável desejada.
Na aba Sincronizar com o aplicativo Monotype, selecione seu formato de arquivo preferido (como CFF ou TTF).
Sincronize os pesos e estilos individuais da fonte ou clique em Sincronizar família para sincronizar toda a família.

Como dessincronizar fontes variáveis

Siga os passos abaixo para dessincronizar uma fonte variável sincronizada:

Clique no ícone de Opções de sincronização e download para a fonte variável sincronizada.
Na aba Sincronizar com o aplicativo Monotype, clique em Dessincronizar.

Como usar fontes variáveis

Atualmente, as fontes variáveis comercialmente disponíveis são produzidas no formato TTF. É possível solicitar um conjunto de fontes estáticas correspondentes ao seu pedido de fonte variável. Elas podem ser instaladas simultaneamente com a fonte variável.

As fontes variáveis podem ser especialmente úteis para equipes de Web e design, oferecendo uma economia de tamanho de arquivo em comparação com famílias estáticas, o que é particularmente relevante para aplicações Web. A economia de tamanho de arquivo depende do design e da quantidade de estilos, sendo geralmente proporcional ao número de estilos na família. Além disso, as fontes variáveis oferecem maior flexibilidade para a equipe de design de UI.