CodingFont: Ein Spiel zur Auswahl der passenden Coding-Schriftart

• Ein webbasiertes interaktives Spiel, mit dem sich verschiedene Monospace-Schriftarten vergleichen lassen, um die zum eigenen Lesen angenehmste Schriftart fürs Coden zu finden
• In jeder Runde werden zwei Schriftarten angezeigt; wählt der Nutzer die bevorzugte aus, wird ein personalisiertes Empfehlungsergebnis erstellt
• Visuelle Elemente wie Font Ligatures, Schriftgrößenanpassung und Theme-Wechsel lassen sich direkt einstellen, sodass die Bewertung unter Bedingungen erfolgen kann, die einer echten Entwicklungsumgebung ähneln
• Die Codebeispiele enthalten ähnliche Zeichenkombinationen wie 0, O, l, 1, wodurch sich die Zeichenunterscheidbarkeit der einzelnen Schriftarten testen lässt
• Die Anwendung ist mit Studio von Typogram verknüpft und unterstützt das Erkunden und Vergleichen von Schriftarten über eine einfache UI, die direkt im Browser läuft

---

Hauptfunktionen

• Über die Option Font Ligatures lässt sich der Vergleich zwischen Schriftarten mit und ohne Ligaturen aktivieren oder deaktivieren
• Die Schriftgröße (Font Size) kann im Bereich von 8 bis 36 angepasst werden, um die Lesbarkeit in verschiedenen Bildschirmumgebungen direkt zu prüfen
• Über Show Name und Theme lässt sich steuern, ob der Schriftname angezeigt wird, und das Bildschirmthema ändern
• Alle Schriftarten werden anhand desselben JavaScript-Codebeispiels verglichen, sodass eine Beurteilung unter Bedingungen ähnlich einer realen Entwicklungsumgebung möglich ist

Aufbau des Codebeispiels

