Sinopse

As fontes variáveis são uma atualização do formato OpenType para versão 1.8, apresentada em 2016. Este formato OpenType é aquele que estamos acostumados a utilizar no dia-a-dia, os famosos arquivos .otf ou .ttf (sim, os .ttf atuais também são OpenType, falaremos mais sobre isso). Do ponto de vista do designer visual, de maneira rápida e direta, podemos dizer que as fontes variáveis são arquivos que permitem o ajuste de atributos, como por exemplo peso, largura, etc. Na prática, é isso aqui:

New Game: Start >
sobe a tela de apresentação...

As fonte variáveis possuem uma tecnologia desenvolvida pelas gigantes Adobe, Apple, Google e Microsoft, por algum motivo se juntaram, falaremos disso depois, vamos por partes para você não desistir deste jogo tão rápido.

Para entender o que são fontes variáveis, precisamos entender alguns conceitos do design de tipos e como funcionam os softwares fontes — sim, fontes são softwares, você instala e usa, como qualquer outra coisa no seu dispositivo (lembrando que fontes estão em todo lugar, inclusive no seu celular — e isso é importante).

O primeiro conceito que precisamos entender é o de interpolação. Se você não é um designer de tipos e está lendo este texto, deve pelo menos ser um designer visual, já deve ter passado pelo Illustrator ou talvez o After Effects.

No Illustrator, a interpolação é o famoso “Blend”. Seleciona uma forma aqui, outra ali e diz-se pro Illustrator fazer um monte de formas entre essas duas.

Na animação, tem um keyframe aqui, outro ali e tudo que está entre eles é uma interpolação também. Então, este não é um conceito exclusivo do design de tipos, é na verdade um conceito matemático, mas vamos entender como ele é útil no universo das letras.

Primeira fase: Interpolação

Eu já comentei sobre isso em outros textos, mas é sempre bom relembrar, até porque, talvez você não seja meu leitor assíduo e esteja pela primeira vez lendo algo que escrevi. Se você já sabe o que é interpolação, use o cheat code SABETUDO e avance de fase, ou fique aqui, vai que tem algo interessante.

Quando desenhamos famílias tipográficas utilizamos mestras. Mestras são como as formas principais do “Blend” ou como os keyframes. As mestras são por exemplo um peso light e um bold, ou uma largura condensada e estendida — ou tudo isso junto, ou mais ainda que isso... mas de novo, vamos por partes. 

Chamamos este caminho entre o light e o bold de eixo, lembra do slider que dá para puxar de um lado pro outro? Aquilo é um eixo. Em uma fonte não-variável, quem define os pesos para você é o designer de tipos, você não tem acesso aos eixos, e o resultado disso é o clássico – light, regular, semibold, bold, entre outros que você seleciona nos menuzinhos de fonte mundo a fora, tecnicamente chamamos estes pesos de instâncias. Na fonte variável também é possível definir instâncias, mas o usuário da fonte não está preso somente a elas.

O conceito da tecnologia usada em fontes variáveis é chamado de Multiple Masters, ele foi criada pela Adobe em 1992, bem antes da chegada do OpenType nos anos 2000. 

A partir daqui você encontrou uma pá, começamos a cavar o buraco, parabéns, você terminou a primeira fase.

Segunda Fase: O início do conceito de fontes variáveis

Durante os anos 1990, ao som de Smells Like Teen Spirit, houve a chamada Guerra dos Formatos, basicamente o que aconteceu foi uma treta entre Apple, Microsoft e Adobe para tentar estabelecer um formato de fonte padrão para a indústria do mercado editorial, lembrando que esta época esta longe de considerar a tela como prioridade. 

Se esta guerra fosse um campeonato, a Adobe dirigia o time PostScript Font (ps) enquanto Apple & Microsoft o TrueType Font (ttf). 

Os gols da rodada neste campeonato não importam na nossa história hoje, o que importa é que duas jogadas surgiram durante esse período: a tecnologia Multiple Masters da parte da Adobe e a TrueType GX do lado da Apple. 

Ambas trabalhavam com eixos de interpolação em único arquivo, na visão dos usuários, as fontes tinham praticamente a mesma cara, e ainda mais, elas tinham a mesma cara que possuem as fontes variáveis OpenType que usamos hoje. 

Mas vamos ficar mais um pouco ao som de Nirvana nos anos 1990. 

No campeonato das fontes, nas quartas de final a jogada TrueType GX, foi quebrada e derrotada, mas jamais esquecida. As Multiple Masters da Adobe venceram entraram para uso nos softwares da Adobe. 

Fontes Multiple Masters apareciam nos menus de fonte bem similares aos que temos hoje, mas você gerava uma instância através de sliders e esta nova fonte entrava no seu menu. Por exemplo, se eu criasse uma Myriad MM com peso 120 e largura 100, apareceria no menu Myriad MM wg120 wd100.

