Se você está com pressa e quer logo ver o resultado, pode ver aqui no Behance, se quer saber sobre os bastidores, continue lendo aqui =)

 
No final de 2019 o Estúdio Maquinário foi contratado pela Agência DDB para desenvolver letterings caligráficos e uma coleção de fontes para diferentes linhas da Vigor.
O Maquinário possui vasta experiência em caligrafia e lettering pelas mãos do Thiago Reginato, também conhecido como Tipocali. Contudo, type design não é parte do dia-a-dia do estúdio, então se uniram à Notdef Type, de Diego Maldonado (também conhecido como este que vos escreve) para desenvolver uma família de quatro fontes com estilos caligráficos.

Houve uma reunião entre nós e a agência, onde eles trouxeram referências de algumas fontes e estilos de caligrafia, além de mostrar alguns exemplos de como as fontes seriam aplicadas. Nesta conversa falamos também sobre o processo de cada etapa do desenvolvimento de uma fonte, algo que aquela equipe da DDB nunca havia feito.

Entendemos que eles gostariam de algo o mais próximo possível do pincel, inclusive com as marcas que deixam no papel. Isto envolve uma transparência natural nas fontes, como simulação da tinta meio aquarelada, algo que as duras tradicionais tipografias vetoriais não dão conta. Percebemos então que teríamos que trabalhar com Color Fonts.

§ Color fonts?

Nos dias de hoje existem dois tipos de Color Fonts, as vetoriais e as bitmap. As vetoriais são mais próximas das tipografias digitais que estamos acostumados, com a diferença que possuem um ou mais conjuntos de cores pré-determinados, o que torna possível efeitos diferentes para as letras. Um bom exemplo de uma Color Font vetorial é a Rocher Color, da Harbor Type.

Existe outro tipo de Color Font, que ao mesmo tempo que é menos explorada por type designers, é extremamente utilizada por todas as pessoas do mundo diariamente, a tecnologia dos emojis. Sim! Emojis são fontes, possuem estrutura de fontes (unicode) e funcionam como fontes 👍. Repare que você pode selecionar, copiar e colar o emoji como um texto e nem sempre ele aparece como mesmo design, mas sempre deve ter a mesma característica, assim como as letras nas tipografias.
 
Este tipo de fonte é tecnicamente chamada de Sbix (Standard Bitmap Graphics), e funciona tanto em sistemas OpenType Font (.otf) quanto TrueType Font (.ttf) — uma observação aqui, atualmente tanto .otf quanto .ttf são tipografias OpenType, mas esse assunto fica para outro dia.


Vou poupar um pouco vocês da parte de como isso funciona no sentido tecnológico, mas para os iniciados, basta entender que é uma tabela a mais inserida dentro de um arquivo fonte comum (inclusive glifos vetoriais e Sbix podem coexistir em uma mesma fonte).


De maneira geral, em sua estrutura, o arquivo fonte Sbix é como uma fonte tradicional vetorial, mas em vez do glifo “a” conter um vetor, ele contêm um .png.

Vamos de Sbix

Eu já havia trabalhado com uma fonte deste tipo antes, no projeto que fiz para a Eisenbahn, a Railroad Color. A agência Suno Creators me pediu para pegar desenhos de letras feitos com guache e colocar dentro de uma fonte, e assim foi feito.

Repare que há uma grande semelhança entre o projeto da Vigor e da Eisenbahn, ambos queriam a marca da tinta e do pincel em um nível que o vetor não dá conta. Mas é legal lembrar que há outros possíveis usos para as fontes Sbix, qualquer coleção de arquivos .png pode estar dentro de uma fonte (lembram dos emojis?).

Mas e a resolução?

A pergunta clássica que surge é: “mas não vai ficar em baixa?”. Bom, de fato, como é um .png as Color Fonts Sbix não são escalonáveis ao infinito como as vetoriais, mas é possível utilizar uma resolução alta nas letras, para que se tenha um ótimo resultado em tamanhos grandes.


Tanto no caso Eisenbahn quanto no Vigor, são fontes que não precisam ser utilizadas na web como texto, por isso não houve grande preocupação com o peso em megabytes da fonte, sim, megabytes. As Color Fonts Sbix são arquivos bem maiores que fontes vetoriais, lembrem que aqui estamos trabalhando com uma coleção de arquivos .png, quanto mais glifos na fonte, mais .png.

