Ferramentas para desenhar e produzir a Elementar

07 Maio 2021

Elementar é uma família tipográfica pouco convencional. Diversas ferramentas foram desenvolvidas sob medida para auxiliar no desenho e produção das fontes. Esse artigo oferece uma retrospectiva das principais ferramentas criadas para o projeto.

Força bruta (não funciona)

Os primeiros rascunhos do princípio de variação da Elementar foram feitos como imagens bitmap no Photoshop. Eu logo passei a trabalhar dentro do editor de fontes, que na época era o Fontographer 4.1 no Windows 95.

Formatos de fonte bitmap verdadeiros como .fon ou .bdf não funcionavam amplamente. As resoluções de tela eram ainda muito baixas1, e as ‘fontes pixel’ (fontes bitmap construídas com vetores) eram bastante populares2, especialmente em ambientes para design de gráficos e hipermídia, como Flash, Director, Fireworks. O uso de fontes personalizadas na web usando apenas HTML ainda não era possível.

As fontes Elementar foram desenhadas como fontes outline em um grid de 125 unidades3. As curvas bézier tiveram que ser criadas ponto por ponto, manualmente, e eram alinhadas ao grid manualmente também. Eu fiz uso extenso das funções de copiar/colar para transformar um estilo em outro. Porém, como o processo era todo manual, o resultado continha muitos erros e inconsistências. E se eu decidisse alterar um detalhe em algum glifo (por exemplo aumentar em um pixel a largura da barra do f), eu tinha que abrir diversas outras fontes para fazer a mesma alteração.

O processo era bastante burro e lento, e eu levaria uma eternidade para terminar as fontes desse jeito. Eu continuei a estudar e a buscar meios de construir o sistema da forma que havia imaginado.

Pincel de Pixels

O primeiro grande salto de produtividade se deu através de uma ferramenta de desenho especial criada por Hartmut Bohnacker, um dos meus professores na HfG Schwäbisch Gmünd na Alemanha. Naquela altura eu já havia mudado para o FontLab 4 no Mac, mas o processo de desenho continuava o mesmo, ponto por ponto. Após ver como eu trabalhava, Hartmut programou uma ferramenta sob medida em Python que funcionava como o ‘pincel de pixels’ dos programas de desenho, só que em vetores. Essa ferramenta simples me permitiu trabalhar muito mais rapidamente e tornou todo o processo bem mais divertido. Fiquei muito entusiasmado, e ter visto que algo assim era possível me motivou a mergulhar de cabeça na programação e no desenvolvimento de ferramentas.

O Hartmut gentilmente me deu permissão para redistribuir o script. Usuários do FontLab Studio 5 ainda podem encontrá-lo no GitHub.

Eu passei a usar o RoboFont assim que ele foi lançado em 2011. Uma das primeiras extensões desenvolvidas pelo Frederik foi a Pixel Tool, uma ferramenta de desenho que reproduz o funcionamento do Pixel Brush e acrescenta alguns novos recursos próprios como desenho com componentes. Essa é a ferramenta que eu uso hoje quando preciso desenhar com ‘pixels’ dentro de uma fonte.

Elementar Sintética

Elementar Synthetic foi um experimento para recriar a Elementar inteiramente como um programa. Esse trabalho foi desenvolvido em parceria com Frederik Berlaen durante nossos estudos no Type&Media, e apresentado conjuntamente na RoboThon 2006. Cada glifo foi descrito em Python em função de traços verticais e horizontais, com diversos parâmetros variáveis e muita lógica extra para lidar com aspectos como cantos arredondados, alinhamento ao centro, traços inclinados, etc. Eu atualizei o programa para o RoboFont alguns anos depois, e acrescentei uma interface para controlar os parâmetros interativamente.

Esse projeto foi uma rica experiência de aprendizado. Trouxe-me um entendimento valioso sobre a diferença entre design auxiliado pelo computador (ferramentas ‘burras’ operadas pelo olho-mão humanos) e inteligência artificial (feramentas inteiramente programadas que fazem todo o trabalho por meio de lógica e código). Aprendi que (pelo menos para este projeto) eu preferia trabalhar com o primeiro tipo de ferramenta, com a qual se pode ver e manipular o resultado em tempo real. Em si, a Elementar Synthetic continua sendo interessante e útil, e a produção da Elementar seguiu adiante com o método semi-manual que eu vinha utilizando até ali.

Deslocador de pontos

Com o passar do tempo, fui me tornando mais fluente em Python, e criei o hábito de observar a mim mesmo enquanto estou trabalhando. Na prática, os dois principais tipos de transformação na Elementar (altura e largura) eram produzidos selecionando e movendo todos os pontos com coordenadas maiores ou menores que um certo valor limite.

