Font piksel 5x5 untuk layar kecil

• Font monospasi ultra-kecil ini dirancang agar semua karakter muat di dalam kotak 5 piksel dan bisa digambar dengan aman pada grid 6x6, sehingga cocok untuk layar kecil dan lingkungan dengan memori terbatas
• Ukuran 5x5 memecahkan masalah representasi E, M, dan W yang tidak teratasi di 4x4, dan juga menjaga keterbedaan visual dengan menggambar sebagian besar huruf kecil 1 piksel lebih kecil daripada huruf besar
• Seluruh font hanya berukuran 350 byte, sehingga sangat cocok untuk mikrokontroler 8-bit seperti AVR128DA28, dan memberi efisiensi piksel yang tinggi pada layar kecil seperti 160x128 atau OLED 128x64
• Bahkan dibandingkan dengan font vektor yang dirender pada ukuran serupa, hasilnya masih kalah dari font buatan tangan 350 byte ini meskipun memakai anti-aliasing serta data kode dan font yang jauh lebih besar
• Penulis juga bereksperimen dengan ukuran yang lebih kecil seperti 3x5, 3x4, 3x3, 2x3, 3x2, 2x2; 3x5 masih cukup terbaca, 3x2 lebih baik daripada 2x3, tetapi 2x2 praktis runtuh hingga nyaris seperti kode rahasia

---

Font piksel 5x5

• Dirancang agar semua karakter muat dalam kotak 5 piksel dan bisa digambar dengan aman pada grid 6x6
  • Dasarnya adalah font-inline.h 5x6 milik lcamtuf, yang font-nya sendiri terinspirasi dari font 8x8 ZX Spectrum
  • 5x5 dipilih sebagai ukuran minimum tanpa merusak keterbacaan
• 2x2 tidak mungkin, 3x3 secara teknis mungkin tetapi sulit dibaca, dan 4x4 tidak cukup untuk menggambar E, M, dan W dengan baik
  • Di 5x5, masalah ini terselesaikan
• 5x5 memungkinkan sebagian besar huruf kecil digambar 1 piksel lebih kecil daripada huruf besar sehingga keduanya bisa dibedakan secara visual
• Versi yang lebih sempit seperti 4x5 dan 3x5 juga mungkin, tetapi harus mengorbankan M, 0 bertitik, dan keterbedaan U/V/Y
• Menyamakan semua karakter ke lebar tetap membuat pemrograman lebih mudah
  • Di layar, panjang string selalu dihitung sebagai 6 kali jumlah karakter
  • Tidak perlu khawatir "8978" menjadi lebih panjang daripada "1111" dan membuat tata letak meluap
• Ukuran total font hanya 350 byte, sehingga sangat cocok untuk mikrokontroler 8-bit seperti AVR128DA28
  • Artikel menyebut AVR128DA28 memiliki RAM 16kB
  • Chip semacam ini murah, hemat daya, dan tangguh, tetapi punya ruang sangat terbatas untuk pemrosesan grafis
• Bahkan layar 384x288 pun memiliki sekitar 110 ribu piksel, terlalu besar untuk dimuat dalam memori AVR
  • Sebagai gantinya, layar yang lebih kecil seperti 160x128 atau OLED 128x64 lebih praktis dan murah
  • Pada layar seperti ini, font hemat piksel yang digambar manual lebih menguntungkan
• Font vektor yang dirender pada ukuran serupa juga ikut dibandingkan
  • Font vektor tersebut sebenarnya memiliki tinggi 6 piksel, tetapi karakternya lebih sempit
  • Meski memakai anti-aliasing, kode beberapa megabyte, dan data font 1MB, hasilnya tetap kalah dari font buatan tangan 350 byte ini

Layar nyata dan eksperimen ukuran yang lebih kecil

• Piksel nyata tidak benar-benar berbentuk persegi sempurna, jadi tampilannya di layar tidak persis sama dengan render di bagian atas
  • Efek pseudo drop-shadow yang dibuat oleh subpiksel dinilai positif
  • Pada layar hitam-putih efek ini tidak ada, tetapi tampilannya tetap lebih halus dari perkiraan
• Jarak antar piksel membuat e dan g terlihat lebih meyakinkan
  • Berdasarkan efek yang sama, penulis lanjut mengeksplorasi kemungkinan font yang lebih kecil
• 3x5 bukan resolusi minimum tanpa kompromi, tetapi masih terbaca dengan cukup baik
  • Pada ukuran ini ada 32.768 glif, dan 27.904 di antaranya saling dapat dibedakan
  • M, W, dan Q mengalami penurunan, tetapi O dan 0 masih bisa dibedakan
  • Ini bisa menjadi pilihan saat perlu memuat 50% lebih banyak kolom di layar
• 3x4 masih bisa dibaca, tetapi dengan batasan yang lebih besar
  • Ada 4.096 glif, dan 3.392 di antaranya saling dapat dibedakan
  • Pada ukuran ini, huruf besar dan huruf kecil tidak bisa dibedakan, jadi dipilih satu gaya yang paling cocok untuk ruang terbatas
  • Daya ekspresi angka juga memburuk, tetapi masih bisa dipakai
