Sudah cukup lama saya berkeinginan untuk memiliki Font milik pribadi guna menstandarkan pemakaian model/karakter huruf yang ditampilkan di blog. Namun tidak mengetahui darimana untuk memulainya. Setelah cukup lama menghilang, keinginan itu kembali muncul di sela-sela waktu saya mempelajari Inkscape.

Kepentingan pemakaian font untuk nge-blog yang saya butuhkan sangatlah sederhana. Hanya sebatas untuk penulisan judul dan keterangan pada gambar atau foto yang dipublikasikan di blog. Sebenarnya, kepentingan seperti itu sudah bisa teratasi dengan baik menggunakan font gratisan bawaan sistem operasi. Permasalahannya, beberapa kali saya mengalami kalau font-font yang sebelumnya sering digunakan menghilang hampir setiap kali ketika setelah upgrade sistem operasi dikerjakan.

Tidak banyak model font gratisan yang cukup fleksibel menyesuaikan berbagai tema gambar/foto untuk dijadikan judul/pengantar dari gambar/foto itu sendiri. Model font yang tidak sesuai dengan tema gambar/foto, akan menampakkan kesan “norak” meskipun tema dan kualitas foto/gambar yang disajikan sangat bagus.

Nah… dikisaran awal bulan ini (Agustus 2021), saya iseng mendesain serangkaian model huruf untuk alternatif tampilan pada banner di blog ini.

Begini jadinya :

Tapi…, keterusan dan berlanjut melengkapi menjadi satu set seri alphabet…

Niatannya hendak menjadikan rangkaian seri font tersebut sebagai dasar untuk dijadikan satu file font ber-ekstensi *.ttf dengan menggunakan jasa website pembuat file font secara gratis yang ada di internet.

Membuat File Font secara Online vs Offline…

Saya mendapatkan tautan ini saat sedang melakukan pencarian menggunakan Google untuk mempelajari cara membuat file font menggunakan Inkscape.

Kira-kira, begini rangkuman uraiannya untuk membuat file font setelah proses pengolahan gambar setiap karakter selesai dikerjakan menggunakan Inkscape :

Setiap huruf dan karakter terlebih dulu dibuatkan file grafis ber-ekstensi *.png . Sehingga, minimal ada 26 file gambar huruf ber-ekstensi *.png yang harus di buat dan kemudian di upload ke internet. Setelah semua file selesai di upload, setiap gambar huruf diatur berdasarkan abjad yang mewakilinya. Jika semua karakter huruf sudah selesai di identifikasi berdasarkan abjad-nya, maka tindakan selanjutnya adalah proses pembuatan file *.ttf. Begitu proses pembuatan file font (*.ttf) selesai, hasilnya bisa langsung di-download dan di-install pada komputer milik kita.

Seperti itu pemahaman informasi yang saya dapatkan mengenai cara membuat file font ber-ekstensi *.ttf menggunakan jasa website pembuat file font di internet.

Gampang ya…?

Semua itu gratis. Tidak dipungut biaya sepeser pun.

Namun, niat tersebut saya urungkan beberapa saat setelah baru menyelesaikan membuat 3 (tiga) file gambar karakter *.png dari 85 file yang hendak di-upload.

Meng-upload sebanyak 85 file ke internet bukanlah cerita pekerjaan yang terjamin bisa diselesaikan hanya dengan sekali jalan. Hal berikutnya yang cukup memberatkan bagi saya adalah semua pekerjaan setting gambar harus dikerjakan secara online.

Kemudian, saya kembali melakukan pencarian di Google untuk mendapatkan alternatif cara membuat file font… dan tautan berikut ini yang didapat.

Penjelasan di artikel tersebut cenderung pada pembahasan tentang meng-kolaborasikan Inkscape dengan software FontForge guna menghasilkan file font secara offline. Kebetulan, software FontForge tersedia gratis di pustaka software Linux Manjaro yang terinstall di laptop saya. Tanpa perlu menunggu lama, saya segera meng-install-nya.

