CodingFont: コーディングフォント選びを手助けするゲーム

 (codingfont.com)
1 ポイント 投稿者 GN⁺ 2026-03-31 | 1件のコメント | WhatsAppで共有
  • さまざまなモノスペースフォントを比較しながら、自分にとって最も読みやすいコーディング用フォントを見つけられるWebベースのインタラクティブゲーム
  • 各ラウンドで2種類のフォントが提示され、ユーザーがより好みのフォントを選ぶと、個人向けの推薦結果が生成される
  • Font Ligatures、フォントサイズ調整、テーマ変更などの視覚要素を直接調整し、実際の開発環境に近い条件で評価できる
  • コード例には 0, O, l, 1 などの似た文字の組み合わせが含まれており、フォントごとの文字の識別しやすさをテストできる
  • TypogramのStudioと連携しており、ブラウザですぐ実行できるシンプルなUIでフォントの探索と比較を支援する

主な機能

  • Font Ligatures オプションのオン・オフにより、合字機能のあるフォントとないフォントを比較できる
  • フォントサイズ(Font Size) を8〜36の範囲で調整し、さまざまな画面環境での可読性を直接確認できる
  • Show Name および Theme 設定により、フォント名の表示有無と画面テーマを変更できる
  • 各フォントは同一のJavaScriptコード例を使って比較され、実際の開発環境に近い条件で判別できる