• Di 3x3, kehilangan terbesar terjadi pada angka
  • Ada 512 glif, dan 400 di antaranya saling dapat dibedakan
  • Huruf masih bisa dikenali sampai tingkat tertentu tanpa tabrakan
  • Saat ditampilkan pada perangkat keras nyata, font ini jauh membaik
• 2x3 sudah mendekati level yang terlalu dipaksakan
  • Ada 64 glif, dan 44 di antaranya saling dapat dibedakan
  • Sebagian besar huruf sulit dikenali dan banyak yang saling bertabrakan
  • Baris paling bawah adalah "Hello World"
• 3x2 dengan rasio aspek terbalik jauh lebih baik daripada 2x3
  • Pada ukuran ini juga ada 64 glif, dan 44 di antaranya saling dapat dibedakan
  • Huruf yang butuh detail horizontal seperti M, W, N, Q, G, P lebih banyak daripada yang butuh detail vertikal seperti E dan F, sehingga hasilnya lebih menguntungkan
  • Baris paling bawah adalah "you can probably read this"; jika menyipitkan mata atau mengecilkannya, teks ini masih bisa dibaca
• 2x2 hanya tersisa sebagai bahan pembanding demi kelengkapan
  • Secara teori ada 16 kemungkinan gambar 2x2, tetapi satu adalah ruang kosong dan lima lainnya hanya bentuk hasil salin geser dari glif lain, sehingga yang benar-benar tersisa hanya 10
  • Cukup untuk mewakili seluruh angka, tetapi karena tidak mirip bentuk aslinya, hasilnya lebih dekat ke kode rahasia daripada font

[tangokorea]

Terima kasih atas informasinya yang bagus. Jadi langsung kepengin.

[tangokorea]

Bagaimana cara memasukkan Hangul di sini ya T_T bwek

[GN⁺]

Komentar Hacker News

• Dengan memanfaatkan subpixel rendering, bahkan 1x5 pun cukup memungkinkan https://www.msarnoff.org/millitext/

  • Setelah saya lihat langsung di HP Z24n G2 1920x1200 saya dan panel 6-bit 1920x1080 di laptop, saya sangat terkejut karena pendekatan ini bekerja jauh lebih baik dari yang saya kira
    [2x5-HP-Z24n-G2] https://i.imgur.com/yLyrpfg.jpeg
    [1x5-HP-Z24n-G2] https://i.imgur.com/Z7kH005.jpeg
    [2x5-Innolux-N156HCA-GA3] https://i.imgur.com/F4Ypxwj.jpeg
    [1x5-Innolux-N156HCA-GA3] https://i.imgur.com/etkot5o.jpeg
    [1] https://jp.ext.hp.com/monitors/business/z_z24n_g2/
    [2] https://www.panelook.com/N156HCA-GA3__15.6__overview_33518.html
  • Saya juga mencoba memperbesar gambar hasilnya di ponsel, dan kaget karena hurufnya benar-benar masih bisa dibaca https://storage.j0.hn/subpixelfont.png
    Sekalian jadi tahu juga kalau layar saya ternyata sangat kotor
  • Untuk memastikan keterbacaan, sepertinya pada akhirnya memang perlu minimal 2x5
  • Dengan catatan, layar harus dilihat dari jarak yang benar-benar dekat

• 5x5 cukup bagus dan 3x5 juga lumayan, tetapi keduanya tidak mencakup seluruh ASCII
  Ukuran nyatanya juga sedikit menipu, karena kalau jarak antarhuruf ikut dihitung, pada praktiknya dibutuhkan grid 6x6 atau 4x6
  Karena itu saya cukup menyukai Spleen dari https://github.com/fcambus/spleen
  Di sana ada font 5x8 yang mendukung seluruh ASCII, dan sebagian besar glifnya pada dasarnya berbentuk 4x8 dengan jarak horizontal yang sudah ikut masuk
  Dalam proyek saya, saya memodifikasinya agar semua glif menjadi 4x8, dan hasilnya bisa dirender dengan enak dilihat dalam grid 5x9 sambil tetap selalu menjamin jarak horizontal dan vertikal 1 piksel antarhuruf

  • Pada awal 1980-an, memang ada pengolah kata untuk Apple II yang di layar bawaan 40 kolom memakai font 5x5 dalam mode grafis untuk mewujudkan 60 kolom, dan itu bahkan dijadikan nilai jual
    Kalau ingin menyelesaikannya lewat perangkat keras, Anda cukup membeli 80 column card untuk mendapatkan teks 80 kolom yang benar, meskipun monitornya juga harus mendukungnya