Por exemplo, para criar uma fonte de 10px, pega-se a de 9px, seleciona-se todos os pontos acima da linha de base, e move-se todos eles uma unidade de grid para cima. Mesmo com alguns glifos precisando de reparos manuais (aqueles que possuem uma linha centralizada verticalmente como a, e, s), essa simples operação fazia a maior parte do trabalho em muito pouco tempo.

O mesmo princípio foi utilizado para criar uma variação mais larga de uma fonte existente: basta selecionar o lado direito do glifo, e mover a seleção uma unidade de grid para a direita, fazendo ajustes ou dando tratamento especial para glifos de módulo duplo (como m e w).

Consegui implementar essa ferramenta usando o RoboFab no FontLab. Mais tarde ela foi reescrita para o RoboFont e absorvida pelo hTools2, e daí foi transferida para o hTools3, onde está disponível hoje como a ferramenta Shift.

Além da palheta Shift, eu criei também uma versão mais sofisticada dessa ferramenta: um script que podia aplicar transformações de deslocamento em uma série de fontes em múltiplas alturas e larguras, usando diferentes parâmetros para diferentes grupos de glifos. O script também aumentava os atributos de métrica vertical relacionados (quando transformando ao longo do eixo y) ou a largura dos glifos (quando transformando ao longo do eixo x) com a mesma distância. Essa versão era muito poderosa e podia fazer em segundos o que teria levado dias ou semanas de trabalho manual monótono – pra mim, isso foi uma tremenda conquista. Interessantemente, esse script não sobreviveu até os dias de hoje: após as fontes terem ficado prontas não havia mais uso para ele, e eu acabei não me dando ao trabalho de atualizar o código para mantê-lo funcionando.4

ESpace / EGlyph

Uma grande parte do trabalho de produção da Elementar foi realizado “às cegas”, executando scripts nos arquivos de fonte e checando os resultados após o término da operação. O script mencionado acima é apenas um exemplo, diversas outras ações também eram executadas ‘em lote’. Na maioria das vezes, isso funcionava muito bem5.

Esses scripts de produção seguiam certos padrões repetitivos: eles geralmente envolviam selecionar parametricamente um subconjunto de todos as fontes Elementar, e depois aplicar ou uma função simples em cada fonte, ou uma função mais complexa envolvendo duas fontes (de origem e de destino, por exemplo). Esse padrão recorrente foi abstraído em um objeto chamado ESpace6, que eu podia usar para rapidamente selecionar fontes usando parâmetros e aplicar uma determinada função, salvando o resultado. Em código isso fica mais ou menos assim:

S = ESpace()
# define espaço de variações com parâmetros
S.style  = [ 'B' ]
S.height = [ 9, 11, 13, 15, 17 ]
S.weight = [ 11 ]
S.width  = [ 2, 3 ]
# retorna o nome de todas as fontes no espaço selecionado
print(S.names)
# aplica uma função em cada fonte no espaço selecionado
S.apply(someFunction)

Após algum tempo eu consegui utilizar esse sistema com confiança, e foi como se eu tivesse adquirido superpoderes. A esta altura a família já havia aumentado para centenas de fontes individuais, o que tornava difícil encontrar e abrir fontes específicas pelo gerenciados de arquivos (Finder). Com a API do ESpace eu podia me referir a fontes específicas com facilidade, graças à sintaxe paramétrica usada para nomear os estilos.

O objeto EGlyph foi criado depois do ESpace, como um objeto em Python à parte para uso no DrawBot. Ele cria uma visualização de todas as variações para um determinado glifo, convenientemente alinhadas em um grid para facilitar a comparação. Isso foi usado para gerar provas nos estágios finais do processo de produção, quando as fontes estavam sendo finalizadas para o lançamento.

Os objetos ESpace e EGlyph originais perderam-se no tempo, e recentemente eu tive que programá-los de novo para usar na produção da Elementar 2. Essas duas ferramentas continuam sendo essenciais à linha de produção da Elementar.

TempEdit

TempEdit nasceu como a outra metade do EGlyph, e posteriormente ganhou vida própria na medida em que foi se tornando útil para outros projetos. Enquanto o EGlyph exibe todas as versões de um glifo em um determinado espaço de variações, ‘temp edit’ é uma forma de importar todas essas diferentes versões do mesmo glifo em uma fonte temporária para edição, e depois salvá-los de volta em suas fontes de origem. Esse método permitiu que eu economizasse uma quantidade enorme de tempo e atenção, que teriam sido gastos abrindo diversas fontes na interface, para editar apenas um glifo em cada.

