Fontes variáveis explicadas para designers

Fontes variáveis são arquivos de fonte que guardam uma faixa contínua de estilos em vez de um conjunto fixo. Em vez de arquivos separados para Regular, Medium, Semibold e Bold, um arquivo variável contém todos os pesos entre o mais leve e o mais pesado, e muitas vezes outras faixas também, como largura ou tamanho óptico. Você escolhe qualquer ponto ao longo de cada faixa, chamada de eixo, então um título pode ficar no peso 680 e uma legenda no 430, se for isso que se lê melhor.

O formato chegou como parte da especificação OpenType em 2016 e hoje é suportado por todos os principais navegadores atuais e pelas principais ferramentas de design. Este guia mostra o que os eixos fazem, quando vale a pena usar fontes variáveis e como configurá-las em CSS. Para o quadro geral da escolha de fontes, veja noções básicas de tipografia e fontes da marca.

Eixos de fonte variável e o que cada um faz

Um eixo é uma dimensão do desenho que o designer de tipos desenhou nos extremos; a fonte interpola tudo o que fica no meio. Cinco eixos são registrados na especificação OpenType e têm etiquetas padrão de quatro letras. Os designers de tipos podem acrescentar eixos personalizados, que são escritos em maiúsculas.

Os eixos personalizados são onde as fontes ganham personalidade. A Roboto Flex tem um eixo de grade (GRAD) que muda a espessura do traço sem mudar a largura da letra. A Fraunces tem SOFT para terminais mais arredondados e WONK para as formas mais excêntricas. A Recursive tem os eixos MONO e CASL, que a levam de sem serifa para monoespaçada e de linear para casual. Você pode explorar todas no Google Fonts, que permite filtrar as famílias variáveis.

Por que o tamanho óptico é o que mais importa

O peso fica com a atenção, mas o tamanho óptico muitas vezes é o eixo mais útil. Os tipos de metal eram cortados separadamente para cada tamanho: os pequenos tinham traços mais robustos, altura-x maior e espaçamento mais aberto; os grandes eram mais finos, com mais contraste e espaçamento mais fechado. As fontes digitais perderam isso quando um único contorno passou a ser escalado para todos os tamanhos. Um eixo opsz traz isso de volta.

Com font-optical-sizing: auto (o padrão dos navegadores), uma fonte com eixo opsz se ajusta sozinha ao tamanho de fonte que você definir. Você não precisa fazer nada além de escolher uma fonte que tenha esse eixo. Isso ajuda especialmente em designs com um título grande e um texto de apoio pequeno na mesma família, o que descreve a maioria dos posts para redes sociais e das landing pages.

Quando vale a pena usar fontes variáveis

O tamanho do arquivo é a troca honesta. Um arquivo variável carrega os dados de todos os estilos, então costuma ser maior que um peso estático, mas menor que vários. Se um site carrega só Regular e Bold, dois arquivos estáticos podem muito bem ser mais leves. Se carrega quatro pesos e um itálico, um arquivo variável geralmente ganha, e você leva de graça todos os pesos intermediários.

Pesos intermediários são mais úteis do que parecem. Texto claro sobre fundo escuro ou colorido parece mais pesado que o mesmo peso sobre branco, então você pode usar texto branco sobre um gradiente no peso 460 em vez de 500 para igualar opticamente uma versão escura sobre claro. O efeito é sutil, mas é o que faz um sistema tipográfico parecer afinado. Texto sobre gradiente explica o problema de legibilidade mais amplo.

Como usar fontes variáveis em CSS

Declare a fonte uma vez com uma faixa para cada eixo e depois use propriedades normais como font-weight e font-stretch. Recorra ao font-variation-settings só para eixos personalizados, porque ele sobrescreve todos os eixos de uma vez e não é herdado de um jeito amigável. O guia de fontes variáveis da MDN traz os detalhes.

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-variable.woff2") format("woff2");
  font-weight: 100 900;   /* the wght range in the file */
  font-stretch: 75% 125%; /* the wdth range, if it has one */
  font-display: swap;
}

body {
  font-family: "Brand Sans", system-ui, sans-serif;
  font-weight: 420;
  font-optical-sizing: auto;
}

h1 {
  font-weight: 720;
  font-stretch: 90%;
}

.on-dark {
  font-weight: 390; /* light on dark reads heavier */
}

/* Custom axes go through font-variation-settings. */
.soft {
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

Como montar um sistema tipográfico variável

1. 1

   Confira os eixos

   Abra a página de amostra da fonte e anote cada eixo e sua faixa. Confirme que os idiomas e caracteres de que você precisa estão na versão variável.

2. 2

   Defina funções, não pesos

   Decida os pesos por função: texto corrido, ênfase, subtítulo, título, rótulo. Um sistema de cinco valores afinados vale mais que nove valores padrão usados ao acaso.

3. 3

   Ajuste para os fundos

   Crie um peso um pouco mais leve para texto claro sobre escuro e compare os dois no tamanho real.

4. 4

   Deixe o tamanho óptico trabalhar

   Mantenha font-optical-sizing: auto, a não ser que tenha um motivo para fixá-lo, e confira títulos e legendas lado a lado.

5. 5

   Registre por escrito

   Anote o arquivo da fonte, as faixas dos eixos e os valores de cada função no seu guia de estilo da marca, para que ninguém tenha de refazer tudo de memória.

As fontes variáveis recompensam a contenção. A ideia não é usar todos os valores, mas escolher os poucos exatos que fazem o seu texto se ler bem em todo lugar em que aparece, de um parágrafo de 16 px a um título display de 200 px.