CodingFont: game untuk membantu memilih font coding

• Game interaktif berbasis web untuk membandingkan berbagai font monospace dan menemukan font coding yang paling nyaman dibaca sesuai preferensi pengguna
• Di setiap ronde, dua font ditampilkan, dan ketika pengguna memilih font yang lebih disukai, akan dihasilkan rekomendasi yang dipersonalisasi
• Elemen visual seperti Font Ligatures, penyesuaian ukuran font, dan perubahan tema dapat diatur langsung sehingga evaluasi bisa dilakukan dalam kondisi yang mirip dengan lingkungan pengembangan nyata
• Contoh kode mencakup kombinasi karakter yang mirip seperti 0, O, l, 1, sehingga kemampuan pembedaan karakter tiap font dapat diuji
• Terintegrasi dengan Studio dari Typogram, serta mendukung eksplorasi dan perbandingan font melalui UI sederhana yang bisa langsung dijalankan di browser

---

Fitur utama

• Opsi Font Ligatures dapat dinyalakan atau dimatikan untuk membandingkan font yang mendukung ligature dan yang tidak
• Ukuran font (Font Size) dapat diatur dalam rentang 8~36 untuk memeriksa keterbacaan secara langsung pada berbagai lingkungan layar
• Melalui pengaturan Show Name dan Theme, pengguna dapat mengubah apakah nama font ditampilkan serta mengganti tema layar
• Setiap font dibandingkan menggunakan contoh kode JavaScript yang sama, sehingga penilaian dapat dilakukan dalam kondisi yang menyerupai lingkungan pengembangan nyata

Komposisi contoh kode

