CodingFont: um jogo para ajudar a escolher fontes para programação

• Jogo interativo baseado na web que permite comparar várias fontes monoespaçadas e encontrar a fonte de programação mais confortável para a sua leitura
• Em cada rodada, duas fontes são apresentadas, e quando o usuário escolhe a que prefere, é gerado um resultado de recomendação personalizado
• É possível ajustar diretamente elementos visuais como Font Ligatures, tamanho da fonte e tema, avaliando em condições semelhantes a um ambiente real de desenvolvimento
• Os exemplos de código incluem combinações de caracteres semelhantes como 0, O, l, 1, permitindo testar a capacidade de distinção entre caracteres de cada fonte
• Integrado ao Studio da Typogram, oferece uma interface simples executável diretamente no navegador para explorar e comparar fontes

---

Principais recursos

• É possível ativar ou desativar a opção Font Ligatures para comparar fontes com e sem ligaduras
• O tamanho da fonte (Font Size) pode ser ajustado entre 8 e 36 para verificar diretamente a legibilidade em diferentes ambientes de tela
• Por meio das configurações Show Name e Theme, é possível alterar a exibição do nome da fonte e o tema da tela
• Cada fonte é comparada usando o mesmo exemplo de código JavaScript, permitindo avaliação em condições semelhantes às de um ambiente real de desenvolvimento

Composição do exemplo de código

