Criando uma fonte com a minha própria caligrafia

 (chameth.com)
1 pontos por GN⁺ 2025-09-07 | 1 comentários | Compartilhar no WhatsApp
  • Para dar mais personalidade a um site pessoal, foi feita uma tentativa de criar uma fonte manuscrita própria
  • O uso de ferramentas open source como FontForge e Inkscape não foi intuitivo e trouxe várias dificuldades
  • No fim, foi possível gerar e ajustar facilmente uma fonte manuscrita por meio do serviço pago Calligraphr
  • Foi necessário um trabalho repetitivo de ajustes finos e correções, mas houve satisfação com o resultado final
  • A política de negócios amigável ao usuário do Calligraphr também causou uma boa impressão e motivou a recomendação

Tentativa de dar mais personalidade a um site pessoal

  • Havia o desejo de que o próprio site tivesse uma atmosfera mais pessoal e única, diferente de sites corporativos sem graça
  • Pequenas mudanças de design vinham sendo feitas, com efeitos diferenciados em imagens, links e outros elementos
  • Em vez da fonte monoespaçada existente, queria-se aplicar uma fonte cursiva com aparência de escrita à mão, mas como não foi encontrada uma opção adequada, decidiu-se criá-la diretamente

O desafio com ferramentas open source e o fracasso

  • Houve uma tentativa de criar uma fonte vetorial usando ferramentas open source como Inkscape e FontForge
    • Usando uma mesa digitalizadora, foram desenhadas as letras maiúsculas A, B e C, salvas em SVG e então levadas a um editor de fontes
    • A experiência de uso ruim do FontForge e sua interface pouco intuitiva causaram frustração
    • Mesmo em tarefas básicas, como selecionar e importar arquivos ou carregar SVGs, houve muita tentativa e erro e incômodo
    • No processo de edição dos glifos, também foi considerada desconfortável a manipulação das alças de Bézier usadas para trabalhar as curvas
    • Por causa de mensagens de erro repetitivas e da navegação trabalhosa por caminhos e menus, a tentativa foi abandonada no meio
  • Também foi testado o recurso de criação de fontes SVG do Inkscape, mas ficou claro que era um processo complexo e ineficiente, já que exigia unir cada glifo em um único caminho e ter conhecimento de edição vetorial

A escolha do serviço web pago (Calligraphr)

  • Enquanto buscava vários tutoriais open source, descobriu-se a existência de um serviço de código fechado chamado Calligraphr
    • A versão gratuita tem limitações como ligaduras, variações diversas e um limite de 75 glifos, mas os recursos premium podem ser usados com um pagamento único de 1 mês
    • O modelo que permite uso com um único pagamento, sem renovação automática, e a política de preços transparente foram muito valorizados
  • Como usar o Calligraphr
    • O método consiste em imprimir um template, escrever à mão nele e depois escanear e enviar o arquivo para o serviço
    • É possível incluir vários formatos, como caracteres, símbolos e ligaduras escolhidos no template
    • Também dá para criar várias versões, avaliá-las e escolher entre elas, além de adicionar ligaduras customizadas adequadas ao título do blog
    • Foi usada uma caneta Sharpie para dar características marcantes com traços grossos e nítidos
    • O recurso de escaneamento de documentos do iPhone foi usado para digitalizar em PDF e fazer o upload

Melhorias iterativas e ajustes finos na fonte

  • Pela interface web do Calligraphr, foi possível visualizar a fonte e testar sua aplicação direta
    • A fonte foi aplicada ao site real para verificar legibilidade e design em vários tamanhos
  • A primeira versão tinha problemas, como letras desalinhadas em relação à linha de base, quebrando o equilíbrio, e isso foi corrigido com cuidado usando os recursos de ajuste de posição e tamanho
  • O espaçamento entre letras (kerning) foi reduzido para dar a sensação de conexão natural típica da escrita à mão
  • Em alguns glifos, havia ruído escaneado fora da área do glifo, o que gerava espaçamentos estranhos
    • Reduzir apenas a largura deixava pontos soltos nas frases
    • O problema foi corrigido sem dificuldade ao apagar completamente os pixels desnecessários com a ferramenta de edição
  • Esse trabalho repetitivo acabou sendo prazeroso, porque as melhorias ficavam claramente visíveis

Resultado e experiência positiva com o serviço Calligraphr

  • A fonte finalizada deu ao cabeçalho, às legendas e a outras partes do site uma sensação próxima à de escrita manual, atendendo à personalidade desejada
  • Graças à espessura da Sharpie, a legibilidade em tamanhos pequenos também ficou excelente
  • Em comparação com ferramentas open source, ficou clara a eficiência de concluir o resultado com pouco tempo e baixo custo
  • Mesmo após o fim da assinatura, o Calligraphr fornece automaticamente um backup (export) dos dados do usuário
    • Em formato JSON, ele contém todas as informações dos glifos e os dados das imagens, podendo ser usado depois em uma nova assinatura ou em edições adicionais
    • A política clara antecipadamente, a ausência de pressão por cobranças recorrentes e a oferta transparente dos dados causaram forte impressão como práticas de negócio amigáveis ao usuário
  • Para quem quiser tentar fazer o mesmo, é uma experiência recomendável nem que seja pela simplicidade e pelo serviço centrado no cliente do Calligraphr

Leituras relacionadas

