Fontes variáveis, explicadas para designers

As fontes variáveis são ficheiros de fonte que contêm uma gama contínua de estilos em vez de um conjunto fixo. Em vez de ficheiros separados para Regular, Medium, Semibold e Bold, um ficheiro variável contém todos os pesos entre o mais leve e o mais pesado, e muitas vezes outras gamas também, como a largura ou o tamanho ótico. Escolhes qualquer ponto ao longo de cada gama, chamada eixo, por isso 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 explica o que fazem os eixos, quando vale a pena usar fontes variáveis e como configurá-las em CSS. Para uma visão mais ampla sobre a escolha de tipos de letra, vê bases da tipografia e tipos de letra da marca.

Eixos das fontes variáveis e o que faz cada um

Um eixo é uma dimensão de design que o designer de tipos desenhou nos seus extremos; a fonte interpola tudo o que fica entre eles. Há cinco eixos registados na especificação OpenType, com etiquetas normalizadas de quatro letras. Os designers de tipos podem acrescentar eixos personalizados, que se escrevem em maiúsculas.

É nos eixos personalizados que as fontes ganham personalidade. A Roboto Flex tem um eixo de grau (GRAD) que muda a espessura do traço sem mudar a largura das letras. A Fraunces tem SOFT para terminais mais arredondados e WONK para as suas formas de letra mais excêntricas. A Recursive tem os eixos MONO e CASL, que a levam de sem serifa a monoespaçada e de linear a descontraída. Podes explorá-las todas no Google Fonts, que te deixa filtrar por famílias variáveis.

Porque é que o tamanho ótico é o que mais importa

O peso fica com a atenção, mas o tamanho ótico é muitas vezes o eixo mais útil. Os tipos de metal eram cortados em separado para cada tamanho: os tamanhos pequenos tinham traços mais robustos, alturas de x maiores e espaçamento mais largo; os tamanhos grandes eram mais finos, com mais contraste e espaçamento mais apertado. As fontes digitais perderam isso quando um só contorno passou a ser escalado para todos os tamanhos. Um eixo opsz traz isso de volta.

Com font-optical-sizing: auto (a predefinição nos navegadores), uma fonte com eixo opsz ajusta-se sozinha ao tamanho de letra que defines. Não precisas de fazer nada além de escolher uma fonte que tenha o eixo. Isto ajuda sobretudo em designs com um título grande e texto de apoio pequeno na mesma família, que é o caso da maioria das publicações para redes sociais e das páginas de entrada.

Quando vale a pena usar fontes variáveis

O tamanho do ficheiro é a contrapartida honesta. Um ficheiro variável leva os dados de todos os estilos, por isso costuma ser maior do que um só peso estático mas mais pequeno do que vários. Se um site só carrega Regular e Bold, dois ficheiros estáticos podem bem ser mais leves. Se carrega quatro pesos e um itálico, um ficheiro variável costuma ganhar, e ficas com todos os pesos intermédios de graça.

Os pesos intermédios são mais úteis do que parecem. Texto claro sobre um fundo escuro ou colorido parece mais pesado do que o mesmo peso sobre branco, por isso podes compor texto branco sobre um gradiente em 460 em vez de 500 para igualar oticamente uma versão escura sobre claro. O efeito é subtil, 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

Declara a fonte uma vez com uma gama para cada eixo e depois usa as propriedades normais, como font-weight e font-stretch. Recorre a font-variation-settings só para eixos personalizados, porque substitui todos os eixos de uma vez e não é herdado de forma amigável. O guia de fontes variáveis da MDN trata dos pormenores.

@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;
}

Montar um sistema tipográfico variável

1. 1

   Verifica os eixos

   Abre a página de amostra da fonte e anota todos os eixos e as suas gamas. Confirma que as línguas e os caracteres de que precisas estão incluídos na versão variável.

2. 2

   Define funções, não pesos

   Decide os pesos por função: texto corrido, ênfase, subtítulo, título, etiqueta. Um sistema de cinco valores afinados é melhor do que nove normalizados usados ao acaso.

3. 3

   Afina para os fundos

   Cria um peso ligeiramente mais leve para texto claro sobre escuro e compara os dois no tamanho real.

4. 4

   Deixa o tamanho ótico trabalhar

   Mantém font-optical-sizing: auto, a não ser que tenhas uma razão para o fixar, e compara títulos e legendas lado a lado.

5. 5

   Escreve tudo

   Regista o ficheiro da fonte, as gamas dos eixos e os valores de cada função no teu guia de estilo da marca, para que ninguém os reconstrua de memória.

As fontes variáveis recompensam a contenção. O objetivo não é usar todos os valores, mas escolher os poucos exatos que fazem o teu texto ler-se bem em todo o lado onde aparece, de um parágrafo de 16 px a um título de destaque de 200 px.