Pertimbangan apa yang ada dalam mendesain font piksel?

14

Saya mendesain font monospace pixel untuk sebuah game, dan sejauh ini saya hanya dapat bekerja dengan ukuran yang sangat kecil (terbesar yang saya kelola adalah 5x9) karena yang paling mudah untuk dicoba dan salah dengan. Seringkali hasil yang saya hasilkan untuk ukuran bahkan sekecil 7x13 semuanya botak dan tidak menarik.

Saya telah menganalisis beberapa font piksel lainnya, dan sebagian besar yang menarik secara grafis membuat banyak pertimbangan alternatif yang tidak pernah terpikirkan oleh saya untuk dibuat, seperti membuat seluruh bagian hanya terhubung secara diagonal.

Apakah ada ukuran blok khusus yang "optimal" untuk mendesain font piksel? Apakah ada penempatan piksel khusus yang mungkin harus saya ingat? Karena kadang-kadang ketika saya menggambar garis yang panjangnya hanya 11 piksel (atau membuat benda-benda bersinggungan dengan ukuran sekecil itu), akhirnya tampak seperti sesuatu yang lain yang pernah diperbesar.

Joe Z.
sumber

Jawaban:

11

Font piksel tidak jauh berbeda dari font cetak kecil saat Anda melakukannya *. Satu-satunya pengecualian adalah Anda tahu apa yang akan dilakukan media dengan font piksel - keuntungan yang sangat besar.

Sebenarnya tidak ada kotak piksel yang ideal, per se. Jelas kisi yang lebih besar memberi Anda lebih banyak ruang untuk bekerja. Jenis terkecil yang pernah saya lihat berhasil adalah desain 7px. Desain MiniFonts Joe Gillespie akan membantu Anda memahami mendesain pada ambang keterbacaan. Pertanyaan lain di sini adalah tentang desain mikro dan dapat memberikan Anda referensi lebih lanjut.

Mulai dari mana

Setiap masalah desain dimulai dengan kendala. Dengan font yang bagus itu [biasanya] yang dimaksudkan digunakan. Di mana font pixel Anda harus pas? Apakah gim Anda akan mendapat manfaat dari teks yang mudah dibaca atau apakah teks perlu dihindarkan dan hanya tersedia untuk "menguraikan" bila diperlukan?

Anda harus mengklarifikasi apakah Anda ingin huruf kecil atau tidak. Font huruf besar semua dapat masuk dalam grid yang lebih kecil karena bentuknya yang relatif sederhana dan kurang dari extender (di bawah garis dasar dan di atas tinggi tutup). Tapi huruf kecil juga bisa sangat kecil: Minx Gillespie memberikan dan titik referensi yang sangat baik untuk apa yang saya anggap sebagai alfabet huruf kecil yang masuk akal.

Minx kira-kira sekecil huruf kecil

Rinciannya

Anda akan melihat sesuatu bahkan dalam font pixel terbaik: Mereka tampak mengerikan ketika Anda mendekat dan mencoba mencari tahu mereka. Mereka dimaksudkan untuk "dipersepsikan", yaitu celah dalam desain diisi oleh otak. Jadi dua kotak sejajar dengan 45 ° menjadi garis diagonal. Kadang-kadang lubang di grid adalah garis "tipis" antara dua pukulan tebal.

Mendesain dari dekat : Itulah tantangan perancang font piksel. Dengan kata lain, Anda membuat dan memodifikasi bentuk Anda pada jarak yang sangat dekat sambil mempertimbangkan bagaimana bentuknya jika dilihat pada ukuran normal.

Komputer adalah teman kita dalam situasi yang membingungkan ini: Tetap buka jendela kedua dengan tampilan 100% sehingga Anda dapat melihat bagaimana desain Anda benar - benar terlihat. Memiliki monitor kedua untuk "tampilan realitas" ini membuat segalanya jauh lebih nyaman.

Menampung huruf kecil

Karena Anda menyebutkan kebutuhan huruf kecil pada 6 x 12 ...

Berikut adalah contoh singkat yang saya berikan bersama untuk menggambarkan pertimbangan khusus dengan persyaratan itu.

Maafkan saya, ini ilustrasi kasar