1 comentários

 
GN⁺ 2025-09-07
Comentários do Hacker News
  • Em 2013, fiz algo parecido para o site do meu casamento. Usei um serviço postal para criar um TTF decente e depois converti para WOFF. Ainda está online em https://ruthandjosh.net/story/ (atenção: energia millennial)
    • É realmente impressionante manter um site com link vivo por tanto tempo hoje em dia
    • Essa história é realmente linda, não achei nada cafona
    • Obrigado por compartilhar essa cafonice, foi uma ótima forma de encerrar a semana. Shabbat shalom
    • Esse site é muito legal. O design e o layout parecem até atemporais
    • Fico me perguntando se a Ruth realmente tomou champanhe sozinha no avião
  • Torcendo pelo esforço e pela jornada. Me identifico com a escolha honesta de desistir de uma alternativa open source e optar por uma alternativa barata para ter algo seu. Minha história também é parecida. Também sou um criativo autodidata, então às vezes fico teimando porque quero muito experimentar uma tecnologia ou ferramenta específica. Talvez isso seja custo afundado ou perfeccionismo. O design do site tem muita personalidade. PS: salvei nos favoritos do meu Firefox em fonts, developer-blog, creative-sites, boutique-designs
  • Minha letra é realmente horrível e fica pior quanto mais eu escrevo. É um ciclo vicioso. Como minha caligrafia é ruim, acabo digitando tudo; como não pratico, ela piora ainda mais. Se eu transformasse minha letra em fonte, talvez desse até para usar como hash criptográfico. Mesmo assim, gosto da ideia em si. Não acho que digitar uma mensagem seja menos pessoal do que escrever à mão, mas na prática parece um pouco menos pessoal. Acho que uma fonte com a própria caligrafia poderia compensar um pouco essa sensação
    • Combinaria bem como fonte para capa de álbum de black metal
    • Acho que esse fenômeno de "ter um jeito tão fácil que você nem sente mais necessidade de aprender a habilidade" é um problema muito sério hoje em dia. A pessoa aprende só o sistema fácil e, no fim, aprende a usar o sistema, não a habilidade de verdade. Por exemplo, meu colega de quarto só sabe usar sistema de afiar facas e não consegue afiar uma faca à mão. Sem o sistema, não consegue fazer nada. Hoje em dia tem muita gente assim. Só seguem o manual e não têm conexão com o porquê das coisas. Como sociedade, nossas capacidades básicas enfraqueceram muito, e acho que isso acontece porque o capitalismo transformou tudo em um esquema no qual você paga para economizar tempo
  • Pelo que eu sei, o Microsoft Font Maker ainda funciona de graça no Windows Ink stylus (embora o desempenho possa ser limitado). Não lembro o que usei antigamente, mas acho que vinha no PowerToy do Windows Tablet PC. https://apps.microsoft.com/detail/9n9209f8s3vc?hl=en-US&gl=US
  • Tive experiências de abuso quando era criança, então minha letra é muito ruim. Também não escrevo bem em cursiva. Se existisse uma fonte feita com a minha letra, todo mundo diria: "uau, os pais dessa pessoa deviam ser bem irresponsáveis". No Microsoft Word, o nome da fonte provavelmente apareceria como "Danny Wets The Bed". É brincadeira, mas gostei muito da leitura e é um excelente post
  • Quando eu era adolescente, fiz uma ttf-font com a letra da garota de quem eu gostava e dei de presente. Eu realmente subestimei esse trabalho. Usei uma ferramenta incluída no Corel Draw Suite, escaneei o alfabeto que ela escreveu e vetorizei manualmente cada caractere. Deu um trabalho absurdo. Já se passaram 25 anos desde então, e ainda me impressiona a pureza daquela dedicação. Gastei um tempo enorme para fazer um simples presente de aniversário e, na verdade, fiz a maior parte sem nem saber direito o que estava fazendo. No fim, consegui terminar, mas acho que só foi possível justamente porque eu não sabia de nada
    • Bem melhor do que uma mixtape. Se eu escrevesse algo com a minha letra, seria praticamente um castigo
    • Fico curioso para saber o que aconteceu depois entre vocês. Queria saber se esse esforço valeu a pena, se teve final feliz
  • Fico curioso se a tecnologia já evoluiu o suficiente para ficar de fato indistinguível de escrita à mão. Também me pergunto se, usando isso para trabalhos manuscritos exigidos por professores na escola, daria para passar sem ser pego. Isso é, claro, um cenário hipotético
  • Fico me perguntando se existe uma forma de converter a abordagem que Amy Goodchild tentou ( https://www.amygoodchild.com/blog/cursive-handwriting-in-javascript ) em um arquivo de fonte de verdade
    • Provavelmente seria uma questão de "traduzir" os paths de Chaikin em curvas de Bézier. Aí daria para fazer uma fonte em Metafont e, a partir disso, converter para ttf, otf etc.
  • Há outras pessoas que seguiram um caminho parecido
    • E também há a excelente fonte Tekton, que existe há bastante tempo. Ela foi baseada na caligrafia do arquiteto Frank D.K. Ching, mas o design de fato foi feito por David Siegel, da Adobe
  • Trabalho realmente muito legal. Obrigado por compartilhar. No momento, estou preparando um workshop com crianças e queria que elas tivessem a experiência de "desenhar com as próprias mãos" seu próprio site ou webapp. Até agora eu não tinha incluído a criação de fontes porque não sabia como fazer, mas agora já sei. Muito obrigado! Se alguém tiver ideias para tornar esse workshop mais divertido, adoraria ouvir. Por exemplo, eu queria tentar uma transição natural entre o analógico e o digital, como criar protótipos em papel e transformá-los em click dummies de verdade (maquetes funcionais). Só para contextualizar, as crianças aqui têm entre 8 e 10 anos
    • Olá, se aceitarem, eu também gostaria de contribuir com isso. Sempre quis ensinar tecnologia criativa para as crianças da minha cidade natal. Estou na Nigéria/África e programo JavaScript sem aspas simples nem ponto e vírgula