CodingFont: un juego que te ayuda a elegir una fuente para programar

• Un juego interactivo basado en la web que te permite comparar varias fuentes monoespaciadas para encontrar la fuente de programación que te resulte más fácil de leer
• En cada ronda se presentan dos fuentes, y cuando el usuario elige la que prefiere, se genera un resultado de recomendación personalizado
• Se pueden ajustar directamente elementos visuales como Font Ligatures, tamaño de fuente y cambio de tema para evaluarlas en condiciones similares a un entorno real de desarrollo
• Los ejemplos de código incluyen combinaciones de caracteres similares como 0, O, l, 1, lo que permite probar la capacidad de distinguir caracteres de cada fuente
• Está integrado con Studio de Typogram y ofrece una interfaz sencilla que se ejecuta directamente en el navegador para explorar y comparar fuentes

---

Funciones principales

• Puedes activar o desactivar la opción Font Ligatures para comparar fuentes con y sin ligaduras
• El tamaño de fuente (Font Size) se puede ajustar entre 8 y 36 para comprobar directamente la legibilidad en distintos entornos de pantalla
• Con las opciones Show Name y Theme puedes cambiar si se muestra el nombre de la fuente y el tema visual de la pantalla
• Todas las fuentes se comparan usando el mismo ejemplo de código JavaScript, lo que permite evaluarlas en condiciones parecidas a un entorno real de desarrollo

Composición del ejemplo de código

