Como fiz uma fonte de caligrafia

 (kokorobot.ca)
3 pontos por GN⁺ 2023-11-28 | 1 comentários | Compartilhar no WhatsApp
  • Como o texto manuscrito do quadrinho hakum variava em tamanho e legibilidade de página para página, a autora decidiu transformar sua própria caligrafia em uma fonte TTF em vez de usar uma fonte existente
  • A segunda tentativa, feita a partir de letras escritas no papel e digitalizadas, pareceu mais natural e orgânica do que a caligrafia digital feita com mesa digitalizadora
  • O escopo da produção foi limitado a A-Z, a-z, números 0-9 e pontuação básica, deixando de fora recursos avançados como negrito, itálico e ligaduras
  • O processo seguiu um fluxo de limpar as imagens digitalizadas no Gimp, separá-las em PNG e depois ajustar contornos dos glifos, espaçamento lateral e kerning no FontForge
  • Durante o autotrace e a exportação, podem surgir problemas de validação como missing points at extrema e self intersecting, então fontes manuscritas exigem bastante pós-processamento

Por que transformar caligrafia em fonte

  • Antes, o texto do quadrinho hakum era escrito digitalmente à mão com uma mesa digitalizadora
  • O resultado era bom, mas mesmo dentro de uma única página o tamanho das letras às vezes aumentava ou diminuía demais, prejudicando a legibilidade
  • Como não queria usar uma fonte pronta, a autora decidiu criar uma fonte baseada na própria letra
  • O objetivo era uma fonte TTF para publicação na web, com um conjunto limitado de caracteres
    • Não seriam feitas versões em negrito nem itálico
    • Era a primeira vez criando uma fonte e usando o FontForge, então podem existir métodos melhores

Duas tentativas e a terminologia básica de tipografia

  • A primeira fonte foi feita com base em caligrafia digital escrita na mesa digitalizadora
  • A segunda foi criada a partir de imagens digitalizadas de letras escritas no papel, e como a escrita no papel era menos precisa, o resultado pareceu mais orgânico e natural
  • Ao fazer a fonte, a autora aprendeu termos da estrutura tipográfica, e entender a função de cada elemento ajuda a tomar decisões melhores de design e a criar fontes mais funcionais
    • Ascender: parte da letra minúscula que sobe acima da x-height
    • Baseline: linha de base onde a maioria das letras se apoia e abaixo da qual descem os descenders
    • Cap Height: linha que indica a altura da maioria das letras maiúsculas
    • Descender: parte que desce abaixo da baseline, como em p e q
    • X-Height: distância entre a baseline e a mean line nas letras minúsculas

Imagens digitalizadas e limpeza no Gimp

  • O conjunto produzido incluía letras maiúsculas A-Z, minúsculas a-z, números 0-9 e pontuação básica como vírgula, exclamação e interrogação
  • No começo, a autora desenhou linhas-guia de baseline, cap height, x-height e descender com lápis em um caderno de desenho e escreveu as letras
  • Como desenhar entre as linhas-guia deixava tudo rígido demais, depois ela passou a escrever várias vezes a frase "The quick brown dog jumps over the lazy fox" em maiúsculas e minúsculas
    • Essa frase contém todos os caracteres necessários de a-z
    • Ao escrever em forma de frase, ela pensava menos em cada letra individualmente e conseguia formas melhores
    • Ao desenhar sobre uma grade, a atenção ficava presa demais às restrições
  • A melhor frase escrita foi escolhida para a produção da fonte, e em alguns casos também foram aproveitadas letras desenhadas na grade
  • Por causa desse método, depois foi preciso alinhar digitalmente a cap-height, a x-height e os descenders de cada caractere
  • Nas imagens digitalizadas, foi aplicado Color > Threshold no Gimp para remover os tons de cinza
  • Por causa das características do lápis e do papel, e também pelo uso sem grade, defeitos das letras foram corrigidos com a ferramenta lápis do Gimp
    • Em Tool Options, todos os dynamics foram desativados para obter linhas limpas
  • As letras já limpas foram copiadas para um novo documento do Gimp, com tamanho suficiente para acomodar a letra mais alta e larga, o M maiúsculo
  • Nessa etapa, foi verificado se a espessura das linhas não variava demais
  • Todas as letras foram exportadas individualmente como PNG para a pasta do projeto