コード例の構成

  • 例示コードには単一行コメント(//)と複数行コメント(/* ... */)が含まれる
  • アロー関数(arrow function) 構文を使った isMultipleOf 関数が定義されており、数値と倍数を比較するシンプルなロジックを含む
  • 変数名には 0, o, O, l, 1, I などの見分けにくい文字の組み合わせが使われており、フォントごとの判別の明確さを確認できる
  • 関数呼び出しの結果はコンソールに出力され、0 と 1 を異なるものとして扱う例を通じて文字の識別しやすさをテストできる

インタラクションと利用の流れ

  • ユーザーは各ラウンドでフォントを選択するか、方向キー(⇽, ⇾)で移動しながら比較を進める
  • 選択が完了すると次のフォントペアへ進み、繰り返しを通じて個人の可読性の好みを段階的に把握できる
  • Restart Game ボタンでゲームを再開し、新しい比較セッションをすぐに始められる

追加機能と探索

  • 上部メニューの Browse タブから、さまざまなコーディングフォントを直接閲覧できる
  • Studio リンクから、Typogramのフォントデザインツールへ移動できる
  • インターフェース全体はシンプルなWebベースのUIで構成されており、別途インストール不要でブラウザからすぐ実行できる

関連記事

1件のコメント

 
GN⁺ 2026-03-31
Hacker Newsの意見

  • このゲームで気に入らないのは、ブラウザがフォントを直接レンダリングしている点
    ChromeはFreetypeやDirectWriteとは違う描画をするので、WindowsにもmacOSにも完全には一致しない
    実際のアプリのレンダリングを劣化のないスクリーンショットで見せるほうが、より正確だと思う
    フォントごとにサイズによって可読性が変わるし、レンダラーごとにも結果が異なる
    いくつかのフォントを試したところ、Fira Codeを基準にすると8個はそれより良く、17個はそれより悪かった
    テスト結果リンク

    • まったく同感。同じピクセルサイズでも環境によってフォントの見え方はまったく違う
      macOSのフォントレンダリング品質は本当に好きだが、Linuxでは似たようには再現できなかった

  • <=が**合字（ligature）**に変わるのを見て即脱落にした
    コードの文字には余計な細工をしないでほしい

    • フォントによっては小文字の「m」の中央の縦棒が短くて、それがすごく気に入っている
      結局、もともと使っていたUbuntu Monoに戻った。一貫性は保たれたわけだ
    • こうした合字機能はターミナル設定で無効にできる。weztermやghosttyのようなところで調整可能
    • サイトには合字を無効にするチェックボックスオプションがある
    • 合字の大半は好きだが、これは選択的に無効化できるといいと思う
    • 自分も合字はあまり好きではない。サイト右上のチェックボックスで無効にできる

  • フォントが見つからないと言っている人に勧めたいのが MAPLE MONO
    可読性が高く、Nerd Font互換性も良い
    周りの人たちも私のフォントを見て褒めるほどだった

    • ただ、イタリック体の「l」の傾きや間隔が他の文字と違っていて、視覚的にアンバランスに見える
      特に「null」のような単語でその違いが目立つ
    • あまり知られていないフォントを挙げるなら、私が好きなのは Lotion
      かわいくてすっきりしていながら、可読性も良い
    • 個人的にはMaple MonoはComic Sansのようにアマチュアっぽく感じる
    • Maple Monoの長所は、「I」と「l」、「0」と「O」の区別が明確なこと
      ただし「m」の中央の縦棒が短いといった細かな差別化は足りない
    • イタリック体が筆記体に変わることはIDEでは望まない

  • このゲームはとても気に入ったが、トーナメント形式ではなく「Hot or Not」方式で比較してほしい
    似たフォント同士だと選びづらいし、好みのパーセンテージも見たい

  • 自分の好きなフォントであるBerkeley Mono、Iosevka、Cascadia Codeが入っていなかった
    その代わりRoboto Monoが出てきたが、「m」と「r」のレンダリングが気に入らないとフォント全体がおかしく感じられる

    • BerkeleyとIosevkaを組み合わせた IoskeleyMono もある
    • Berkeley Monoは自分が初めて購入したフォントだ
      完璧に近く、カスタマイズツールも素晴らしい
      Nix環境で使うには少しハック的な設定が必要だったが、それでも今なお愛用している
      自分の修正版リンク
    • いろいろなフォントを試しても、結局はUbuntu Monoに戻ってくる
      標準的なオープンソースフォントでも十分に良いと感じる

  • 自分が使っているコーディング用フォントは comic-shanns-mono

    • Codemonkeyというフォントも面白かった。サイトには漫画風フォントがたくさんある
      ただし「+」記号が空白として表示されるバグがある
    • Zedプロジェクトでこのフォントを使い始めたが、だんだん気に入ってきた
    • Smalltalk時代のフォントを思い出す
    • 私はComic Code Ligaturesを使っている :D
    • 名前だけ見たときは微妙そうだと思ったが、予想以上に気に入った

  • 最終的にVictor Monoを選んだが、以前にも数年間使っていたフォントだった
    iPhoneでは進行バーがあるとよく、「このフォントは絶対に使わない」といったオプションもほしい
    数年ごとに**細いフォント（Iosevka）と広いフォント（Azeret Mono）**の間を行き来している

    • 自分もVictor Monoをかなり終盤まで残したが、Firefoxでは**@記号のレンダリング**がいまひとつだった
      ターミナルでは問題なかったので、レンダラーの違いによるものだと思う

  • 最近はIosevkaを主に使っているが、以前はUbuntu Mono、JetBrains Mono、PT Mono、Terminusなどいろいろ使ってきた
    その中ではLiberation Monoが最も読みやすかった
    最近ではCascadia Codeも意外と気に入っている

    • Cascadiaがサイトになくて残念だった
      数週間使ってみたらずっと読みやすくて、もっと大きいフォントだと思っていたが、実際にはより小さいのに可読性が高かった

  • 最初はフォントにそれほど関心がないと思っていたが、Xanh Monoを見て即座に拒否感を覚えた
    結局、VS CodeのデフォルトフォントであるDroid Sans MonoとRoboto Monoがほぼ同じだと分かった

    • 自分も似た経験があり、Robotoでターミナル最適化を試している
      フォントウェイトや絵文字サポートがより良さそうだ

  • このゲームは面白かったが、進行状況表示があるとよかった
    1位、2位、準決勝、ベスト8のような結果も見せてほしい

    • 進行状況は左側に表示されるが、認定証には出ない
    • モバイルではメニューボタンの後ろに隠れた進行表示がある