Fontes variáveis em produção: como entregá-las sem destruir a performance

Uma fonte variável é um arquivo com pesos infinitos, e os times que as entregam direito economizam bytes e ganham expressividade. Os times que entregam errado carregam fontes de 800 kilobytes e bloqueiam a primeira renderização por animações que ninguém vai ver. A diferença não está na escolha da fonte. Está na estratégia de produção.

Uma fonte variável é um arquivo com pesos infinitos

Uma fonte variável traz todos os pesos, inclinações e larguras dentro de um único arquivo, com eixos entre os quais você pode interpolar. Esse é todo o argumento de venda e também todo o trade-off. Uma única requisição de rede substitui de quatro a sete requisições de fonte estática. O arquivo é maior que qualquer peso estático individual, mas menor que o conjunto completo de pesos estáticos somado. Esse é o acordo.

O formato é OpenType com dados de variação embutidos. O navegador interpola entre os extremos dos eixos na hora da renderização, o que significa que você ganha font-weight: 350 ou font-weight: 723 de graça, e não apenas os inteiros que a fundição de tipos resolveu entregar. É isso que torna possível o padrão de animação de peso no hover, e é isso que faz uma implementação descuidada carregar um arquivo de 600 kilobytes para um site que usa só dois pesos.

Os quatro eixos que valem o envio

Peso, inclinação, tamanho óptico, largura. A maioria dos sites em produção precisa de dois ou três desses, e entregar mais eixos do que você usa é desperdício de bytes.

A especificação OpenType define cinco eixos registrados: peso (wght), largura (wdth), inclinação (slnt), itálico (ital) e tamanho óptico (opsz). Além desses, as fundições podem definir eixos customizados para qualquer coisa, de grade a expressividade. Eixos customizados são divertidos em um espécime tipográfico. Quase nunca valem o tamanho de arquivo em produção. Fique nos quatro registrados, a menos que seu design exija algo diferente de forma explícita.

O peso é o cavalo de batalha

O eixo de peso substitui os quatro a sete arquivos de peso estático que a maioria dos sites entrega, e é o eixo que paga a conta das fontes variáveis sozinho. Um site que entrega Regular, Medium, SemiBold, Bold e ExtraBold como arquivos estáticos faz cinco requisições de fonte. Uma fonte variável com eixo de peso faz uma, e entrega todos os valores intermediários de graça.

O CSS é font-weight: 300 até font-weight: 900 em qualquer elemento. Valores intermediários como font-weight: 450 são válidos e renderizam corretamente. Confira a documentação da faixa de eixos da fundição antes de presumir que uma fonte variável cobre toda a faixa de 100 a 900. Algumas entregam uma faixa menor e vão limitar em silêncio, o que produz degraus sutis mas feios no lugar de transições suaves.

A inclinação destrava itálicos de verdade

Um eixo de inclinação de verdade permite ir de vertical a itálico em qualquer valor, algo que a maioria dos pares de fontes estáticas não consegue sem um segundo arquivo. A distinção entre slnt (inclinação) e ital (itálico) importa: a inclinação é uma faixa contínua de vertical a oblíquo, enquanto o itálico é um interruptor binário que troca para um desenho itálico separado, opticamente corrigido.

Para texto de corpo, o eixo de itálico com um itálico óptico adequado é quase sempre a escolha certa. Para títulos que você pretende animar, a inclinação é o eixo que você quer. O CSS é font-style: oblique -10deg, com o valor em graus mapeado para a faixa do eixo. Teste a inclinação no tamanho real do seu título antes de fechar um valor. Ângulos extremos de inclinação ficam piores em tamanhos pequenos do que o espécime da fundição sugere.

O tamanho óptico mantém o display vivo

O tamanho óptico ajusta contraste, altura-x e detalhe de acordo com o tamanho renderizado, que é a diferença entre uma fonte de display e uma fonte de texto embutida em uma única fonte. Uma tipografia desenhada para texto de corpo em 12px tem detalhes simplificados, contraformas abertas e espaçamento generoso. Um corte de display em 80px tem contraste mais marcado, espaçamento mais fechado e detalhes mais refinados. O tamanho óptico entrega os dois em um arquivo.