Imagens bitmap são mais pesadas que vetores, fontes tradicionais normalmente estão na escala dos kilobytes. Por isso que no caso de se usar Color Fonts Sbix como webfonts, é melhor resoluções mais baixas para que carreguem mais rápido no browser. É possível gerar fontes Sbix com maior ou menor resolução, de acordo com o uso pretendido por ela. O fato de ser um projeto custom ajuda muito neste quesito, pois sabe-se exatamente como o cliente irá utilizar a fonte. Em um projeto de varejo ou de webfonts, talvez seria necessário usar múltiplas resoluções.

As fontes Sbix podem ainda conter múltiplas resoluções para cada glifo dentro de uma mesma fonte, sendo como padrão a maior 1024 px de altura, depois 512, 256, 128, 64 e 32. Estes valores não são uma regra, você pode ajustar como achar melhor para seu projeto, com mais ou menos versões, como mostra a imagem abaixo retirada do site do do Glyphs, software para desenvolvimento de fontes que uso.

Na prática, quanto mais resoluções você adiciona, mais .png em cada glifo, mais megabytes para sua fonte. A beleza desta parte é que os softwares e browsers em teoria reconhecem a melhor resolução para o uso da fonte, no entanto, eu não concordei com decisões do Photoshop. Mantive apenas a maior resolução em ambos os projetos. Tanto para Eisenbahn quanto Vigor, eu optei por usar uma resolução entre 700 e 1000 px de altura no corpo do fonte.

§ O processo de criação das fontes da Vigor

Agora vamos para a parte legal. Junto com o Reginato, discuti e assim escolhemos um design a partir de algumas letras que ele caligrafou primeiro seguindo o briefing da DDB, depois de definirmos os estilos ele partiu para todos os caracteres. Enquanto ele caligrafava opções para cada caractere, me mostrava e selecionavamos os melhores para entrar na fonte. Ele então escaneava em alta resolução, tratava as imagens no Photoshop, me passava os arquivos e eu fazia o recorte de cada .png para inserir nas fontes via Glyphs 3.

De maneira geral, estas fontes não possuem todos os glifos conectados. Em seus quatro estilos há poucas ligaturas e caracteres alternativos, com exceção da Vigor Clara, possui alternativos para praticamente todas as letras. Isto foi uma questão combinada com o cliente em relação ao custo e tempo de produção. Durante o processo, foi necessário em alguns casos refazer letras ou criar caracteres alternativos ou ligaturas para corrigir pares de letras. 

Na imagem abaixo a Vigor Cremosa, à esquerda com a palavra está com ligaturas padrão ativadas, e à direita desativadas. 

Controlamos todo o processo por uma planilha via Google Docs.

Como era no total um grande volume de caracteres e um curto espaço de tempo (foram cerca de 3 meses para o projeto total, ou seja, conceito, caligrafia, desenvolvimento da fonte), era preciso otimizar o sistema de importar os .png para dentro das fontes.

§ Automatizacão para otimização

Uma vez, em um workshop de programação em Python com o Gustavo Ferreira, type designer e programador, ele disse que a melhor coisa que o computador faz são tarefas repetitivas. Portanto, se você está fazendo algo muito repetitivo, o computador provavelmente consegue fazer isso melhor para você.


Depois de importar estas imagens manualmente na primeira fonte que trabalhei, arrastando cada imagem para seu respectivo glifo, pensei que alguém já deveria ter passado por este problema e resolvido com algum script – scripts no Glyphs são programações em Python prontas para executar funções que não estão previstas no software original.

Eu estava certo. O Rainer Erich Scheichelbauer que trabalha no Glyphs, também conhecido como Mekkablue, disponibiliza um script que facilita este processo, o Add Sbix images to fonts, ótimo, isso já era um adianto. Contudo para o meu fluxo especificamente o script ainda precisava de ajustes. E para explicar isso preciso entrar numa questão técnica de como é estruturada uma Color Font Sbix no Glyphs 3.

Sublayers Sbix