• Der Beispielcode enthält einzeilige Kommentare (//) und mehrzeilige Kommentare (/* ... */)
• Es ist die Funktion isMultipleOf mit der Syntax einer Arrow Function definiert, die eine einfache Logik zum Vergleich von Zahlen und Vielfachen enthält
• In Variablennamen werden ähnlich aussehende Zeichenkombinationen wie 0, o, O, l, 1, I verwendet, um zu prüfen, wie klar sich Zeichen je nach Schriftart unterscheiden lassen
• Die Ergebnisse der Funktionsaufrufe werden in der Konsole ausgegeben; anhand eines Beispiels, das 0 und 1 unterschiedlich behandelt, lässt sich die Zeichenunterscheidbarkeit testen

Interaktion und Nutzungsablauf

• Nutzer wählen in jeder Runde eine Schriftart aus oder bewegen sich mit den Pfeiltasten (⇽, ⇾) durch den Vergleich
• Nach einer Auswahl wird zum nächsten Schriftartenpaar gewechselt; durch Wiederholung wird die persönliche Lesbarkeitspräferenz schrittweise ermittelt
• Mit der Schaltfläche Restart Game kann das Spiel neu gestartet und sofort eine neue Vergleichssitzung begonnen werden

Zusatzfunktionen und Erkundung

• Über den Reiter Browse im oberen Menü lassen sich verschiedene Coding-Schriftarten direkt erkunden
• Über den Link Studio gelangt man zum Schriftgestaltungs-Tool von Typogram
• Die gesamte Oberfläche ist als einfache webbasierte UI aufgebaut und kann ohne Installation direkt im Browser verwendet werden

[GN⁺]

Hacker-News-Kommentare

• Was mir an diesem Spiel nicht gefällt, ist, dass der Browser die Schrift direkt rendert
  Chrome zeichnet Fonts anders als Freetype oder DirectWrite und entspricht daher weder Windows noch macOS vollständig
  Ich denke, es wäre genauer, verlustfreie Screenshots des Renderings in echten Apps zu zeigen
  Die Lesbarkeit unterscheidet sich je nach Fontgröße, und auch je nach Renderer fallen die Ergebnisse anders aus
  Ich habe mehrere Fonts getestet; gemessen an Fira Code waren 8 besser und 17 schlechter
  Link zu den Testergebnissen

  • Stimme völlig zu. Selbst bei derselben Pixelgröße sehen Fonts je nach Umgebung komplett anders aus
    Ich liebe die Qualität des Font-Renderings unter macOS, aber unter Linux habe ich nichts Vergleichbares hinbekommen

• Ich habe es sofort ausgeschlossen, als ich gesehen habe, dass <= zu einer Ligatur wird
  Mit Code-Zeichen sollte man nicht herumspielen

  • Bei manchen Fonts ist der mittlere Strich des kleinen „m“ kürzer, und genau das gefällt mir sehr
    Am Ende bin ich wieder bei meinem bisherigen Ubuntu Mono gelandet. Immerhin konsistent
  • Solche Ligatur-Funktionen kann man in den Terminal-Einstellungen abschalten. Das lässt sich etwa in wezterm oder ghostty anpassen
  • Auf der Seite gibt es eine Checkbox-Option, um Ligaturen zu deaktivieren
  • Die meisten Ligaturen mag ich, aber bei dieser hier hätte ich gern die Möglichkeit, sie selektiv zu deaktivieren
  • Ich mag Ligaturen auch nicht besonders. Man kann sie über die Checkbox oben rechts auf der Seite ausschalten

• Für Leute, die sagen, sie hätten keinen passenden Font, möchte ich MAPLE MONO empfehlen
  Sehr gut lesbar und mit guter Nerd-Font-Kompatibilität
  Leute in meinem Umfeld haben meinen Font sogar ausdrücklich gelobt

  • Allerdings wirken die Neigung und der Abstand des kursiven „l“ im Vergleich zu anderen Zeichen visuell unausgewogen
    Besonders bei Wörtern wie „null“ fällt dieser Unterschied stark auf
  • Wenn wir schon weniger bekannte Fonts teilen: Ich mag Lotion
    Niedlich und sauber, dabei gut lesbar
  • Persönlich wirkt Maple Mono auf mich so amateurhaft wie Comic Sans
  • Die Stärke von Maple Mono ist, dass sich „I“ und „l“ sowie „0“ und „O“ klar unterscheiden
    Allerdings fehlt etwas von der feinen Differenzierung wie etwa ein kürzerer Mittelstrich beim „m“
  • Dass Kursivschrift handschriftlich wird, möchte ich in einer IDE nicht

• Mir gefällt dieses Spiel sehr, aber statt eines Turnierformats hätte ich lieber Vergleiche im Stil von „Hot or Not“
  Zwischen ähnlichen Fonts ist die Auswahl schwierig, und ich würde gern Prozentwerte der Präferenz sehen

• Meine Lieblingsfonts Berkeley Mono, Iosevka und Cascadia Code haben gefehlt
  Stattdessen war Roboto Mono dabei, und wenn einem das Rendering von „m“ und „r“ nicht gefällt, wirkt der ganze Font seltsam

  • Es gibt auch IoskeleyMono, eine Kombination aus Berkeley und Iosevka
  • Berkeley Mono war der erste Font, den ich gekauft habe
    Er ist nahezu perfekt, und auch das Customizing-Tool ist großartig
    Um ihn in einer Nix-Umgebung zu nutzen, brauchte es ein wenig hackige Konfiguration, aber ich verwende ihn immer noch sehr gern
    Link zu meiner modifizierten Version
  • Egal wie viele Fonts ich ausprobiere, am Ende kehre ich doch wieder zu Ubuntu Mono zurück
    Ich finde, auch die standardmäßigen Open-Source-Fonts sind völlig in Ordnung

• Mein Coding-Font ist comic-shanns-mono

  • Der Font Codemonkey war auch interessant. Auf der Website gibt es viele comicartige Fonts
    Allerdings gibt es einen Bug, bei dem das „+“-Zeichen als Leerzeichen angezeigt wird
  • Ich habe angefangen, diesen Font bei der Arbeit am Zed-Projekt zu verwenden, und er gefällt mir immer besser
  • Er erinnert mich an die Fonts aus der Smalltalk-Zeit
  • Ich nutze Comic Code Ligatures :D
  • Dem Namen nach dachte ich erst, er wäre nichts für mich, aber tatsächlich gefällt er mir deutlich besser als erwartet

• Am Ende habe ich mich für Victor Mono entschieden, einen Font, den ich früher schon einige Jahre verwendet hatte
  Auf dem iPhone hätte ich gern eine Fortschrittsanzeige, und auch eine Option wie „Diesen Font würde ich niemals verwenden“ wäre gut
  Alle paar Jahre wechsle ich zwischen schmalen Fonts (Iosevka) und breiten Fonts (Azeret Mono) hin und her

  • Ich hatte Victor Mono ebenfalls ziemlich lange im Rennen, aber in Firefox war das Rendering des @-Zeichens nicht besonders gut
    Im Terminal sah es okay aus, daher scheint es eher ein Unterschied zwischen den Renderern zu sein

• Zurzeit nutze ich hauptsächlich Iosevka, habe früher aber auch Ubuntu Mono, JetBrains Mono, PT Mono, Terminus und andere verwendet
  Davon war Liberation Mono am leichtesten zu lesen
  In letzter Zeit gefällt mir überraschenderweise auch Cascadia Code

  • Schade, dass Cascadia auf der Seite fehlte
    Nach ein paar Wochen Nutzung war es viel leichter zu lesen, sodass ich dachte, der Font sei größer — tatsächlich war er kleiner und trotzdem besser lesbar

• Anfangs dachte ich, Fonts seien mir nicht besonders wichtig, aber bei Xanh Mono hatte ich sofort eine Abneigung
  Am Ende habe ich festgestellt, dass der VS-Code-Standardfont Droid Sans Mono und Roboto Mono fast gleich sind

  • Ich hatte eine ähnliche Erfahrung und versuche gerade, Roboto für das Terminal zu optimieren
    Font-Gewicht und Emoji-Unterstützung könnten besser sein

• Das Spiel hat Spaß gemacht, aber ich hätte gern eine Anzeige des Fortschritts
  Es wäre auch schön, Ergebnisse wie 1. Platz, 2. Platz, Halbfinale oder Viertelfinale zu sehen

  • Der Fortschritt wird links angezeigt, erscheint aber nicht auf dem Zertifikat
  • Auf Mobilgeräten gibt es eine versteckte Fortschrittsanzeige hinter dem Menü-Button