Há divergências sobre quão prático/útil era o uso deste tipo de fonte, temos que lembrar que informação esta época era de difícil acesso, ainda mais se você estava fora dos Estados Unidos e Europa. 

Em 1996, já sem Kurt Cobain, a Guerra dos Formatos mudou de cara, a Microsoft começou a trabalhar em um novo formato, traindo a Apple e se juntando a Adobe, a nova dupla, criou assim o formato OpenType. As fonte Multiple Masters não resistiram e foram descontinuadas no ano 2000.

O formato OpenType foi na verdade mais um acordo de paz do que uma traição digna de A Usurpadora por parte da Microsoft. Naquele momento, os arquivos de fonte se tornaram multiplataformas, ou seja, funcionariam nos sistemas Macintosh & Windows, além disso o formato OpenType abraçou o TrueType, então, o time .ttf existe até hoje, mas joga dentro do estádio do OpenType, ou seja, todo .ttf atual é também um .otf. Há motivos para o .ttf continuar existindo, mas esta é uma história para outra hora.

Apesar das variações nesta época saírem do campo, elas ficaram para sempre nos treinos. A tecnologia Multiple Masters é utilizada pelos designers de tipos para criar as grandes famílias tipográficas até hoje, com a mesma lógica dos tempos de Smells Like Teen Spirit. 

Parabéns, você terminou a segunda fase, bora derrotar o chefão.

Entrando no castelo: As fontes variáveis de 2016

Agora você já pegou toda base de o que é uma fonte variável (assim espero), se não entendeu, foi mal, fiz meu melhor para tentar sintetizar, segue lendo porque essa última parte independe da história toda. 

Avançamos de 2000 para 2016, nesse meio tempo teve Brasil campeão do mundo, teve o histórico 7x1, teve FHC, teve Lula, teve Dilma, teve Obama, teve iPhone, teve iPad, teve internet em alta velocidade, teve Facebook, teve Google, muitas fontes por todos esses meios.

Os computadores de alto nível vão dos desktops para a palma da mão e até para relógios. Telas de alto nível estão por todos os lados e o que há em comum nestas telas todas? Pixels, ansiedade, notificações, arraste pra tudo que é lado — sim — mas junto com isso texto, logo, fontes.

Uma pergunta interessante a se fazer é, porque as gigantes de tech Adobe, Apple, Microsoft e Google que em muitos momentos são rivais, se juntaram para trazer fontes com variação de volta? Já deu errado uma vez, o que é diferente agora?

Uma coisa é muito diferente – o tráfego de dados. Os bytes por segundo que saem de um servidor e renderizam em sua tela são em quantidades surreais, há uma coisa que a gente não costuma pensar, estes dados não estão no além, a “nuvem” não é uma nuvem, são servidores, cabos e antenas. Tudo, em algum momento está num local físico, e este local físico tem limite e custa dinheiro.

OKAY, mas e as fonte variáveis?

Elas podem estar instaladas no seu computador, mas elas podem também estar instaladas em servidores da Adobe, da Apple, do Google e da Microsoft.

TÁ, E DAÍ?

Um arquivo de fonte variável pode ser absurdamente menor do que cinquenta pesos de uma fonte tradicional, portanto, ele come menos, menos espaço em servidores, menos tráfego na internet, ou seja, menos dinheiro. 

Boss Fight: $$$ Dinheiro $$$

Chegamos no chefão, o dinheiro. Vamos então entender isso com um pouco mais de detalhes.

Vamos supor que uma família tipográfica possua arquivos fonte com 16Kb, ou seja, o NossaFonte-Regular.otf possui 16Kb. Vamos supor que esta família possui 10 estilos, pesos + itálicos, ou seja 20 arquivos de 16Kb cada, chegamos em 320Kb, mas vamos um pouco mais, vamos supor que a Nossa Fonte possui a sua versão condensada, então vamos para 40 arquivos, 640Kb. E vamos supor agora que ela tem uma versão estendida, 60 arquivos, 960kb. Vamos parar por aqui por que eu vou acabar me perdendo nas contas, mas acho que deu para entender. A Nossa Fonte está lá instalada em um servidor do Google Fonts, e tem acesso de 1 bilhão de usuários por minuto... nem sei como fazer essa conta de tráfego, mas agora parece que aqueles 960Kb começam a pesar.

A Nossa Fonte Variável deixaria de ter o peso de 60 fontes de 16kb, e passa a ter o peso de 12 fontes, 192Kb. Como assim? A fonte variável considera cada master como uma fonte, exemplificando, nosso caso teria a Nossa Fonte Thin, Nossa Fonte Black, Nossa Fonte Condensed Thin, Nossa Fonte Condensed Black e por aí vai. 

Cada instância é gerada na hora a partir de instruções de onde estão matematicamente posicionados os desenhos entre essas mestras... vamos lá... estamos no chefão, agora está um pouco mais abstrato, foco.

Apesar do quesito dinheiro é o que na minha opinião irá impôr as fontes variáveis no mercado em um curto prazo, claro que tem benefícios para os designers visuais.