A propriedade CSS é font-optical-sizing: auto, que deixa o navegador aplicar os ajustes ópticos certos com base no font-size declarado. Você também pode defini-lo manualmente com font-variation-settings: 'opsz' 72 para um título de 72px. Fontes que suportam esse eixo direito, sendo Inter Display versus Inter Text o exemplo canônico, foram desenhadas com o tamanho óptico como recurso de primeira classe. Fontes que adicionam um eixo opsz como pensamento tardio raramente entregam uma diferença visual relevante. Saiba qual delas você está comprando.

A largura é o eixo editorial

Um eixo de largura permite comprimir títulos e expandir citações em destaque sem trocar de fonte, que é o movimento que faz layouts editoriais cantarem. A propriedade CSS é font-stretch, e ela aceita valores em porcentagem: font-stretch: 75% para condensado, font-stretch: 125% para expandido.

Esse eixo merece seu tamanho de arquivo em sites com layouts editoriais responsivos. Um título de 120px no desktop pode precisar ser condensado para caber na coluna em um mobile de 375px, e um eixo de largura resolve isso com uma única @media query no lugar de um segundo carregamento de fonte. A Roboto Flex entrega uma das faixas de eixo de largura mais amplas em uma fonte variável pronta para produção, e vale estudá-la se você pretende usar esse eixo a sério. Para sites de marketing com títulos de largura fixa, pule esse eixo por completo.

Variável versus estática, a árvore de decisão

Fontes variáveis ganham quando você usa três ou mais pesos, anima a tipografia ou precisa de tamanho óptico. Fora isso, fique com estática. O ponto de equilíbrio costuma ser de dois a três pesos, e a conta muda conforme seus requisitos de cobertura de idiomas.

Um site que entrega Regular e Bold provavelmente está melhor com dois arquivos estáticos que somam de 40 a 60 kilobytes do que com uma fonte variável de 120 a 200 kilobytes. A conta pende de forma decisiva para a variável quando você passa de três pesos ou adiciona animação aos requisitos.

O subsetting corta o arquivo pela metade

O subsetting descarta os glifos que você não usa, e em um site de marketing isso significa que uma fonte variável de 600 kilobytes vira 200 kilobytes sem mudança visível. Uma fonte variável completa traz todos os glifos que a fundição desenhou: latim, latim estendido, cirílico, grego, operadores matemáticos, símbolos de moeda e ligaturas que você nunca vai usar. Uma fonte variável com subsetting traz só o que o seu conteúdo precisa.

A ferramenta para isso é o pyftsubset, da biblioteca fonttools. Um comando básico de subset latino:

pyftsubset font.woff2 \ --output-file=font-subset.woff2 \ --flavor=woff2 \ --unicodes=U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD \ --layout-features="kern,liga,calt,rlig"

Mantenha os recursos de layout kern, liga, calt e rlig. Remova todo o resto, a menos que o design use algo explicitamente. Passe o resultado por um compressor WOFF2 se a ferramenta não tiver cuidado da compressão automaticamente.

Latim, latim estendido e faixas de idioma

A estratégia de subsetting certa é um arquivo latino mais um arquivo de extensão de idioma por locale, carregado apenas quando necessário. A maioria dos sites de marketing e de produto serve principalmente conteúdo em latim. Entregue o subset latino como padrão e carregue os conjuntos de caracteres estendidos pelo descritor unicode-range no @font-face, que diz ao navegador para buscar um arquivo só quando encontrar caracteres correspondentes na página.