Criando glifos no FontForge

  • O FontForge foi escolhido porque roda no Linux e era recomendado por pessoas próximas, e a experiência de uso foi positiva
  • Ao criar um novo projeto, abre-se a Font View Window, onde todos os slots de glifos da fonte aparecem em forma de tabela
  • Em Element > Font Info, são inseridas as informações da fonte, e o nome é adicionado em PS Names
  • Para exportar como TTF, em General na mesma janela a Em size é alterada para 1024
    • Em fontes TrueType, a UPM costuma usar potências de 2 como 1024 ou 2048
    • Fontes OTF têm exigências diferentes
    • Na tipografia metálica do passado, cada letra ficava dentro de um espaço próprio para manter uma altura uniforme, e a altura dessa peça tipográfica era chamada de ‘em’
  • Ao dar duplo clique em um glifo na Font View, abre-se a Character View
    • É ali que o glifo é desenhado ou editado
    • Pela interface em abas, é possível ver um por um ou conferir palavras lado a lado usando um arquivo de texto preparado
  • Na lista de camadas no canto inferior esquerdo, seleciona-se a camada Back e depois importa-se o PNG da letra com File > Import
  • Em seguida, o contorno do glifo é criado de uma de duas formas
    • Desenhando o contorno manualmente
    • Selecionando a camada Fore e usando Select > Autotrace para gerar o contorno automaticamente
  • O Autotrace cria contornos com pontos de controle e curvas Bézier com base na imagem de fundo, mas pode gerar pontos em excesso ou problemas de extrema ausente
  • Quando a forma fechada é criada, o glifo também passa a aparecer nas outras janelas

Espaçamento lateral e pré-visualização

  • Em cada glifo, os side bearings esquerdo e direito são ajustados para definir a largura final do glifo
  • Para centralizar automaticamente todos os glifos, usa-se Metrics > Auto Width
  • Para posicionar todos os glifos no centro dentro da largura, usa-se Metrics > Center In Width
  • Ao corrigir contornos, pode ser útil desligar a camada de referência
  • Para recomeçar um glifo, basta selecioná-lo na Font Window e usar Edit > Clear
  • Para apagar apenas a camada de referência, usa-se Edit > Clear Background
  • No campo de texto acima da área de trabalho da Character View, é possível digitar palavras ou caracteres aleatórios depois da letra atual para pré-visualizar como elas ficam lado a lado
  • Esse processo precisa ser repetido para todos os glifos, e especialmente no glifo Space, se os side bearings não forem ajustados, o espaço entre as palavras fica grande demais

Configurando o kerning

  • Kerning é o processo de ajustar o espaço entre caracteres para que o texto pareça mais legível
  • Na Font Window, vá em Element > Font Info e depois na aba GPOS de Lookups clique em Add Lookup
  • No menu Type, selecione Pair Position (Kerning)
  • Na coluna Feature, clique na seta ao lado de New, escolha Kern Horizontal Kerning e confirme
  • Selecione o novo item de GPOS criado, clique em Add Subtable, mantenha o nome padrão e confirme
  • As letras que participarão do kerning devem ser selecionadas por arrasto nas duas tabelas
    • É preciso selecionar tanto maiúsculas quanto minúsculas
    • Para escolher os dois conjuntos em uma mesma tabela, use Shift
  • Ao clicar em pairings, uma versão ampliada do par de glifos aparece na parte inferior da janela
  • Arrastando o segundo glifo para mais perto ou mais longe do primeiro, ajusta-se a distância até que todas as combinações fiquem visualmente boas

Testes e validação na exportação

  • Para testar a fonte e o kerning dentro do FontForge, use File > Print
  • O texto padrão não mostra todas as combinações possíveis, então é possível adicionar seu próprio texto
  • kern_pairings.txt contém todas as combinações de kerning e pode ser colado na tela de testes

  • Problemas que podem aparecer durante a exportação

    • Ao exportar com File > Generate Fonts, o FontForge pode marcar alguns caracteres para revisão
    • Non-integral coordinates significa que um ou mais pontos do contorno do glifo têm coordenadas decimais, como 2.25
    • Selecione o glifo com problema, vá em Element > Validation > Find Problems, marque "non-integral coordinates" e aplique fix repetidamente
    • Em uma fonte manuscrita, que não depende tanto de precisão extrema, mover para coordenadas inteiras muito próximas pode não causar grande diferença
    • Missing points at extrema acontece quando os pontos de controle de uma curva empurram a curva para fora de seus limites extremos
    • É preciso ajustar os pontos de controle para que o ponto mais alto ou outro ponto extremo da curva se torne um ponto amarelo
    • Element > Add Extrema pode ajudar, mas também pode distorcer o glifo ou criar mais problemas de non-integral coordinates
    • Mesmo com esse erro no log, foi possível gerar a fonte, mas isso pode causar pequenas distorções irritantes
    • Se a fonte manuscrita estiver muito irregular ou se foi usado Autotrace, problemas de extrema podem aparecer
    • Self intersecting significa que o contorno do glifo cruza a si mesmo
    • É preciso revisar todas as linhas e remover as sobreposições

