CodingFont : un jeu pour vous aider à choisir une police de codage

• Un jeu interactif web permettant de comparer diverses polices monospace afin de trouver la police de codage la plus lisible pour soi
• À chaque manche, deux polices sont proposées, et lorsque l’utilisateur choisit celle qu’il préfère, un résultat de recommandation personnalisé est généré
• Il est possible d’ajuster directement des éléments visuels comme les font ligatures, la taille de police ou le changement de thème afin d’évaluer les polices dans des conditions proches d’un véritable environnement de développement
• Les exemples de code incluent des combinaisons de caractères similaires comme 0, O, l, 1, ce qui permet de tester la capacité de distinction des caractères selon la police
• Le service est intégré à Studio de Typogram et propose une interface simple exécutable directement dans le navigateur pour explorer et comparer les polices

---

Fonctionnalités principales

• L’option Font Ligatures peut être activée ou désactivée pour comparer des polices avec ou sans ligatures
• La taille de police (Font Size) peut être réglée de 8 à 36 afin de vérifier directement la lisibilité dans différents environnements d’affichage
• Les réglages Show Name et Theme permettent de modifier l’affichage du nom de la police ainsi que le thème de l’écran
• Chaque police est comparée à l’aide du même exemple de code JavaScript, ce qui permet une évaluation dans des conditions proches d’un environnement de développement réel

Composition de l’exemple de code