• Contoh kode mencakup komentar satu baris (//) dan komentar multibaris (/* ... */)
• Fungsi isMultipleOf didefinisikan menggunakan sintaks arrow function, dan mencakup logika sederhana untuk membandingkan angka dan kelipatannya
• Nama variabel memakai kombinasi karakter yang tampak mirip seperti 0, o, O, l, 1, I, sehingga kejelasan pembedaan antar karakter pada tiap font bisa diperiksa
• Hasil pemanggilan fungsi ditampilkan di konsol, dan kemampuan pembedaan karakter dapat diuji melalui contoh yang menangani 0 dan 1 secara berbeda

Interaksi dan alur penggunaan

• Pengguna dapat memilih font di setiap ronde atau berpindah menggunakan tombol arah (⇽, ⇾) saat melakukan perbandingan
• Setelah pilihan selesai, proses berlanjut ke pasangan font berikutnya, dan melalui pengulangan, preferensi keterbacaan pribadi pengguna dipetakan secara bertahap
• Dengan tombol Restart Game, permainan dapat dimulai ulang untuk langsung memulai sesi perbandingan baru

Fitur tambahan dan penelusuran

• Melalui tab Browse di menu atas, pengguna dapat menelusuri berbagai font coding secara langsung
• Tautan Studio memungkinkan perpindahan ke alat desain font milik Typogram
• Seluruh antarmuka disusun sebagai UI berbasis web yang sederhana dan dapat langsung dijalankan di browser tanpa instalasi terpisah

[GN⁺]

Komentar Hacker News

• Hal yang tidak kusukai dari game ini adalah browser merender font secara langsung
  Chrome menggambar font secara berbeda dari Freetype atau DirectWrite, jadi hasilnya tidak benar-benar cocok dengan Windows maupun macOS
  Menurutku akan lebih akurat jika menampilkan screenshot tanpa kehilangan kualitas dari rendering aplikasi yang sebenarnya
  Keterbacaan tiap font berubah tergantung ukurannya, dan hasilnya juga berbeda menurut renderer
  Aku sudah menguji beberapa font, dan dengan Fira Code sebagai patokan, ada 8 yang lebih baik dan 17 yang lebih buruk
  Tautan hasil pengujian

  • Sangat setuju. Pada ukuran piksel yang sama pun, font bisa terlihat sangat berbeda tergantung lingkungannya
    Aku sangat suka kualitas rendering font di macOS, tapi di Linux aku belum berhasil mendapatkan hasil yang mirip

• Aku langsung mendiskualifikasikannya begitu melihat <= berubah menjadi ligatur
  Sebaiknya jangan macam-macam dengan karakter kode

  • Beberapa font punya batang tengah huruf kecil “m” yang pendek, dan aku sangat suka itu
    Pada akhirnya aku kembali ke Ubuntu Mono yang biasa kupakai. Setidaknya konsisten
  • Fitur ligatur seperti ini bisa dimatikan di pengaturan terminal
    Bisa diatur di wezterm atau ghostty
  • Ada opsi kotak centang di situs untuk mematikan ligatur
  • Aku suka kebanyakan ligatur, tapi untuk yang ini aku ingin ada opsi menonaktifkan secara selektif
  • Aku juga kurang suka ligatur. Bisa dimatikan lewat kotak centang di kanan atas situs

• Ada yang ingin kurekomendasikan untuk orang-orang yang bilang tidak punya font pilihan — yaitu MAPLE MONO
  Keterbacaannya sangat bagus, dan kompatibilitas Nerd Font-nya juga baik
  Bahkan orang-orang di sekitarku sampai memuji font yang kupakai

  • Tapi kemiringan dan jarak huruf ‘l’ pada italic berbeda dari huruf lain, jadi terlihat tidak seimbang secara visual
    Perbedaan itu особенно terlihat pada kata seperti “null”
  • Kalau mau berbagi font yang kurang dikenal, favoritku adalah Lotion
    Lucu dan rapi, tapi tetap mudah dibaca
  • Secara pribadi, Maple Mono terasa amatiran seperti Comic Sans
  • Kelebihan Maple Mono adalah perbedaan antara ‘I’ dan ‘l’, serta ‘0’ dan ‘O’, sangat jelas
    Hanya saja tidak ada pembedaan halus seperti batang tengah “m” yang pendek
  • Aku tidak ingin italic berubah jadi tulisan tangan di IDE

• Aku sangat suka game ini, tapi rasanya akan lebih bagus jika perbandingannya model “Hot or Not”, bukan gaya turnamen
  Sulit memilih di antara font-font yang mirip, dan aku ingin melihat persentase preferensi

• Font favoritku seperti Berkeley Mono, Iosevka, dan Cascadia Code tidak ada
  Sebagai gantinya muncul Roboto Mono, tapi kalau rendering “m” dan “r”-nya tidak cocok, seluruh font jadi terasa aneh

  • Ada juga IoskeleyMono, gabungan Berkeley dan Iosevka
  • Berkeley Mono adalah font pertama yang pernah kubeli
    Hampir sempurna, dan alat kustomisasinya juga luar biasa
    Untuk memakainya di lingkungan Nix memang perlu sedikit konfigurasi ala hack, tapi aku masih sering memakainya
    Tautan versi modifikasiku
  • Setelah mencoba banyak font, pada akhirnya aku selalu kembali ke Ubuntu Mono
    Aku merasa font open source bawaan pun sudah cukup bagus

• Font coding yang kupakai adalah comic-shanns-mono

  • Font bernama Codemonkey juga menarik. Situsnya punya banyak font bergaya komik
    Hanya saja ada bug di mana simbol ‘+’ ditampilkan sebagai spasi
  • Aku mulai memakai font ini saat mengerjakan proyek Zed, dan makin lama makin suka
  • Ini mengingatkanku pada font era Smalltalk
  • Aku memakai Comic Code Ligatures :D
  • Dari namanya kupikir tidak akan suka, tapi ternyata jauh lebih kusukai dari dugaan

• Pada akhirnya aku memilih Victor Mono, yang dulu juga pernah kupakai selama beberapa tahun
  Di iPhone, akan bagus kalau ada bilah progres, dan juga opsi seperti “aku tidak akan pernah memakai font ini”
  Setiap beberapa tahun aku selalu bolak-balik antara font sempit (Iosevka) dan font lebar (Azeret Mono)

  • Aku juga mempertahankan Victor Mono cukup lama sampai tahap akhir, tapi rendering simbol @ di Firefox kurang bagus
    Di terminal hasilnya baik-baik saja, jadi sepertinya ini masalah perbedaan renderer

• Belakangan ini aku terutama memakai Iosevka, tapi dulu aku juga pernah memakai Ubuntu Mono, JetBrains Mono, PT Mono, Terminus, dan lain-lain
  Di antara semuanya, Liberation Mono adalah yang paling mudah dibaca
  Baru-baru ini aku juga lumayan suka Cascadia Code, cukup mengejutkan

  • Sayang Cascadia tidak ada di situs itu
    Setelah kupakai beberapa minggu, font itu terasa jauh lebih mudah dibaca sampai kukira ukurannya lebih besar, padahal sebenarnya lebih kecil tapi tetap lebih terbaca

• Awalnya kupikir aku tidak terlalu peduli soal font, tapi saat melihat Xanh Mono aku langsung merasa menolak seketika
  Pada akhirnya aku sadar bahwa font bawaan VS Code, Droid Sans Mono, dan Roboto Mono hampir sama

  • Aku juga punya pengalaman serupa, dan sedang mencoba mengoptimalkan terminal dengan Roboto
    Bobot font dan dukungan emoji sepertinya akan lebih baik

• Game ini menyenangkan, tapi sebaiknya ada indikator progres
  Akan bagus juga kalau ditampilkan hasil seperti juara 1, juara 2, semifinal, perempat final, dan semacamnya

  • Progresnya memang ditampilkan di sebelah kiri, tapi tidak muncul di sertifikat
  • Di mobile ada indikator progres tersembunyi di balik tombol menu