Selesai install dan dipraktekkan, ternyata… membuat file font itu tidaklah semudah yang sebelumnya saya bayangkan… hahahaha….

Tidak salah rupanya keputusan saya mengurungkan niat untuk membuat file font secara online… Apalagi karakter yang hendak dijadikan bahan file font berupa rangkaian huruf alphabet lengkap (huruf kapital dan huruf kecil) disertai tanda baca. Sangat berbeda situasinya dan akan lebih mudah prosesnya jika bahan file font yang hendak dibuat hanya terdiri dari huruf kapital saja.

Setelah tiga hari berkutat di depan laptop, akhirnya saya bisa juga kesampaian memiliki satu file font untuk pertama kalinya. Tentu saja hasilnya masih sangat jauh dari kategori “layak pakai” dibanding file-file font yang sudah banyak beredar pada umumnya. Lagipula, pembelajaran masih berfokus pada cara menggunakan FontForge dengan benar.

Cara singkat Membuat File Font menggunakan FontForge…

Dalam FontForge itu sendiri sudah tersedia fitur-fitur untuk membuat rangkaian gambar karakter. Namun, menurut saya, lebih mudah jika semua pekerjaan tersebut dilakukan dengan menggunakan Inkscape atau Adobe Illustrator atau software apapun lainnya yang memang diperuntukkan pada kepentingan pengolahan gambar tipe vektor. Atau, cara yang lebih mudah dan relatif lebih singkat adalah meng-ekstrak gambar karakter alphabet yang tersedia gratis di internet khusus untuk pemakaian personal non-komersial.

Gambar : Tangkapan Layar FontForge dari file *.SVG.

Meng-kolaborasikan Inkscape dengan FontForge untuk membuat file font, bisa dilalui dengan dua cara :

  1. Meng copy-paste setiap karakter gambar huruf dari Inkscape ke FontForge
  2. Menggunakan file perantara *.SVG yang ditujukan untuk mempersiapkan dalam membuat file font.

Saya pakai cara kedua, karena memang sudah terlanjur berkubang dalam lingkungan Inkscape. Sehingga ada dua file *.SVG yang dibuat, yaitu :

  1. file utama yang berisi rancangan asli dari semua gambar karakter
  2. file perantara yang berisi hasil akhir gambar-gambar karakter dari file utama yang nantinya akan dibaca FontForge.

File perantara tersebut bisa langsung dibuka menggunakan FontForge sebagaimana terlihat pada gambar tangkapan layar di atas. Kemudian, dilakukan penyesuaian jarak antar karakter.

Fitur pengaturan jarak ini, dapat diakses melalui menu Metrics.

Sayangnya, saya belum mendapatkan cara untuk membuat auto rata Baseline pada menu Metrics ini. Sehingga, pengaturan rata-horisontal setiap karakter harus dikerjakan secara manual.

Sedangkan pengaturan jarak secara horisontal, tersedia beberapa fitur untuk mengerjakannya. Supaya lebih mempercepat pengaturan jarak antar karakter, kita bisa mem-blok beberapa karakter sekaligus :

Gambar : Tangkapan Layar mem-blok beberapa karakter sekaligus untuk pengaturan jarak antar karakter

Kemudian pilih Metrics->Auto Width… default jarak yang tersedia nampak di layar laptop saya adalah 154. Saya menggantinya dengan nilai 100. Setelah klik tombol Ok, kita bisa melihat tampilannya dengan cara klik-kiri salah satu karakter yang sebelumnya di blok -> klik kanan dan pilih menu teratas, yaitu New Outline Window.

Gambar : Tangkapan Layar untuk meng-edit satu karakter

Agar setiap karakter berada di posisi tengah, pilih Metrics->Center in Width … dan jika kita menghendaki agar posisi setiap karakter lebih rapat ke kiri, pilih Metrics->Third in Width.

Untuk melihat kesetaraan jarak antar karakter sebagaimana yang telah kita kerjakan, pilih menu Metrics->New Metrics Window