• Le code d’exemple comprend des commentaires sur une ligne (//) et des commentaires multilignes (/* ... */)
• Une fonction isMultipleOf utilisant la syntaxe des fonctions fléchées (arrow function) est définie, avec une logique simple de comparaison entre un nombre et un multiple
• Les noms de variables utilisent des combinaisons de caractères qui se ressemblent comme 0, o, O, l, 1, I, afin de vérifier la clarté de distinction selon la police
• Le résultat de l’appel de fonction est affiché dans la console, et des exemples traitant différemment 0 et 1 permettent de tester la distinction visuelle des caractères

Interaction et déroulement d’utilisation

• À chaque manche, l’utilisateur choisit une police ou se déplace avec les touches fléchées (⇽, ⇾) pour poursuivre la comparaison
• Une fois le choix effectué, on passe à la paire de polices suivante, et la répétition permet d’identifier progressivement les préférences personnelles de lisibilité
• Le bouton Restart Game permet de relancer le jeu et de commencer immédiatement une nouvelle session de comparaison

Fonctionnalités supplémentaires et exploration

• L’onglet Browse du menu supérieur permet d’explorer directement différentes polices de codage
• Le lien Studio permet d’accéder à l’outil de conception de polices de Typogram
• L’ensemble de l’interface repose sur une UI web simple, utilisable directement dans le navigateur sans installation préalable

[GN⁺]

Avis Hacker News

• Ce qui me déplaît dans ce jeu, c’est que le navigateur rend directement la police
  Chrome dessine les polices différemment de Freetype ou DirectWrite, donc le résultat ne correspond jamais parfaitement ni à Windows ni à macOS
  Je pense qu’il serait plus précis d’afficher le rendu réel de l’application via des captures d’écran sans perte
  La lisibilité varie selon la taille pour chaque police, et le résultat change aussi selon le moteur de rendu
  J’ai testé plusieurs polices ; en prenant Fira Code comme référence, j’en ai trouvé 8 meilleures et 17 moins bonnes
  Lien vers les résultats du test

  • Entièrement d’accord. Même à taille en pixels identique, une police peut avoir un rendu complètement différent selon l’environnement
    J’adore vraiment la qualité du rendu des polices sur macOS, mais je n’ai jamais réussi à obtenir quelque chose de comparable sous Linux

• J’ai éliminé immédiatement toute police dès que j’ai vu <= transformé en ligature
  J’aimerais qu’on ne bidouille pas avec les caractères du code

  • Dans certaines polices, le pilier central du « m » minuscule est plus court, et j’aime beaucoup ce détail
    Au final, je suis revenu à Ubuntu Mono, que j’utilisais déjà. Au moins, ça reste cohérent
  • On peut désactiver ce genre de ligatures dans les réglages du terminal. C’est configurable dans wezterm ou ghostty, par exemple
  • Il y a une case à cocher sur le site pour désactiver les ligatures
  • J’aime la plupart des ligatures, mais pour celle-ci, j’aimerais qu’on puisse la désactiver sélectivement
  • Moi non plus, je n’aime pas trop les ligatures. On peut les couper avec la case en haut à droite du site

• Pour ceux qui disent ne pas trouver de police convenable, j’aimerais recommander MAPLE MONO
  Elle est très lisible et offre une bonne compatibilité Nerd Font
  Des gens autour de moi ont même complimenté ma police en la voyant

  • Mais dans l’italique, l’inclinaison et l’espacement du « l » diffèrent des autres lettres, ce qui donne un aspect visuellement déséquilibré
    Cela se remarque particulièrement dans un mot comme « null »
  • Pour partager une police moins connue, celle que j’aime bien est Lotion
    Elle est mignonne, propre et reste très lisible
  • Personnellement, Maple Mono me paraît amateur, un peu comme Comic Sans
  • L’avantage de Maple Mono, c’est la distinction très claire entre « I » et « l », ainsi qu’entre « 0 » et « O »
    En revanche, elle manque de différenciations plus fines, comme le pilier central raccourci du « m »
  • Je n’ai pas envie que l’italique se transforme en écriture manuscrite dans un IDE

• J’aime beaucoup ce jeu, mais j’aurais préféré des comparaisons au format « Hot or Not » plutôt qu’un système à élimination directe
  Il est difficile de choisir entre des polices similaires, et j’aimerais voir un pourcentage de préférence

• Mes polices préférées, Berkeley Mono, Iosevka et Cascadia Code, n’étaient pas présentes
  À la place, il y avait Roboto Mono, mais si le rendu du « m » et du « r » ne me plaît pas, toute la police me paraît bancale

  • Il existe aussi IoskeleyMono, un mélange de Berkeley et d’Iosevka
  • Berkeley Mono est la première police que j’ai achetée
    Elle est presque parfaite, et son outil de personnalisation est excellent
    Pour l’utiliser dans un environnement Nix, il m’a fallu quelques réglages un peu bricolés, mais je continue malgré tout à l’utiliser avec plaisir
    Lien vers ma version modifiée
  • Même après avoir testé plusieurs polices, je finis toujours par revenir à Ubuntu Mono
    J’ai l’impression que les polices open source par défaut sont déjà largement suffisantes

• La police de code que j’utilise est comic-shanns-mono

  • La police Codemonkey m’a aussi intrigué. Il y a beaucoup de polices façon BD sur ce site
    En revanche, il y a un bug : le symbole « + » s’affiche comme un espace
  • J’ai commencé à utiliser cette police en travaillant sur le projet Zed, et je l’apprécie de plus en plus
  • Ça me rappelle les polices de l’époque Smalltalk
  • Moi, j’utilise Comic Code Ligatures :D
  • À voir juste le nom, je pensais que ça ne me plairait pas, mais en fait je l’aime bien plus que prévu

• J’ai fini par choisir Victor Mono, une police que j’avais déjà utilisée pendant plusieurs années
  Sur iPhone, j’aimerais bien avoir une barre de progression, ainsi qu’une option du genre « je n’utiliserai jamais cette police »
  Tous les quelques années, je fais l’aller-retour entre les polices étroites (Iosevka) et les polices larges (Azeret Mono)

  • Moi aussi, j’ai gardé Victor Mono jusqu’assez tard, mais le rendu du symbole @ dans Firefox ne me plaisait pas
    Dans le terminal, ça allait, donc cela semble venir d’une différence de moteur de rendu

• Ces derniers temps, j’utilise surtout Iosevka, mais avant cela j’ai essayé Ubuntu Mono, JetBrains Mono, PT Mono, Terminus et bien d’autres
  Parmi elles, c’est Liberation Mono que j’ai trouvée la plus facile à lire
  Dernièrement, Cascadia Code me plaît aussi de façon assez inattendue

  • Dommage que Cascadia ne soit pas sur le site
    Après quelques semaines d’utilisation, je l’ai trouvée bien plus lisible ; je croyais même qu’elle était plus grande, alors qu’en réalité elle est plus petite tout en restant plus lisible

• Au départ, je pensais ne pas accorder beaucoup d’importance aux polices, mais en voyant Xanh Mono, j’ai ressenti un rejet immédiat
  J’ai fini par comprendre que la police par défaut de VS Code, Droid Sans Mono, et Roboto Mono, se ressemblent presque

  • J’ai eu une expérience similaire, et j’essaie d’optimiser le terminal avec Roboto
    Le poids de police et la prise en charge des emoji me semblent meilleurs

• Ce jeu était amusant, mais j’aimerais qu’il affiche la progression
  Ce serait bien aussi de montrer des résultats comme 1re place, 2e place, demi-finales ou quarts de finale

  • La progression s’affiche à gauche, mais n’apparaît pas sur le certificat
  • Sur mobile, il y a un indicateur de progression caché derrière le bouton du menu