Se você não está familiarizado com o Glyphs, ele chama de layers algo que não tem nada a ver com o que vemos nos softwares como os da Adobe. Nele, existe um layer principal, que é o exportado na fonte depois e os sublayers, que estão presentes em cada glifo normalmente usados para backups de formas ou informações de alterações em famílias com muitos pesos (há mais sobre sublayers nosso post Tipos variáveis em placas do séc. 20). Mas aqui, vamos focar em outra função para eles, os Color Layers e sobretudo os Color Layers Sbix, ou como o Glyphs nomeia, iColors.

Os sublayers iColor podem acomodar diferentes resoluções para cada glifo, portanto o iColor 1024, vai contar com a maior resolução, o iColor 512 uma menor e por aí vai, como foi comentado antes neste texto.

O script do Mekkablue coloca as imagens nos glifos e sublayers corretos de acordo como arquivos .png são nomeados, o script pede para que você selecione uma pasta onde os .png estão alocados – funciona bem. Mas eu gostaria que ele colocasse também no layer principal como imagem de fundo (o que é irrelevante para a fonte final, mas prefiro assim para o desenvolvimento).

Então, chamei o Filipe Negrão, amigo de longa data que programa scripts para Glyphs, e perguntei se ele podia me ajudar. Ele disse que sim, então o contratei para desenvolver alguns scripts.

Como não tínhamos muito tempo, o Filipe foi construindo-os ao mesmo tempo que eu ainda fazia manualmente, nisso, a primeira fonte montada. A Vigor Proteína, foi toda feita na raça.

Depois que eu comecei a usar o script do Filipe (que se baseou no do Mekkablue como ponto de partida), num passe de mágica eu selecionava a pasta e todos os glifos caíam no lugar exato, da forma que eu queria, me escorreu uma lágrima ao saber que não ia precisaria arrastar e ajustar a primeira etapa para mais de uma centena de glifos um-a-um de novo. Fontes Sbix tem uma grande questão, não é possível gerar acentos automaticamente, você precisa fazer e colocar glifo por glifo. 🙁

Claro, depois de colocar todas as imagens, precisamos ajustar as métricas.

§ Métricas & kerning

O site do Glyphs possui um ótimo tutorial sobre como funcionam as métricas para fontes Sbix. Como ela não possui vetores, o software precisa de alguma referência para suas medidas então o que temos que fazer? Um vetor. 🙄

É preciso desenhar fios em formato de um triângulo retângulo sem a hipotenusa, onde as partes retas vão definir referências para o lado direito e esquerdo do glifo. É importante que esta não seja uma forma fechada, porque ao exportar a fonte, você deve optar que o Glyphs remova os overlaps, não vamos entrar a fundo em o que isso significa, basta entender que com isso, ele deleta a forma que é simplesmente um fio. Com isso, você pode ajustar as métricas de maneira normal, lado esquerdo, lado direito e grupos de kerning.

O primeiro script que o Filipe me escreveu, já – bora lá, respira fundo – puxa a imagem reconhece o tamanho dela cria os triângulos baseados na largura da imagem transforma as métricas em esquerda e direita para zero replica o layer original e cria os sublayers iColor com cada resolução correta de acordo com o tamanho do .png. Ufa, são várias coisas de uma vez só em segundos. Ele nomeou o script de Add Sbix Images and Crop Apple-Style Font. Claro que não foi tudo escrito de cara, ele foi em partes que já me ajudavam e nas duas últimas fontes já consegui usar combão que faz tudo isso de uma vez.

Começa então o processo de kerning normal: provas, ajustes e entre vai e vens há um bom tempo aí. Eu tinha um problema grave com a fonte Vigor Clara que possui caracteres alternativos para todas as letras, e o processo de kerning se torna bem mais complexo, porque todas as combinações devem ser previstas. Além dos glifos “normais” deve-se também parear estes alternativos, isso é um inferno para testar. Eu normalmente deveria selecionar e inserir no texto manualmente todos os caracteres alternativos que não são rapidamente acessados pelo teclado para cada combinação (para iniciados, eles ficaram todos no stylistic set 01).