Escolha do TTF e instalação

  • Para o objetivo de uso, TTF (TrueType Font) foi suficiente
  • OTF seria desnecessário, já que não havia planos de armazenar muitos glifos, incluir negrito e itálico como estilos separados ou usar ligaduras
  • O conteúdo em que a fonte seria usada seria publicado na web, e TTF atende bem a esse objetivo
  • Para gerar a fonte com todos os glifos da Font View, use File > Generate Fonts
  • No menu suspenso abaixo do nome da fonte, escolha TTF como formato de saída, confirme, e a fonte será salva na pasta do projeto
  • Depois, basta mover a fonte gerada para o local de armazenamento de fontes do sistema
  • Materiais de referência e exemplos de uso

Leituras relacionadas

1 comentários

 
GN⁺ 2023-11-28
Comentários no Hacker News

  • A visão geral do FontForge foi boa, e eu mesmo já mexi um pouco nele no passado
    É meio tosco, mas também não sei se os concorrentes comerciais são muito melhores na prática. Nem conheço os nomes, para falar a verdade
    E o site é muito bonito. É único e tem bastante personalidade

    • O FontForge é open source, multiplataforma e bastante completo, então é algo pelo qual sou grato, mas, pela minha experiência de uso, os concorrentes comerciais de fato são muito melhores
      Se você tiver macOS, pode conferir o Glyphs(/Mini) ou o RoboFont, ambos com período de teste suficiente. Ainda assim, o que mais me anima são as ferramentas da próxima geração, incluindo ferramentas baseadas na web como o fontra.xyz
    • Vale a pena continuar acompanhando também o MFEK para ver se ele fica mais maduro
      Tudo que vi até agora relacionado ao MFEK pareceu bem legal
      https://mfek.org/
    • Já que o assunto é FontForge, queria saber se alguém conhece uma forma de visualizar a fonte usando alguns parágrafos de texto durante a criação
      Muitas vezes uma única frase como “quick brown fox” não basta

  • Também vale muito a pena ver o 100r.co
    Devine e Rekka mantêm o estúdio no veleiro Pino e registram a vida, as viagens e os projetos deles

  • O resumo do FontForge foi bom
    Como o texto sugere, há opções mais fáceis e automatizadas para criar uma fonte a partir da própria caligrafia. Depois disso, você ainda pode retocar a fonte resultante
    https://www.calligraphr.com/en/ antes se chamava MyScriptFont

  • A fonte que ele fez parece bastante com uma que eu fiz
    https://imgur.com/a/g8bIoUY
    Não fui fundo em otimizações como kerning, mas os 3 ou 4 programas que usei eram todos extremamente frustrantes, quebrados ou difíceis de usar. Pode ter sido problema meu, e imagino que software pago seja bem melhor. Impressiona ele ter ido até o fim

  • Queria saber qual é a maneira mais simples de mesclar várias fontes em uma só
    O VS Code não oferece suporte a configuração de fonte por linguagem ou por token. Por exemplo, não dá para usar Comic Sans nos comentários e outra fonte no restante, embora dê para aplicar coisas como itálico/negrito

  • Gosto de fontes desde que elas começaram a se popularizar com a febre do Desktop Publishing nos anos 80
    Dá até para dizer que houve exagero por um tempo, mas foi uma das primeiras coisas que me fez perceber que design importa. Enfim, bela fonte e excelente visão geral

  • Fico curioso se existe gente que realmente faz fontes com MetaFont/MetaPost
    Também não sei se o FontForge tem recursos de scripting. Nunca usei, só li a respeito, mas li os 5 volumes de “Computers and Typesetting” do Knuth

  • Fico curioso se já existe alguma startup wrapper de IA para criação de fontes
    Parece um prompt interessante. Algo como “desenhe uma fonte natalina amigável para crianças, fortemente influenciada pelos Bálcãs, mas com um toque de brutalismo soviético”
    Comercialmente, o uso de fontes exóticas também deveria se tornar algo mais natural culturalmente. Entendo por que Helvetica, Roboto, Noto Sans e outras fontes mais modernas são usadas, mas, sinceramente, o mundo ficou meio sem graça

  • Foi uma oportunidade perdida não usar a própria fonte no post do blog

  • A frase deveria ser a raposa pulando sobre o cachorro, não “o cachorro pulando sobre a raposa” ;-)
    Porque o cachorro é preguiçoso e a raposa é rápida