• Kebanyakan font superkecil benar-benar buruk untuk dibaca sekilas pada skala 1:1
  Dulu saat membuat mod game, saya butuh font yang sangat kecil dan rapat, jadi saya banyak mencoba 3x3, 3x5, bahkan 2x5, tetapi semuanya terlalu sulit dibaca
  Akhirnya saya menemukan Gremlin-3x6 buatan zephram; tingginya memang 1 piksel lebih besar, tetapi secara horizontal masih sangat ringkas
  Yang paling penting, huruf Latin standar tetap bisa dibedakan dengan baik dan masih cukup terbaca tanpa perlu diperbesar besar-besaran
  Sayangnya zephram menghapus akun FontStruct-nya sehingga font itu juga ikut hilang, tetapi saya menyimpan salinan dan lisensi CC0 di repositori mod saya, dan hasil render nyatanya bisa dilihat di tangkapan layar
  [0] - https://fontstruct.com/fontstructions/show/1488093
  [1] - https://codeberg.org/janAkali/isaac-extended-icons-mod/src/branch/master/assets/fonts
  [2] - https://codeberg.org/janAkali/isaac-extended-icons-mod/media/branch/master/assets/screenshots/screenshot.png

  • [0] sekarang menampilkan 404

• Ada juga diskusi serupa di sisi karakter CJK
  https://chinese.stackexchange.com/questions/16669/lowest-pixel-resolution-needed-to-support-chinese

• Jika penulis melihat ini, sepertinya huruf kecil t akan lebih baik bila ditambahkan satu piksel lagi di atas garis horizontalnya
  Bentuknya sekarang terlalu mirip dengan huruf besar T
  Meski begitu, secara keseluruhan ini dibuat dengan sangat baik dan terima kasih sudah membagikannya

  • Kalau saya, huruf kecil t akan saya buat seperti ini
    x
    xxx
    x
    xx
  • Saya juga merasa huruf kecil l mungkin akan lebih cocok berbentuk seperti ini
    xx
    x
    x
    x
    xx

• Disebutkan bahwa 4x4 tidak cukup untuk menggambar E, M, W dengan baik, tetapi sebenarnya 5x5 juga tidak cukup untuk menggambar e dengan baik
  Jika ingin huruf kecil lebih rendah daripada huruf besar, diperlukan setidaknya 6 piksel vertikal, dan untuk benar-benar memasukkan descender dengan layak, minimal perlu 7
  Secara ketat, 8 akan lebih baik agar g dan y bisa melintasi baseline sambil tetap membedakan descender horizontal, tetapi di sini tampaknya kompromi masih mungkin
  Dan pada praktiknya, untuk memberi jarak yang terlihat jelas di bawah dan di samping huruf, pada akhirnya dibutuhkan setidaknya 8x6 piksel per karakter

  • Kalau font harus dibuat sekecil itu, sifat pertama yang akan saya korbankan adalah aturan bahwa tinggi huruf kecil harus lebih rendah daripada huruf besar
  • Versi e pada bagian real pixels di contoh justru tampak lebih bagus
    Bagi mata saya, ruang kosong di bagian atas jadi agak terisi sehingga lebih mudah dibaca, dan dalam kalimat panjang konteks seharusnya cukup membantu
    Tentu tidak sempurna, dan dalam contoh piksel bersih yang diperbesar di atas, kejanggalannya memang lebih menonjol

• Jika tidak membatasi piksel hanya pada dua keadaan on/off dan memakai grayscale bertingkat, teks yang masih bisa dibaca dapat dibuat pada ukuran yang lebih kecil
  Namun yang penting di sini adalah text, bukan letters
  Masing-masing huruf boleh saja terlalu kabur, tetapi manusia akan tetap membacanya dengan menebak dari konteks
  Metode ini bahkan tidak selalu memerlukan font yang dirancang khusus
  Contoh: https://imgur.com/a/text-80-characters-per-line-240-pixels-wide-AlYrnSS
  Di sini, bahkan jika jarak antarhuruf ikut dihitung, rata-rata lebarnya hanya sekitar 3 piksel per karakter

• Sistem operasi LAP6 untuk minikomputer LINC memiliki font 4x5, tetapi tidak memiliki huruf kecil

• Ini mengingatkan saya pada upaya lama untuk mewujudkan 80 kolom lewat perangkat lunak di C64
  Caranya memakai grid piksel 3x7, dengan satu baris dan satu kolom disisihkan sebagai jarak, dan beberapa produk komersial memang benar-benar menggunakannya
  https://www.pagetable.com/?p=901
  Tidak mudah membuat set karakter 4×8 yang tetap enak dibaca dan enak dilihat, dan karena perlu jarak 1 piksel antarhuruf, lebar efektif tiap huruf pada praktiknya hanya 3 piksel
  Karena itu huruf seperti M atau N menjadi sangat merepotkan

• Dikatakan bahwa 4x5 atau 3x5 mungkin bisa jika rela mengorbankan M, dotted zero, dan memperlemah pembedaan U/V/Y, tetapi menurut saya 3x5 sudah cukup praktis
  https://robey.lag.net/2010/01/23/tiny-monospace-font.html