Mais uma vez, tarefa repetitiva, mais uma vez eu chamei: Filipe!
Desta vez eu precisava de um script que automaticamente variasse as letras para sua versão alternativa (.ss01) de maneira intercalada. O Filipe então me escreveu este novo script, que faz com que apareça uma janela no Glyphs onde coloco o texto que eu quiser. Em seguida, aperto um botão e abre uma aba nova no Glyphs com o texto alternando glifo sim outro não para os alternativo. Se não ficou claro, deixa eu desenhar:

Então, desta forma eu poderia alternar entre glifos padrão e glifos alternativos e acelerar o processo de kerning. Durante todo este tempo, claro que eu tinha que ir testando tudo nos softwares da Adobe, eu usei principalmente o InDesign e o Photoshop. Digo-lhes uma coisa, testar Color Fonts Sbix é chato.

A chatice de exportar e testar Color Fonts

Em fontes comuns, podemos exportar em determinadas pastas temporárias ou em pastas dentro dos programas da Adobe e bala! Não tem cash, exporto do Glyphs e vejo a atualização nos programas praticamente em tempo real. Mas Color Fonts não funcionam assim.

Color Fonts funcionam da mesma forma que se testava fontes nos anos 2010 pra trás (olha lá... 2010 já fazem mais de 10 anos). Você precisa exportar a fonte cada vez com um nome diferente, normalmente se adiciona um número referente a versão, e instalar no sistema mesmo. No caso, eu uso o próprio Font Book do Mac para isso. Foram dezenas de exportar/instalar para cada fonte (mais de uma centena se for somar as quatro).

Ao longo de mais ou menos um mês eu deveria entregar uma fonte por semana (depois que todos os glifos já estavam desenhados pelo Reginato). No contrato original havíamos combinado duas semanas para cada fonte, mas fizemos nosso esforço, deu pra fazer em um mês e meio as quatro fontes, não consegui cumprir a versão mais apertada do cronograma, mas consegui adiantar um pouco a original. Com isso, ao final de cada semana (mais ou menos) mandávamos para o cliente o beta de uma fonte e eles poderiam testar e ver se havia algum problema — principalmente em simulação de usos reais.

Color Fonts ainda são meio instáveis nos sistemas da Adobe. Em 2018, quando fiz a Railroad para a Eisenbhan era ainda pior. Naquela época usando a mesma versão de fonte, sistema operacional e software, às vezes funcionava para mim e não funcionava para o pessoal da agência, ou ainda pior funcionava em um computador da agência, mas em outro não (pelo menos isso provava que a culpa não era minha diretamente). Eu vinha deste trauma. Felizmente, em 2021, não tivemos este problema de incompatibilidade, os betas funcionaram corretamente.

Depois das primeiras versões de teste, nós consertamos algumas coisas e adicionamos algumas ligaturas e caracteres contextuais, mas a agência em si não apontou nenhum problema, felizmente 🙂. As fontes então estavam prontas para usar, entregamos os arquivos finais e nasceu assim a família Vigor Color, com os estilos Cremosa, Clara, Suave e Proteína.

§ A tipografia em uso

Até o momento que escrevo este artigo, ainda não vimos todas em uso. Contudo algumas já foram utilizadas nas redes sociais da Vigor, sobretudo na campanha com o [melhor de todos os tempos] Ex-BBB Gil do Vigor para os iogurtes gregos.

Se você foi atento, percebeu que eu sempre mostrei durante a produção as letras em cinza, no entanto, o Gil do Vigor acompanha elas em branco. Tem apenas uma forma de alterar a cor de uma fonte Sbix: Colocar um efeito de cor por cima do layer de texto no Photoshop. Pelos testes que fizemos, a tipografia em cinza trazia os melhores resultados usando este efeito, a DDB chegou a usar ela em dourado, azul e branco – pelo o que vimos até agora.

E desta forma, a Vigor Color está no mundo, agora é com a Vigor achar o melhor uso para elas. Você pode ver nosso post no Behance, com mais imagens e aplicações que foram feitas para a Vigor Color. 

Outros projetos interessantes

- Color font LiebeHeide, da designer Ulrike Rausch, que ganhou um TDC https://liebefonts.com/fonts/liebeheide
- Color Font Cedric Sunrise da Australian Type Foundry https://www.atf.com.au/work/chromatic-letterpress-prints/
- Instagram da Vigor onde eles têm mostrado nossas fontes http://www.instagram.com/vigorbrasil