Font piksel 5x5 untuk layar kecil

• Font fixed-width ultra-kecil yang menempatkan semua karakter di dalam kotak 5 piksel dan menyesuaikannya agar bisa digambar dengan aman pada grid 6x6, dirancang untuk layar kecil dan lingkungan dengan memori terbatas
• Ukuran 5x5 menyelesaikan masalah representasi E, M, dan W yang kurang memadai pada 4x4, dan juga memastikan pembedaan visual dengan menggambar sebagian besar huruf kecil 1 piksel lebih kecil daripada huruf besar
• Seluruh font hanya berukuran 350 byte, sehingga cocok untuk mikrokontroler 8-bit seperti AVR128DA28, dan memberi efisiensi piksel yang besar pada layar kecil seperti 160x128 atau OLED 128x64
• Bahkan dibandingkan dengan font vektor yang dirender pada ukuran serupa, hasilnya tetap kalah dari font buatan tangan 350 byte ini meski menggunakan anti-aliasing serta data kode dan font yang jauh lebih besar
• Juga dilakukan eksperimen hingga ukuran yang lebih kecil seperti 3x5, 3x4, 3x3, 2x3, 3x2, 2x2; 3x5 masih cukup mudah dibaca, 3x2 lebih baik daripada 2x3, tetapi 2x2 pada dasarnya runtuh hingga mendekati level kode rahasia

---

Font piksel 5x5

• Dirancang agar semua karakter muat di dalam kotak 5 piksel dan bisa digambar dengan aman pada grid 6x6
  • Dasarnya adalah font-inline.h 5x6 milik lcamtuf, dan font ini dipengaruhi oleh font 8x8 ZX Spectrum
  • 5x5 dipilih sebagai ukuran minimum yang tidak merusak keterbacaan
• 2x2 tidak memungkinkan dan 3x3 secara teknis mungkin tetapi sulit dibaca, sementara 4x4 tidak cukup untuk menggambar E, M, dan W dengan baik
  • Pada 5x5, masalah ini terselesaikan
• Pada 5x5, sebagian besar huruf kecil bisa digambar 1 piksel lebih kecil daripada huruf besar sehingga dapat dibedakan secara visual
• Varian yang lebih sempit seperti 4x5 dan 3x5 juga memungkinkan, tetapi harus mengorbankan M, 0 bertitik, serta 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" hingga membuat tata letak meluap
• Ukuran total font hanya 350 byte, sehingga cocok untuk mikrokontroler 8-bit seperti AVR128DA28
  • Dalam teks disebutkan bahwa AVR128DA28 memiliki RAM 16kB
  • Chip seperti ini murah, hemat daya, dan tangguh, tetapi ruang untuk pemrosesan grafis sangat terbatas
• Bahkan layar 384x288 pun memiliki sekitar 110 ribu piksel, terlalu besar untuk dimuat ke memori AVR
  • Sebagai gantinya, layar yang lebih kecil seperti 160x128 atau OLED 128x64 lebih praktis dan murah
  • Pada layar seperti ini, font yang efisien secara piksel dan digambar tangan lebih unggul
• Font vektor yang dirender pada ukuran serupa juga dibandingkan
  • Font vektor tersebut sebenarnya memiliki tinggi 6 piksel, tetapi hurufnya lebih sempit
  • Bahkan dengan anti-aliasing, kode beberapa megabyte, dan data font 1MB, hasilnya tetap kalah dari font buatan tangan 350 byte

Eksperimen pada layar nyata dan 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 tetap terlihat lebih halus daripada perkiraan
• Jarak antar piksel membuat e dan g tampak lebih meyakinkan
  • Berdasarkan efek yang sama, kemungkinan font yang lebih kecil juga dieksplorasi lebih lanjut
• 3x5 bukan resolusi minimum tanpa kompromi, tetapi masih terbaca dengan cukup baik
  • Pada ukuran ini ada 32.768 glif, dan 27.904 di antaranya dapat dibedakan satu sama lain
  • M, W, dan Q mengalami kerugian, tetapi O dan 0 masih bisa dibedakan
  • Ini bisa menjadi pilihan saat perlu memuat 50% lebih banyak kolom di layar
• Pada 3x4, font masih bisa dibaca tetapi dengan batasan yang lebih besar
  • Ada 4.096 glif, dan 3.392 di antaranya dapat dibedakan satu sama lain
  • Pada ukuran ini huruf besar dan huruf kecil tidak bisa dibedakan, sehingga dipilih satu gaya yang paling cocok untuk ruang terbatas
  • Daya ekspresi angka juga memburuk, tetapi masih bisa berfungsi
• Pada 3x3, kehilangan terbesar terjadi pada angka
  • Ada 512 glif, dan 400 di antaranya dapat dibedakan satu sama lain
  • Huruf masih bisa dikenali sampai tingkat tertentu tanpa duplikasi
  • Saat ditampilkan pada perangkat keras nyata, font ini menjadi jauh lebih baik
• 2x3 sudah mendekati tingkat yang terlalu dipaksakan
  • Ada 64 glif, dan 44 di antaranya dapat dibedakan satu sama lain
  • Sebagian besar huruf sulit dikenali dan banyak yang tumpang tindih
  • 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 dapat dibedakan satu sama lain
  • Huruf yang membutuhkan detail horizontal seperti M, W, N, Q, G, P lebih banyak daripada yang membutuhkan detail vertikal seperti E, F, sehingga lebih menguntungkan
  • Baris paling bawah adalah "you can probably read this", dan masih bisa dibaca jika dilihat sambil menyipitkan mata atau diperkecil
• 2x2 hanya tersisa sebagai pembanding demi kelengkapan
  • Secara teori ada 16 gambar 2x2 yang mungkin, tetapi satu adalah spasi kosong dan lima lainnya merupakan salinan dengan menggeser glif lain, sehingga pada praktiknya hanya tersisa 10
  • Ini cukup untuk merepresentasikan seluruh angka, tetapi karena tidak mirip bentuk aslinya, hasilnya lebih mendekati kode rahasia daripada font

Materi terkait

• mcufont.h berisi data font 5x5
• test.c menyertakan program untuk pratinjau font
• font-inline.h milik lcamtuf ditautkan sebagai font asli
• Lebih banyak contoh font ultra-kecil juga disediakan melalui tautan moonbench.xyz

[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