• O código de exemplo inclui comentários de linha única (//) e comentários de múltiplas linhas (/* ... */)
• É definida a função isMultipleOf usando a sintaxe de arrow function, com uma lógica simples para comparar números e múltiplos
• Nos nomes de variáveis são usadas combinações de caracteres visualmente semelhantes como 0, o, O, l, 1, I, permitindo verificar a clareza de distinção entre fontes
• Os resultados da chamada da função são exibidos no console, e a capacidade de distinção de caracteres pode ser testada com exemplos que tratam 0 e 1 de forma diferente

Interação e fluxo de uso

• Em cada rodada, o usuário escolhe uma fonte ou navega com as setas (⇽, ⇾) para continuar a comparação
• Quando a escolha é concluída, passa para o próximo par de fontes, identificando gradualmente a preferência pessoal de legibilidade por meio da repetição
• Com o botão Restart Game, é possível reiniciar o jogo e começar imediatamente uma nova sessão de comparação

Recursos adicionais e exploração

• Pela aba Browse no menu superior, é possível explorar diretamente várias fontes para programação
• Pelo link Studio, é possível acessar a ferramenta de design tipográfico da Typogram
• Toda a interface é composta por uma UI simples baseada na web, executável diretamente no navegador sem necessidade de instalação

[GN⁺]

Comentários do Hacker News

• O que não gostei neste jogo é que o navegador renderiza a fonte diretamente
  O Chrome desenha fontes de forma diferente do Freetype ou do DirectWrite, então não corresponde perfeitamente nem ao Windows nem ao macOS
  Acho que seria mais preciso mostrar a renderização real do app em capturas de tela sem perdas
  A legibilidade de cada fonte muda conforme o tamanho, e o resultado também varia de acordo com o renderizador
  Testei várias fontes e, usando a Fira Code como referência, 8 eram melhores e 17 eram piores
  Link para os resultados do teste

  • Concordo totalmente. Mesmo com o mesmo tamanho em pixels, a fonte parece completamente diferente dependendo do ambiente
    Gosto muito da qualidade de renderização de fontes do macOS, mas não consegui reproduzir algo parecido no Linux

• Assim que vi <= virar uma ligatura (ligature), eliminei na hora
  Preferia que não brincassem com caracteres de código

  • Algumas fontes têm a haste do meio do “m” minúsculo mais curta, e gosto muito disso
    No fim, voltei para a minha antiga Ubuntu Mono. Pelo menos mantive a consistência
  • Esse recurso de ligaturas pode ser desativado nas configurações do terminal. Dá para ajustar em coisas como wezterm ou ghostty
  • O site tem uma opção de checkbox para desativar ligaturas
  • Gosto da maioria das ligaturas, mas queria poder desativar isso seletivamente
  • Eu também não gosto muito de ligaturas. Dá para desligar pela checkbox no canto superior direito do site

• Tenho uma recomendação para quem diz que não tem fonte: MAPLE MONO
  A legibilidade é excelente e a compatibilidade com Nerd Font também é muito boa
  Cheguei a receber elogios de pessoas ao redor por causa da minha fonte

  • Mas a inclinação e o espaçamento do ‘l’ em itálico diferem das outras letras, então parece visualmente desequilibrado
    Isso fica especialmente evidente em palavras como “null”
  • Compartilhando uma fonte menos conhecida, uma que eu gosto é a Lotion
    É fofa, limpa e ainda assim fácil de ler
  • Pessoalmente, acho que a Maple Mono passa uma sensação amadora, tipo Comic Sans
  • A vantagem da Maple Mono é que distingue bem ‘I’ de ‘l’ e ‘0’ de ‘O’
    Só falta uma diferenciação mais refinada, como a haste central curta do “m”
  • Não quero que o itálico vire letra cursiva dentro da IDE

• Gostei muito deste jogo, mas preferia comparações no estilo “Hot or Not” em vez de torneio
  É difícil escolher entre fontes parecidas, e eu queria ver a porcentagem de preferência

• Faltaram algumas fontes de que gosto, como Berkeley Mono, Iosevka e Cascadia Code
  Em vez disso apareceu Roboto Mono, mas, se você não gosta da renderização do “m” e do “r”, a fonte inteira parece estranha

  • Também existe a IoskeleyMono, que mistura Berkeley com Iosevka
  • Berkeley Mono foi a primeira fonte que comprei
    Ela é quase perfeita, e a ferramenta de customização também é excelente
    Para usar em um ambiente Nix precisei de algumas configurações meio hacky, mas ainda assim continuo usando com gosto
    Link para a minha versão modificada
  • Mesmo passando por várias fontes, no fim sempre volto para Ubuntu Mono
    Sinto que as fontes open source padrão já são boas o suficiente

• A fonte de programação que uso é comic-shanns-mono

  • Uma fonte chamada Codemonkey também pareceu interessante. O site tem muitas fontes em estilo quadrinhos
    Só que existe um bug em que o símbolo ‘+’ aparece como espaço em branco
  • Comecei a usar essa fonte enquanto trabalhava no projeto Zed, e passei a gostar cada vez mais dela
  • Ela lembra as fontes da era Smalltalk
  • Eu uso Comic Code Ligatures :D
  • Pelo nome, achei que não fosse gostar, mas no fim gostei muito mais do que esperava

• No fim escolhi Victor Mono, que já tinha usado durante alguns anos no passado
  No iPhone eu gostaria que houvesse uma barra de progresso, e também uma opção tipo “nunca vou usar esta fonte”
  A cada poucos anos acabo alternando entre fontes estreitas (Iosevka) e fontes largas (Azeret Mono)

  • Eu também mantive Victor Mono até bem tarde, mas no Firefox a renderização do símbolo @ não ficou boa
    No terminal estava ok, então parece ser uma questão de diferença entre renderizadores

• Hoje em dia uso principalmente Iosevka, mas antes já usei Ubuntu Mono, JetBrains Mono, PT Mono, Terminus e várias outras
  Entre elas, a Liberation Mono foi a mais fácil de ler
  Recentemente também gostei, de forma inesperada, da Cascadia Code

  • Foi uma pena a Cascadia não estar no site
    Depois de usar por algumas semanas, pareceu muito mais fácil de ler e achei até que fosse uma fonte maior, mas na verdade era menor e ainda assim mais legível

• No começo achei que não me importava tanto com fontes, mas ao ver Xanh Mono senti uma rejeição imediata
  No fim descobri que a fonte padrão do VS Code, Droid Sans Mono, e a Roboto Mono são quase iguais

  • Tive uma experiência parecida e estou tentando otimizar o terminal com Roboto
    Acho que o peso da fonte e o suporte a emoji podem ser melhores

• O jogo foi divertido, mas queria que houvesse um indicador de progresso
  Seria bom também mostrar resultados como 1º lugar, 2º lugar, semifinal e quartas de final

  • O progresso aparece à esquerda, mas não aparece no certificado
  • No celular existe um indicador de progresso escondido atrás do botão de menu