Elementar foi publicada em 2011 como uma família de 420 fontes individuais contendo 665 glifos cada, num total de 279.300 glifos. Foi produzida com o RoboFab no FontLab Studio 5. Isso só foi possível por causa da abordagem ‘temp edit’, que me permitiu contornar o principal gargalo em termos de performance: a abertura de fontes grandes na interface7. Pra mim, essa é a ferramenta mais importante de toda a coleção.

Tentei explicar esta técnica algumas vezes em listas de discussão e fórums, mas é o tipo de coisa que precisa ser compreendida na prática e não apenas em teoria através de uma explicação. Não sei se alguém realmente chegou a tentar.

A chegada das fontes variáveis tornou o problema de grandes espaços de variação × grandes quantidades de glifos ainda mais relevante, e isso me levou a (re)criar o TempEdit em torno do formato .designspace, e a disponibilizá-lo gratuitamente como uma extensão de código aberto para o RoboFont 3. E embora ela tenha sido lançada há alguns anos, eu até hoje não sei se alguém chegou a usá-la. Eu mesmo a uso de vez em quando, para realizar ajustes finos em glifos mestres de fontes variáveis.

Rasterizador

Finalmente, o Rasterizador é uma ferramenta para dividir contornos de glifos ‘sólidos’ em elementos separados. Eu uso ela em duas situações distintas: em modo de contornos, como uma espécie de remove overlaps reverso para ‘destacar’ os elementos antes de usar a ferramenta de desenho com pixels; e em modo de componentes, para criar os elementos finais desconectados que serão usados na fonte variável.

O RoboFab de antigamente possuía a função glyph.rasterize(), porém ela não funcionava do jeito que eu queria. Assim, eu acabei programando as minhas próprias funções de escaneamento e renderização; com o tempo isso cresceu e se tornou um pequeno módulo que foi útil em diversos projetos. Depois eu ainda acrescentei uma interface, para tornar a ferramenta utilizável por outros designers.

Mais recentemente, o Rasterizador foi atualizado para o RoboFont 3 e reconstruído como um componente adicional do hTools3. Ele foi renomeado para hRasterizer, e está agora disponível publicamente como uma extensão paga.


Notas

  1. As dimensões de tela típicas eram 640×480 (VGA), 800×600 (Super VGA) e 1024×768 pixels. Para efeito de comparação, o MacBook Air no qual eu estou escrevendo este texto possui uma tela de 1366×768px, e eu uso um segundo monitor com 1920×1080 pixels. Nunca trabalhei em um monitor Retina, deve ser uma a sensação bem diferente. 

  2. Havia diversos fabricantes de fontes especializados apenas em fontes pixel, como Atomic Media, Miniml and MiniFonts. Havia a coleção clássica de fontes bitmap da Emigre. Etc etc. Fontes bitmap eram bastante relevante na época, e todo designer de tipos eventualmente experimentava criar uma. As famosas fontes de sistema da Apple da Susan Kare. Os desenhos incríveis do Miguel Hernandéz. Mais tarde eu ficaria conhecendo ainda Fedra Bitmap, Unibody, Outbox, VijfZeven… Bons tempos! 

  3. Eu troquei para 120 unidades por célula de grid na Elementar 2, por ser um número com mais divisores inteiros. Isso é útil na hora de desenhar em resoluções dobradas (2×, 4×, etc). 

  4. E também porque não seria muito difícil reescrevê-lo um dia, caso eu precise novamente dele. As ferramentas que sobrevivem e vão sendo aprimoradas geralmente são aquelas que são reutilizáveis. 

  5. Por diversas vezes eu também acabei destruindo glifos que já estavam prontos, sem querer. Toda vez em que eu me senti confiante demais, eu fui punido. Acabei aprendendo a lição – hoje tudo (fontes, ferramentas, conteúdo) é mantido sob um sistema de controle de versões, e eu desenvolvi o hábito saudável de salvar as alterações com frequencia. 

  6. Isso foi antes da existência do formato .designspace. Entretanto, eu já tinha familiaridade com o conceito de “design space”, e já tinha alguma experiência no uso do Superpolator. Qualquer semelhança não é uma coincidência. 

  7. No FontLab Studio 5, abrir e salvar UFOs completos era lento porque eles tinham que ser convertidos entre os formatos UFO e VFB por meio de um script. No RoboFont, a etapa mais lenta é o desenho das células dos glifos na visão geral da fonte (Font Overview).