• El código de ejemplo incluye comentarios de una sola línea (//) y comentarios multilínea (/* ... */)
• Se define la función isMultipleOf usando sintaxis de arrow function, e incluye una lógica sencilla para comparar números y múltiplos
• En los nombres de variables se usan combinaciones de caracteres visualmente parecidos como 0, o, O, l, 1, I, lo que permite comprobar qué tan clara es la distinción en cada fuente
• Los resultados de la llamada a la función se muestran en consola, y se pone a prueba la identificación de caracteres mediante un ejemplo que trata 0 y 1 de forma diferente

Interacción y flujo de uso

• En cada ronda, el usuario puede elegir una fuente o moverse con las teclas de dirección (⇽, ⇾) para continuar la comparación
• Una vez hecha la elección, se pasa al siguiente par de fuentes y, con la repetición, se va identificando gradualmente la preferencia personal de legibilidad
• Con el botón Restart Game se puede reiniciar el juego y comenzar de inmediato una nueva sesión de comparación

Funciones adicionales y exploración

• Desde la pestaña Browse del menú superior se pueden explorar directamente varias fuentes para programación
• El enlace Studio permite ir a la herramienta de diseño tipográfico de Typogram
• Toda la interfaz está compuesta por una UI web sencilla que puede ejecutarse directamente en el navegador sin instalación adicional

[GN⁺]

Comentarios en Hacker News

• Lo que no me gusta de este juego es que el navegador renderiza la fuente directamente
  Chrome dibuja las fuentes de forma distinta a Freetype o DirectWrite, así que no coincide por completo ni con Windows ni con macOS
  Creo que sería más preciso mostrar el renderizado real de la app con capturas de pantalla sin pérdida
  La legibilidad de cada fuente cambia según el tamaño, y el resultado también varía según el renderizador
  Probé varias fuentes y, tomando Fira Code como referencia, encontré 8 mejores y 17 peores
  Enlace a los resultados de la prueba

  • Totalmente de acuerdo. Incluso con el mismo tamaño en píxeles, una fuente puede verse completamente distinta según el entorno
    Me encanta la calidad del renderizado de fuentes en macOS, pero no he logrado replicarla en Linux

• Vi que <= se convertía en una ligadura (ligature) y la descarté de inmediato
  Preferiría que no jugaran con los caracteres del código

  • Algunas fuentes tienen el trazo central de la “m” minúscula más corto, y eso me gusta mucho
    Al final volví a Ubuntu Mono, que era la que ya usaba. Al menos mantuve la consistencia
  • Esa función de ligaduras se puede desactivar en la configuración del terminal. Se puede ajustar en lugares como wezterm o ghostty
  • El sitio tiene una opción de casilla para desactivar las ligaduras
  • Me gustan la mayoría de las ligaduras, pero me gustaría poder desactivar esta de forma selectiva
  • A mí tampoco me gustan mucho las ligaduras. Se pueden desactivar con la casilla en la esquina superior derecha del sitio

• Quiero recomendar algo a quienes dicen que no tienen fuente favorita: MAPLE MONO
  Tiene una legibilidad excelente y también muy buena compatibilidad con Nerd Font
  Incluso gente cercana me ha elogiado la fuente al verla

  • Pero la inclinación y el espaciado de la ‘l’ en cursiva son distintos a los de otras letras, así que se ve visualmente desequilibrada
    Eso se nota mucho en palabras como “null”
  • Si vamos a compartir fuentes menos conocidas, una que me gusta es Lotion
    Es linda, limpia y aun así muy legible
  • Personalmente, Maple Mono me parece amateur, como Comic Sans
  • La ventaja de Maple Mono es que diferencia claramente entre ‘I’ y ‘l’, y entre ‘0’ y ‘O’
    Pero le falta una diferenciación más fina, como tener el trazo central de la “m” más corto
  • No quiero que la cursiva se convierta en escritura a mano dentro del IDE

• Me gusta muchísimo este juego, pero preferiría que la comparación fuera estilo “Hot or Not” en vez de tipo torneo
  Es difícil elegir entre fuentes parecidas, y me gustaría ver un porcentaje de preferencia

• Faltaban algunas fuentes que me gustan: Berkeley Mono, Iosevka y Cascadia Code
  En cambio apareció Roboto Mono, pero si no te convence cómo se renderizan la “m” y la “r”, toda la fuente se siente rara

  • También existe IoskeleyMono, que combina Berkeley e Iosevka
  • Berkeley Mono fue la primera fuente que compré
    Está casi perfecta, y sus herramientas de personalización también son excelentes
    Para usarla en un entorno Nix necesité algo de configuración medio hacky, pero aun así la sigo usando con gusto
    Enlace a mi versión modificada
  • Aunque pruebo varias fuentes, al final siempre termino volviendo a Ubuntu Mono
    Siento que las fuentes open source básicas ya son bastante buenas

• La fuente de programación que uso es comic-shanns-mono

  • La fuente Codemonkey también me pareció interesante. En el sitio hay muchas fuentes estilo cómic
    Aunque tiene un bug donde el símbolo ‘+’ se muestra como un espacio en blanco
  • Empecé a usar esta fuente mientras trabajaba en el proyecto Zed, y cada vez me gusta más
  • Me recuerda a las fuentes de la época de Smalltalk
  • Yo uso Comic Code Ligatures :D
  • Por el puro nombre pensé que no me gustaría, pero al final me gustó mucho más de lo que esperaba

• Al final elegí Victor Mono, que ya había usado durante varios años antes
  En iPhone estaría bien tener una barra de progreso, y también una opción tipo “esta fuente no la usaría jamás”
  Cada ciertos años termino alternando entre fuentes angostas (Iosevka) y fuentes anchas (Azeret Mono)

  • Yo también mantuve Victor Mono hasta bastante avanzada la selección, pero en Firefox el renderizado del símbolo @ no me gustó
    En la terminal se veía bien, así que parece un tema de diferencias entre renderizadores

• Hoy en día uso sobre todo Iosevka, pero antes pasé por Ubuntu Mono, JetBrains Mono, PT Mono, Terminus y otras más
  De todas ellas, Liberation Mono fue la más fácil de leer
  Últimamente Cascadia Code también me ha gustado más de lo que esperaba

  • Me dio pena que Cascadia no estuviera en el sitio
    Después de usarla unas semanas, me resultó mucho más legible; pensé que era una fuente más grande, pero en realidad era más pequeña y aun así más legible

• Al principio pensé que no me importaban mucho las fuentes, pero al ver Xanh Mono sentí un rechazo instantáneo
  Al final descubrí que la fuente predeterminada de VS Code, Droid Sans Mono, y Roboto Mono son casi iguales

  • A mí me pasó algo parecido, y estoy intentando optimizar la terminal con Roboto
    Parece que podría ofrecer mejor peso de fuente y soporte para emojis

• Este juego estuvo divertido, pero ojalá tuviera un indicador de progreso
  También estaría bien mostrar resultados como 1.º, 2.º, semifinales o cuartos de final

  • El progreso sí se muestra a la izquierda, pero no aparece en el certificado
  • En móvil hay un indicador de progreso oculto detrás del botón del menú