Lembra das animações, dos keyframes? O design em movimento hoje é muito presente, o impresso há muitos anos perde seu protagonismo, tudo acontece nas telas, agora é possível você ajustar as fontes para uma animação por exemplo. Ou ainda, é possível você deixar uma fonte ligeiramente mais bold se estiver aplicada em um fundo preto, sem precisar instalar um semi-bold, ou qualquer coisa assim. É possível você inserir a fonte variável dentro do sistema de responsividade de um site, por exemplo deixá-la um mais condensada em uma tela pequena.

Olhando para trás, para trás, parece que as fontes Multiple Masters e TrueType GX estavam a frente de seu tempo. 

Opa, lembra da TrueType GX que perdeu naquelas quartas-de final ao som de Nirvana? Ela realmente não foi esquecida e está de volta com tudo, não é apenas a moda dos anos 90 que volta, o motor das fontes variáveis atuais são uma evolução delas, e não diretamente das Multiple Masters, que no entanto, trouxe sua interface nos softwares. Na internet, as fontes variáveis são controladas via CSS, e é possível manipular seus valores na mesma lógica dos sliders. 

Fontes variáveis chegam então para mudar a cabeça do mercado, trazer a tipografia para demandas do mundo atual, se o design é mobile first, a tipografia hoje é variable first.

Vencemos o chefão, sobe os créditos.

Créditos

ADOBE. (EUA). Multiple Master to OpenType Cross Reference. Disponível em: https://www.adobe.com/products/type/opentype/opentype-mm.html. Acesso em: 13 mai. 2019.
ADOBE. Designing Multiple Masters Typefaces. EUA: Adobe, 1997. ______. Type 1 Font Format Supplement: Technical specifications #5015. EUA: Adobe, 1994.
ATYPI , 2016, Varsóvia. Special OpenType Session... [S.l.: s.n.], 2016. Disponível em: https://youtu.be/M-vdFRtcZU0. Acesso em: 13 mai. 2019.
BLACKWELL, Lewis. 20th century type. 2. ed. Inglaterra: Laurence King, 2004.
HARALAMBOUS, Yannis. Fonts & encodings. EUA: O’Reilly, 2007.
HUDSON, John. Introducing OpenType Variable fonts. Disponível em: https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369. 2016. Acesso em: 13 mai. 2019.
MYRIAD Multiple Master Font. Youtube: Rockibitz, 2019. Disponível em: https://youtu.be/9eEIH27pKsc. Acesso em: 1 jul. 2019.
NIESKENS, Roel. Variable Fonts: the Future of (Web) Type.
Typographica, 22 set. 2016. Disponível em: https://typographica.org/on-typography/variable-fonts/. Acesso em: 19 jun. 2019.
PFLUG, Mary Catherine. 2018 Fonts Purchasing Habits Survey. In: TYPECON, 2018, Portland, 2018. Disponível em: https://medium.com/@mcpflugie/the-2018-font-purchasing-habits-survey-results-complete-edition. Acesso em: 23 maio 2019.
RIGGS, Tamye. The Adobe originals silver anniversary story. EUA: Adobe, 2014.
SCAGLIONE, José. Fluxo de trabalho. In: HENESTROSA, Cristóbal; MESSEGUER, Laura; SCAGLIONE, José. Como criar tipos: do esboço à tela. 1. ed. Brasília: Estereográfica, 2014. cap. Digitalização, p. 63-64.
SHERMANN, Nick. Variable fonts for responsive design. A list apart, 23 jan. 2015. Disponível em: http://alistapart.com/blog/post/variable-fonts-for-responsive-design/. Acesso em: 19 jun. 2019.
SPIEKERMANN, Erik. A línguagem invisível da tipografia: escolher, combinar e expressar com tipos. Tradução: Luciano Cardinali. São Paulo: Blucher, 2011.
TRUETYPE GX. TrueType Typography, s/d. Disponível em: http://www.truetype-typography.com/ttgx.htm. Acesso em: 18 jun. 2019.

Opa, você chegou no pós-créditos? Tal qual um filme da Marvel, existe o virtuosismo de efeitos especiais nas fontes variáveis. O pessoal da Underware é uma galera elevando o nível do jogo. Dei exemplos de eixos de peso, largura e itálicos aí, mas uma fonte variável pode ter até... tá preparado? 64 mil eixos. Sim, sessenta e quatro mil eixos. E mais, é possível criar eixos que controlam eixos. Difícil de entender? Sim, é. Para quem achou este jogo fácil e quer jogar no HARD, assistam a mini-série de palestras sobre High Order Interpolation (HOI) da Underware, e vejam as doideras que estes caras fizeram.

Ficou curioso com a parte histórica/teórica? Tem bem mais para contar, e isto virá em no próximo jogo, digo, texto. 

Ficou curioso com a parte do design de tipos? Tem mais no artigo “Tipos em placas do séc. 20: a sinalização paulistana com fontes variáveis entre 1915 e 1976”