Setelah semua pengaturan selesai dikerjakan dan disimpan menggunakan menu File->Save…, lanjutkan dengan proses File->Generate Font… pilih jenis file ber-ekstensi *.ttf . Tidak sampai dua detik untuk menyelesaikan proses pembuatan file *.ttf tersebut. Selanjutnya, file font diinstall dan bisa kita pakai sebagaimana font yang ada pada umumnya.

Secara garis besar, cuma itu proses tahapan cara membuat file font dengan menggunakan FontForge.

Sangat mudah!

Namun lewat beberapa waktu kemudian, perasaan puas dan menyenangkan dari keberhasilan membuat file font itu perlahan sirna. Terutama setelah berulangkali menyaksikan hasil ketikkan kata-kata yang mengandung karakter huruf F, T, f dan j memiliki perbedaan jarak antar karakter lebih lebar dibanding huruf lainnya.

Adakah cara untuk mengatasi perbedaan lebar jarak antar karakter yang dimiliki oleh huruf F, T, f dan j?

Kerning dan Ligature

Selain pengaturan jarak seluruh karakter secara umum, ada beberapa karakter huruf yang sifatnya spesial seperti yang saya nyatakan sebelumnya, yaitu : F, T, f dan j. Keempat karakter huruf tersebut butuh penanganan tambahan supaya nampak alami saat dipakai berdampingan dengan huruf yang mengikuti sebelum maupun sesudahnya.

FontForge menyediakan fitur yang dinamakan kerning, yang mana bisa kita pakai untuk membuat aturan perilaku yang bakal dikenakan atas pemakaian keempat karakter huruf tersebut. Sehingga, saat font digunakan pada software pengolah kata atau software pengolah gambar, aturan perilaku ini otomatis menjadi acuan oleh software-software tersebut. Dengan demikian, setiap kali salah satu keempat karakter huruf diketikkan di antara karakter huruf dalam sebuah kata, tampilannya akan mengikuti aturan sebagaimana yang telah kita buat.

Gambar : Tangkapan Layar fitur Kerning

Disamping Kerning, fitur lainnya yang digunakan menjadikan dua karakter tampil natural adalah ligature.

Gambar : Tangkapan Layar fitur Ligature

Kalau diartikan secara sederhana fitur Ligature ini mirip dengan Kerning, yaitu memosisikan jarak antar dua karakter menjadi tampil natural. Namun secara penerapannya fitur Kerning tidak mengubah model awal dari kedua karakter. Contohnya seperti huruf F dan a pada gambar tangkapan layar di atas. Sedangkan fitur Ligature ditujukan untuk menjadikan dua (atau tiga) model karakter menjadi satu kesatuan model karakter. Umumnya, fitur Ligature digunakan pada karakter huruf f dan karakter huruf yang mengikutinya (f + i (fi), f + f (ff), f + f + i (ffi) dan lainnya).

Namun, semua itu kembali pada model karakter huruf yang dibuat. Sebagai contoh adalah model font di atas yang menjadikan tampilan rangkaian huruf fi, ff dan ffi tetap terlihat natural tanpa menggunakan Ligature. Sehingga saya tidak perlu secara sengaja membuat Ligature untuk ketiga rangkaian karakter tersebut.

Pada intinya, fitur Ligature bertujuan untuk menangani keunikan model karakter yang sekiranya perlu dibuat agar karakter dapat ditampilkan mendekati natural.

Misalnya, seperti pasangan karakter F + i (Fi) di bawah ini :

Gambar : Tangkapan Layar huruf F + i tanpa Ligature.

Kemudian, saya gunakan fitur Ligature agar kedua karakter tersebut nampak lebih rapat saat diketikkan :

Gambar : Tangkapan Layar huruf F + i setelah diubah menggunakan fitur Ligature.

Jadi, setiap kali pengetikan yang diawali karakter huruf F dilanjutkan dengan huruf i, maka model tampilan huruf i otomatis berubah. Yaitu, tanpa disertai titik di atasnya. Sedangkan pada pengetikan huruf i setelah karakter huruf selain F, akan tampil sebagaimana model dasarnya.

Selanjutnya⇒

Leave a Reply

Your email address will not be published. Required fields are marked *