Sebagai permulaan, saya memotong satu pixel dari tinggi badan Anda. Bekerja pada ukuran kecil seperti itu, Anda akan melihat bahwa keterbacaan mendapat manfaat dari tubuh karakter yang lebih luas. Tutupnya hanya perlu sedikit lebih tinggi dari huruf kecil. Lihatlah 9px Verdana untuk melihat bagaimana tubuh lebar dapat memanfaatkan keterbacaan.

Karakter huruf kecil dengan ascenders yang menonjol akan sering membaca lebih baik jika mereka sedikit melebihi ketinggian topi (seperti bpada contoh saya). Contoh saya masih berhasil tetap pada tubuh tinggi 11px. Ini dibantu oleh fakta bahwa keterbacaan kurang dipengaruhi oleh penentu panjang: Hanya beberapa piksel yang akan dilakukan di sana.

Bahkan di kisi terbatas ini, Anda dapat melihat sentuhan gaya apa yang dapat Anda tambahkan tanpa benar-benar merusak keterbacaan.

Diperbesar, Anda bisa melihat bagaimana hal-hal aneh terjadi

Dengan tinggi x dan badan yang disorot untuk referensi:

masukkan deskripsi gambar di sini

Pada ukuran yang diperbesar, Mgambar tersebut menggambarkan pertimbangan penting. Dengan kisi bilangan genap Anda tidak memiliki titik tengah tunggal untuk piksel tempat pendaratan. Ini tidak selalu merupakan hal yang buruk, Anda hanya harus membuat beberapa keputusan yang terasa aneh ketika dekat. Yang kedua M, misalnya, terlihat cukup canggung ketika diperbesar tetapi sebenarnya merupakan peningkatan pada ukuran layar. Jenis garis tersirat tersebut merupakan komponen penting dari sebagian besar font piksel.

Tentu saja, Anda juga harus memperhitungkan ruang ekstra yang diperlukan untuk spasi huruf. Anda tentu tidak punya banyak ruang untuk bermain di sana tetapi itu adalah bagian penting dari keterbacaan.

Lihatlah ke tuan

Seperti halnya bentuk seni apa pun, Anda akan belajar paling banyak dengan mencoba melakukan apa yang master lakukan. Contoh-contoh yang saya tautkan di atas akan memberi Anda banyak informasi.

Studi kasus klasik dalam keunggulan font piksel adalah Underware's Unibody 8 . Novel "italic" yang tegak ini memperoleh efeknya dengan menggunakan keberpihakan 45 ° untuk menyiratkan sudut font miring tanpa mengurangi keseluruhan font dalam proses.

Emigre adalah salah satu pelopor, bersama dengan Susan Kare pada OS Mac awal.

* Catatan:
Retina adalah contoh fantastis tentang bagaimana font cetak menghasilkan ukuran yang tidak terduga, seperti yang saya anggap pendahulunya Bell Centennial .

Retina H & FJ

Baju biasa
sumber
Sebenarnya saya ingin huruf kecil. Saya ingin font 6x12 dapat digunakan di, katakanlah, konsol.
Joe Z.
Tapi ya, ini adalah jawaban yang sangat bagus, dengan banyak sumber daya yang bisa saya lihat lebih jauh. Terima kasih.
Joe Z.
1
tambahan sangat kecil: "dekat dan jauh" mudah dicapai di Photoshop dengan membuat jendela baru (menu jendela> mengatur> jendela baru untuk docname-1) dan meninggalkan salah satu dari mereka pada ukuran zoom 100% ke samping sebagai "preview copy"
horatio
1
Jangan khawatir, Anda mendapatkan idenya. Saya bahkan tidak berpikir Anda akan membutuhkan ketinggian ekstra. Saya hanya akan menambahkan piksel ekstra pada lebar dan meninggalkan ketinggian antara 10 dan 12. Bermain-main dengan beberapa karakter dan lihat di mana Anda berakhir.
pakaian biasa
1
Omong-omong, kata uji standar yang menjelaskan bentuk dasar alfabet Romawi adalah Hamburgefonts . Banyak jenis desainer akan mulai dengan H, n, dan ountuk mendapatkan merasakan karakteristik penting.
Pakaian biasa