@font-face { font-family: 'YourFont'; src: url('/fonts/yourfont-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'YourFont'; src: url('/fonts/yourfont-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

O navegador baixa apenas os arquivos que correspondem aos caracteres da página atual. Uma página em francês carrega o arquivo de latim estendido. Uma página em inglês não. É assim que o Google Fonts entrega em escala, e é o padrão certo para copiar nas suas próprias fontes variáveis.

Carregando sem jank

Uma fonte variável que carrega depois da primeira renderização vai deslocar o layout, e a receita de carregamento é preload mais font-display swap mais um fallback com métricas compatíveis. Isso não é opcional. Uma fonte variável é maior que um único peso estático, o que significa que demora mais para chegar, o que significa que a janela para deslocamento de layout é maior.

O link de preload vai no <head>, antes de qualquer folha de estilo:

<link rel="preload" href="/fonts/yourfont-latin.woff2" as="font" type="font/woff2" crossorigin >

A declaração font-display: swap no seu @font-face diz ao navegador para renderizar com o fallback imediatamente e trocar pela fonte variável quando ela chegar. Uma fonte variável é um arquivo com pesos infinitos, e a estratégia de carregamento errada vai carregá-la duas vezes à toa se você misturar declarações com e sem preload entre folhas de estilo. Um preload por arquivo de subset. Essa é a regra inteira.

---

Quer fontes variáveis que chegam com metade dos bytes e nunca fazem a página pular? Contrate a Brainy e vamos entregar sua stack tipográfica de produção com os eixos certos, os subsets certos e a receita de carregamento que mantém o Lighthouse verde.

---

Fallbacks com métricas compatíveis

Um fallback de sistema com métricas compatíveis usa size-adjust, ascent-override e descent-override para fazer o fallback renderizar no mesmo ritmo da fonte variável. Sem isso, o font-display: swap troca texto invisível por um deslocamento de layout quando a fonte variável chega. Com a compatibilização de métricas, a troca é visualmente imperceptível.

@font-face { font-family: 'YourFont Fallback'; src: local('Arial'); ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; size-adjust: 107%; }

Os valores exatos dependem da sua fonte variável. Ferramentas como Fontaine e next/font geram esses valores automaticamente. Se você está construindo em Next.js, o next/font cuida de toda a cadeia de fallback. Se não, o Fontaine é o caminho mais rápido para valores de override corretos sem calculá-los na mão.

Quatro padrões de animação que as fontes variáveis destravam

Hover-weight, scroll-weight, hover-slant e reveal-width. Essas quatro animações só são possíveis com fontes variáveis, e merecem o tamanho do arquivo quando usadas com moderação. Jogue as quatro em uma página e ela parece uma demo técnica, não um design.

Hover-weight faz a transição do font-weight de 400 para 700 no hover. A interpolação é suave porque os dados do eixo estão na fonte. transition: font-weight 0.15s ease no elemento é todo o CSS. Funciona em links de navegação, textos de call to action e rótulos interativos.

Scroll-weight controla o font-weight pela posição de rolagem, usando um listener de scroll em JavaScript que mapeia scrollY para um valor na faixa do eixo. Mantenha a faixa curta: 300 a 700 parece intencional, 100 a 900 parece bug. Cabe em hero sections, onde a tipografia fica mais pesada conforme o usuário rola para dentro do conteúdo.

Hover-slant faz a transição de font-style: oblique 0deg para font-style: oblique -10deg no hover. É a alternativa mais sutil ao hover-weight e parece mais refinada em links de navegação e elementos interativos inline. Combine com hover-weight só se a tipografia foi desenhada para suportar os dois ao mesmo tempo.

Reveal-width anima o font-stretch como parte de uma animação de entrada. O texto entra em font-stretch: 75% e se expande até font-stretch: 100% ao longo de 400ms. Combinado com um fade-in, é um dos padrões de revelação tipográfica mais limpos disponíveis. Pule no texto de corpo. Ele pertence só à tipografia de display e a hero headlines.

Sete sites entregando fontes variáveis em escala

GitHub, Stripe Press, Vercel, Linear, The New York Times, Apple Music e Figma entregam fontes variáveis em produção, e os padrões que eles compartilham são os que valem copiar.

GitHub entrega Mona Sans e Hubot Sans, ambas fontes variáveis customizadas feitas para a marca GitHub. Só o eixo de peso na maioria dos contextos de UI. Nenhuma animação, exceto em seções de marketing ocasionais. Os tamanhos de arquivo são enxutos porque eles fazem subsetting agressivo por grupo de idioma.

Stripe Press usa uma fonte variável de display customizada para títulos editoriais. Eles forçam o eixo de peso, com títulos de display em pesos fortes e legendas em pesos leves a partir de um único arquivo. O tamanho óptico é evidente nos tamanhos maiores de título. É o uso de fonte variável mais ambicioso editorialmente desta lista.

Vercel entrega a Geist, sua própria fonte variável, em Geist Sans e Geist Mono. O eixo de peso cobre a faixa completa. A fonte é open source, o subsetting latino é limpo, e ela carrega rápido o bastante para servir de referência de como é uma fonte variável bem entregue em um app Next.js de produção.

Linear entrega a Inter como fonte variável. O eixo de peso percorre os pesos de UI, ficando na faixa óptica mais estreita apropriada para uma interface densa. É o uso mais conservador desta lista e também um dos mais corretos para uma interface de produto cheia de dados, onde animação seria ruído.

The New York Times usa uma serifa variável customizada para tipografia de display. Os eixos de peso e de tamanho óptico estão ambos ativos, e as transições entre display e corpo usam o eixo de tamanho óptico para mudar a renderização dos caracteres. É o mais sofisticado que o uso de fontes variáveis em produção chega em escala editorial.

Apple Music entrega a San Francisco na forma variável, com os eixos de peso e de tamanho óptico ativos. As transições de eixo entre texto grande e pequeno são suaves o bastante para que a maioria dos usuários nem perceba que a fonte é variável, que é o objetivo correto. A fonte deve desaparecer dentro da experiência de leitura.

Figma entrega a Inter Display como fonte variável em todo o aplicativo. Se você está fazendo seleção de fonte display para uma UI de produto, estude como o Figma equilibra a Inter em pesos pequenos de UI contra a Inter Display em tamanhos grandes de título. A disciplina na faixa de pesos vale ser copiada direto.

O checklist de fonte variável pré-deploy

Rode isto antes de entregar uma fonte variável e você vai pegar os bugs que mordem em produção.

• Subsetting verificado. Rode o pyftsubset com seus intervalos unicode alvo. Confirme que o arquivo do subset latino tem menos de 200KB. Confira por amostragem que os caracteres que seu conteúdo usa estão presentes na saída.
• Eixos documentados. Saiba quais eixos a fonte entrega e a faixa mínima e máxima de cada um. Não declare font-weight: 800 se o eixo termina em 700. Ele vai limitar em silêncio e seu design vai ficar errado.
• Preload configurado. Um <link rel="preload"> por arquivo de subset, no <head>, com o atributo crossorigin, apontando apenas para o arquivo latino principal. Fazer preload de um arquivo que você não usa desperdiça banda.
• font-display configurado. Todo bloco @font-face tem font-display: swap. Confirme na aba Network do DevTools que as fontes não estão bloqueando a renderização de nenhum recurso do caminho crítico.
• Métricas do fallback compatibilizadas. Um bloco @font-face para o fallback de sistema com size-adjust, ascent-override e descent-override calculados. Verifique limitando a rede para Slow 3G no DevTools e checando o deslocamento de layout no carregamento. O CLS deve ser 0 ou perto de 0.
• Eixos usados pelo design confirmados. Todo eixo declarado no CSS é de fato usado no design final. Eixos no arquivo da fonte mas fora do CSS ainda adicionam bytes. Se você não usa largura, considere subsetting de faixa de eixo para cortar esses bytes.
• Pontuação do Lighthouse conferida. Rode o Lighthouse na URL de produção com a fonte aplicada. LCP e CLS relacionados à fonte devem estar verdes. Se não estiverem, as métricas do fallback estão erradas ou falta o preload.
• Headers CORS confirmados. Fontes variáveis carregadas de uma CDN ou origem externa precisam de headers Access-Control-Allow-Origin. Confira a aba Network em busca de erros de CORS. Uma falha de CORS produz um fallback de fonte silencioso, difícil de diagnosticar em produção.

FAQ

O que é uma fonte variável e como ela é diferente de uma fonte estática?

Uma fonte variável é um único arquivo de fonte que contém toda a faixa do design de uma tipografia, controlada por eixos como peso, largura, inclinação e tamanho óptico. Uma fonte estática é um retrato único em um peso e estilo. A diferença prática é que uma fonte variável permite usar font-weight: 350 ou animar o peso com suavidade em CSS, enquanto fontes estáticas só permitem os valores específicos que a fundição escolheu entregar como arquivos separados.

Fontes variáveis realmente melhoram a performance?

Depende de quantos pesos você está carregando. Se você entrega dois pesos estáticos que somam 60KB, trocar por uma fonte variável de 180KB é uma regressão de performance. Se você entrega cinco pesos que somam 300KB, trocar por uma fonte variável com subsetting de 120KB é uma vitória clara. O argumento de performance das fontes variáveis é real, mas só vale depois que você passa do limite de três pesos e faz o subsetting corretamente.

Qual é a melhor fonte variável para design de UI?

A Inter é a fonte variável mais amplamente usada em design de UI. Seu eixo de peso é bem calibrado para uso em tela, faz subsetting de forma limpa e o Figma a entrega como referência de produção. A Roboto Flex é a escolha certa quando você precisa de uma faixa de eixos ampla para layouts editoriais responsivos. A Recursive vale ser estudada se você quer uma sans variável e uma mono variável da mesma família tipográfica. Para princípios de web design que pedem uma fonte display expressiva, Fraunces e Playfair Display entregam bons eixos de tamanho óptico e de peso.

Como uso font-variation-settings em CSS?

font-variation-settings é a propriedade de baixo nível para definir eixos de fontes variáveis diretamente, usando a tag de quatro letras do eixo e um valor numérico: font-variation-settings: 'wght' 450, 'wdth' 85. Para eixos registrados como peso e largura, prefira as propriedades CSS de alto nível (font-weight, font-stretch), porque elas herdam e se compõem corretamente. Use font-variation-settings apenas para eixos customizados que não têm uma propriedade CSS de alto nível.

Fontes variáveis podem causar deslocamento de layout?

Podem, e são mais propensas a causar deslocamento de layout do que fontes estáticas, porque o arquivo é maior e demora mais para carregar. A correção é font-display: swap combinado com um fallback de métricas compatíveis. Essa combinação torna a troca visualmente imperceptível. Sem o fallback de métricas compatíveis, o font-display: swap troca texto invisível por um pulo de layout visível quando a fonte chega. Os dois problemas se resolvem juntos ou não se resolvem.

Fontes variáveis são suportadas em todos os navegadores?

Fontes variáveis são suportadas em todos os navegadores modernos: Chrome, Firefox, Safari e Edge. A base é sólida o bastante para que você não precise de um fallback de fonte estática por compatibilidade de navegador. A porcentagem de usuários em um navegador que não suporta fontes variáveis é menor que um por cento na maioria dos sites em produção. Ofereça um fallback de fonte de sistema para esse caso extremo, não uma pilha de fontes estáticas.

Como funciona o subsetting de fontes variáveis?

O subsetting remove do arquivo da fonte os glifos que o seu conteúdo nunca vai renderizar, usando uma ferramenta como o pyftsubset da biblioteca Python fonttools. Você especifica os intervalos de caracteres unicode de que precisa, e a ferramenta remove todo o resto. Uma fonte variável completa pode trazer 3.000 glifos. Um subset só latino mantém cerca de 250. O resultado é uma saída visual idêntica para conteúdo em latim com aproximadamente um terço do tamanho do arquivo. Veja o verbete de subsetting no glossário para a referência completa de comandos.

A mudança que as fontes variáveis realmente destravam

Fontes variáveis não são uma curiosidade tipográfica. São uma forma de entregar mais expressão com menos bytes, e os times que as tratam como ferramenta de produção são os que fazem tipografia melhor com menos custo de rede.

A arquitetura de variáveis do Figma que move os design systems modernos se mapeia naturalmente para os eixos de fontes variáveis. Um token de font-weight no Figma é um valor de eixo na fonte. Combine um sistema de tokens bem estruturado com uma fonte variável corretamente com subsetting e você obtém decisões de design que se propagam do arquivo de design à produção sem ambiguidade. Some a isso um sistema de cores OKLCH nos estados de hover e você constrói interações de produto que parecem pensadas, e não montadas.

O critério para fontes variáveis em produção não é "entregamos uma fonte variável". O critério é subsetting correto, preload bem feito, métricas de fallback compatíveis e apenas os eixos que o design usa. Esse é o padrão que separa os times que fazem tipografia de produção dos times que fazem teatro tipográfico.

Quer fontes variáveis que chegam com metade dos bytes e nunca fazem a página pular? Contrate a Brainy e vamos entregar sua stack tipográfica de produção com os eixos certos, os subsets certos e a receita de carregamento que mantém o Lighthouse verde.