# Fontes variáveis explicadas para designers

[Canonical HTML page](https://gradiently.design/pt-br/guide/variable-fonts)

Um arquivo, todos os pesos intermediários e letras que se ajustam sozinhas ao tamanho em que você as usa. As fontes variáveis mudam o que um sistema tipográfico consegue fazer, se você souber quais eixos usar.

## The short version

- Uma fonte variável é um único arquivo de fonte que contém uma faixa contínua de estilos, como todos os pesos do fino ao black, em vez de um arquivo por estilo.
- Cada faixa é chamada de eixo; os cinco eixos padrão são peso, largura, itálico, inclinação e tamanho óptico.
- As fontes variáveis permitem escolher valores intermediários, como peso 450 ou 650, e ajustar a tipografia com precisão para cada tamanho e fundo.
- Todos os principais navegadores atuais suportam fontes variáveis, e muitas famílias do Google Fonts estão disponíveis como arquivos variáveis.
- Um arquivo variável pode ser maior que um estilo estático, então a economia aparece quando você usa vários pesos ou larguras da mesma família.

**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](https://gradiently.design/pt-br/guide/typography-basics) e [fontes da marca](https://gradiently.design/pt-br/guide/brand-fonts).

## 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.

| Eixo | Etiqueta | O que muda | Propriedade CSS |
| --- | --- | --- | --- |
| Peso | `wght` | Espessura do traço, do fino ao black | `font-weight` |
| Largura | `wdth` | Larguras de letra do condensado ao expandido | `font-stretch` |
| Tamanho óptico | `opsz` | Detalhe, contraste e espaçamento ajustados ao tamanho | `font-optical-sizing` |
| Inclinação | `slnt` | Um ângulo oblíquo sem mudar a forma das letras | `font-style: oblique` |
| Itálico | `ital` | Troca para as formas de letra itálicas de verdade | `font-style: italic` |
| Personalizado | ex.: `GRAD`, `SOFT` | Qualquer coisa que o designer definir | `font-variation-settings` |

Os cinco eixos registrados, mais os personalizados. Nem toda fonte variável tem todos os eixos: confira o que a sua inclui.

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](https://fonts.google.com/variablefonts), 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.

Um design vertical com uma única palavra em tamanho muito grande sobre um fundo gradiente

Tamanhos display: um eixo de tamanho óptico aumenta o contraste e fecha o espaçamento conforme a letra cresce.

Um design vertical com um título e um texto de apoio pequeno na mesma família tipográfica

Tamanhos de texto: a mesma família abre e reforça o texto pequeno para que ele sobreviva à tela do celular.

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

### Vale a pena

- Você usa três ou mais pesos ou larguras de uma família
- Você quer pesos intermediários para equilibrar o texto em fundos diferentes
- Títulos e texto pequeno dividem uma família com eixo de tamanho óptico
- Você quer animar peso ou largura em trabalhos com movimento

### Provavelmente não

- Você só usa um ou dois pesos
- O corte estático é menor e você nunca precisa de outros estilos
- A sua ferramenta ou plataforma não permite escolher valores de eixo
- A versão variável não tem um estilo ou idioma de que você precisa

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](https://gradiently.design/pt-br/guide/text-on-gradient) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) traz os detalhes.

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

Eixos padrão pelas propriedades padrão; eixos personalizados pelo `font-variation-settings`. As faixas no `@font-face` precisam corresponder ao que o arquivo contém.

> **Animar o peso mexe no texto** Na maioria das fontes, letras mais pesadas também são mais largas, então animar o peso no hover faz o texto em volta se deslocar. Use uma fonte com eixo de grade ou reserve a animação de peso para palavras isoladas e títulos.

## Como montar um sistema tipográfico variável

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. **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. **Ajuste para os fundos** Crie um peso um pouco mais leve para texto claro sobre escuro e compare os dois no tamanho real.
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. **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](https://gradiently.design/pt-br/guide/brand-style-guide), 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](https://gradiently.design/pt-br/guide/display-fonts) de 200 px.

## FAQ

### O que é uma fonte variável?

Uma fonte variável é um arquivo de fonte que contém uma faixa contínua de estilos ao longo de um ou mais eixos, como peso ou largura, para que você possa escolher qualquer valor intermediário em vez de alguns estilos fixos.

### Todos os navegadores suportam fontes variáveis?

Todos os principais navegadores atuais suportam. Consulte o [caniuse](https://caniuse.com/variable-fonts) se precisar dar suporte a navegadores muito antigos e inclua uma pilha de fontes alternativas.

### Fontes variáveis são menores que fontes estáticas?

Nem sempre. Um arquivo variável costuma ser maior que um estilo estático, mas menor que vários. A economia aparece quando você carregaria três ou mais estilos.

### O que é tamanho óptico em uma fonte?

Tamanho óptico é um eixo que ajusta detalhe, contraste e espaçamento ao tamanho em que o texto é usado, deixando o texto pequeno mais robusto e o grande mais fino. Os navegadores aplicam isso automaticamente com `font-optical-sizing: auto`.