Kisah Membuat Font Tulisan Tangan

 (kokorobot.ca)
3 poin oleh GN⁺ 2023-11-28 | 1 komentar | Bagikan ke WhatsApp
  • Ketika teks tulisan tangan pada komik hakum berubah-ubah ukuran dan keterbacaannya dari halaman ke halaman, penulis memutuskan untuk membuat tulisan tangannya sendiri menjadi font TTF alih-alih memakai font yang sudah ada
  • Percobaan kedua, yaitu memindai tulisan di atas kertas, terlihat lebih natural dan organik dibanding tulisan digital yang dibuat dengan pen tablet
  • Cakupan pembuatannya dibatasi pada A-Z, a-z, angka 0-9, dan tanda baca dasar; fitur lanjutan seperti bold, italic, dan ligatur tidak menjadi target
  • Alurnya adalah merapikan gambar hasil pindaian dengan Gimp, memisahkannya menjadi PNG, lalu menyesuaikan kontur glyph, side bearing kiri-kanan, dan kerning di FontForge
  • Dalam proses Autotrace dan ekspor, masalah validasi seperti missing points at extrema dan self intersecting dapat muncul, sehingga font tulisan tangan membutuhkan banyak pascapemrosesan

Alasan Mengubah Tulisan Tangan Menjadi Font

  • Teks pada komik hakum sebelumnya ditulis langsung secara digital dengan pen tablet
  • Hasilnya cukup baik, tetapi bahkan dalam satu halaman ukuran huruf sering membesar atau mengecil, sehingga keterbacaan kadang terganggu
  • Karena tidak ingin memakai font yang sudah ada, penulis memutuskan membuat font berbasis tulisan tangannya sendiri
  • Targetnya adalah font TTF untuk publikasi web, dan hanya mencakup kumpulan karakter terbatas
    • Tidak membuat bold dan italic
    • Ini pertama kalinya membuat font dan menggunakan FontForge, jadi mungkin ada cara yang lebih baik

Dua Percobaan dan Istilah Dasar Tipografi

  • Font pertama dibuat berdasarkan tulisan tangan digital yang ditulis dengan pen tablet
  • Font kedua dibuat dari gambar hasil pindaian tulisan di atas kertas; tulisan di atas kertas yang kurang presisi terlihat lebih organik dan natural
  • Saat membuat font, penulis mempelajari istilah struktur tipografi; memahami fungsi tiap elemen membantu membuat pilihan desain yang lebih baik dan font yang fungsional
    • Ascender: bagian huruf kecil yang naik di atas x-height
    • Baseline: garis acuan tempat sebagian besar huruf bertumpu dan descender turun ke bawah
    • Cap Height: garis yang menunjukkan tinggi sebagian besar huruf kapital
    • Descender: bagian yang turun di bawah baseline, seperti pada p dan q
    • X-Height: jarak antara baseline dan mean line pada huruf kecil

Gambar Pindaian dan Perapian di Gimp

  • Target pembuatannya adalah huruf kapital A-Z, huruf kecil a-z, angka 0-9, serta tanda baca dasar seperti koma, tanda seru, dan tanda tanya
  • Awalnya, penulis menggambar garis acuan baseline, cap height, x-height, dan descender dengan pensil di sketchbook, lalu menggambar huruf
  • Jika huruf digambar di antara garis acuan, hasilnya menjadi terlalu kaku; setelah itu penulis menulis kalimat "The quick brown dog jumps over the lazy fox" berulang kali dalam huruf kapital dan huruf kecil
    • Kalimat ini mencakup semua karakter yang diperlukan untuk a-z
    • Saat menulis sebagai kalimat, penulis tidak terlalu sadar pada tiap huruf sehingga bentuknya lebih baik
    • Saat menggambar di atas grid, perhatian hanya tertuju pada batasannya
  • Kalimat yang paling bagus dipilih untuk pembuatan font, dan sebagian huruf yang digambar di grid juga digunakan
  • Karena metode ini, cap-height, x-height, dan descender tiap karakter kemudian harus disejajarkan secara digital
  • Gambar huruf yang dipindai diproses di Gimp dengan Color > Threshold untuk menghilangkan warna abu-abu
  • Karena sifat pensil dan kertas, serta karena tidak memakai grid, cacat pada huruf diperbaiki dengan pencil tool di Gimp
    • Semua dynamics dimatikan di Tool Options agar menghasilkan garis yang bersih
  • Huruf yang sudah dirapikan disalin dan dikumpulkan ke dokumen Gimp baru; ukuran dokumen dibuat agar dapat memuat huruf terbesar dan terlebar, yaitu huruf kapital M
  • Pada tahap ini, penulis memeriksa agar ketebalan garis tidak terlalu berbeda-beda
  • Semua huruf diekspor satu per satu sebagai PNG ke folder proyek

Membuat Glyph di FontForge

  • FontForge dipilih karena berjalan di Linux dan direkomendasikan oleh orang-orang sekitar; pengalaman menggunakannya baik
  • Saat membuat proyek baru, Font View Window terbuka dan semua slot glyph font ditampilkan dalam bentuk tabel
  • Di Element > Font Info, informasi font diisi, dan nama font ditambahkan di bawah PS Names
  • Untuk mengekspor sebagai TTF, di jendela yang sama pada bagian General, ubah Em size menjadi 1024
    • UPM pada font TrueType secara konvensional memakai pangkat dua seperti 1024 atau 2048
    • Font OTF memiliki persyaratan berbeda
    • Pada masa type logam, tiap huruf ditempatkan dalam wadah ruangnya sendiri agar tingginya konsisten, dan tinggi potongan type ini disebut ‘em’
  • Jika glyph diklik dua kali di Font View, Character View terbuka
    • Di sini glyph digambar atau diedit
    • Glyph dapat dilihat satu per satu lewat antarmuka tab, atau kata-kata dapat diperiksa berdampingan melalui file teks yang sudah disiapkan
  • Di daftar layer kiri bawah, pilih layer Back, lalu impor PNG huruf terkait melalui File > Import
  • Setelah itu, kontur glyph dibuat dengan salah satu dari dua cara
    • Menggambar kontur secara langsung
    • Memilih layer Fore dan membuat kontur otomatis dengan Select > Autotrace
  • Autotrace membuat kontur berisi titik kontrol dan kurva Bézier dengan mengacu pada gambar latar, tetapi bisa menghasilkan terlalu banyak titik atau masalah extrema yang hilang
  • Setelah bentuk tertutup dibuat, glyph tersebut juga ditampilkan di jendela lain

Side Bearing dan Pratinjau

  • Untuk tiap glyph, side bearing kiri dan kanan disesuaikan untuk menentukan lebar glyph akhir
  • Untuk memusatkan semua glyph secara otomatis, gunakan Metrics > Auto Width
  • Untuk menempatkan semua glyph di tengah dalam lebarnya, gunakan Metrics > Center In Width
  • Saat memperbaiki kontur, mematikan layer referensi dapat membantu
  • Untuk memulai ulang sebuah glyph, pilih glyph yang diinginkan di Font Window lalu gunakan Edit > Clear
  • Untuk hanya menghapus layer referensi, gunakan Edit > Clear Background
  • Di field teks di atas kanvas kerja Character View, masukkan kata atau karakter acak setelah huruf saat ini untuk melihat pratinjau tampilan huruf ketika berdampingan
  • Proses ini harus diulang untuk semua glyph; terutama jika side bearing kiri-kanan pada glyph Space tidak disesuaikan, jarak antarkata akan terlalu besar

Pengaturan Kerning

  • Kerning adalah proses menyesuaikan jarak antarhuruf agar teks terlihat mudah dibaca
  • Di Font Window, buka Element > Font Info, lalu pada tab GPOS di Lookups, tekan Add Lookup
  • Pada dropdown Type, pilih Pair Position (Kerning)
  • Di kolom Feature, tekan panah di sebelah New, pilih Kern Horizontal Kerning, lalu konfirmasi
  • Pilih entri GPOS yang baru dibuat, tekan Add Subtable, lalu konfirmasi dengan nama bawaan apa adanya
  • Huruf yang akan di-kerning dipilih dengan menyeret pada kedua tabel
    • Huruf kapital dan huruf kecil harus dipilih semuanya
    • Untuk memilih kedua kumpulan dalam satu tabel, gunakan Shift
  • Saat pairings diklik, versi glyph pair yang diperbesar ditampilkan di bagian bawah jendela
  • Seret glyph kedua agar lebih dekat ke atau lebih jauh dari glyph pertama, lalu sesuaikan supaya semua kombinasi glyph terlihat baik

Pengujian dan Validasi Ekspor

  • Untuk menguji font dan kerning di dalam FontForge, gunakan File > Print
  • Teks bawaan tidak menampilkan semua kombinasi yang mungkin, sehingga teks dapat ditambahkan sendiri
  • kern_pairings.txt mencakup semua kombinasi kerning dan dapat ditempelkan ke layar pengujian

  • Masalah yang Dapat Ditemui Saat Ekspor

    • Saat mengekspor dengan File > Generate Fonts, FontForge dapat menandai sebagian karakter untuk diperiksa
    • Non-integral coordinates berarti posisi satu atau beberapa titik pada kontur glyph memiliki komponen desimal seperti 2.25
    • Pilih glyph bermasalah, buka Element > Validation > Find Problems, centang "non-integral coordinates", lalu ulangi fix
    • Pada font tulisan tangan yang tidak terlalu bergantung pada presisi, memindahkan titik ke koordinat bilangan bulat terdekat mungkin tidak banyak mengubah hasil
    • Missing points at extrema adalah situasi ketika titik kontrol kurva mendorong kurva keluar dari batasnya
    • Titik kontrol harus disesuaikan agar titik tertinggi atau titik ekstrem kurva menjadi titik kuning
    • Element > Add Extrema dapat membantu, tetapi juga dapat mendistorsi glyph atau menambah masalah non-integral coordinates
    • Walaupun error ini ada di log, font tetap dapat dibuat, tetapi distorsi halus yang menjengkelkan bisa muncul pada font
    • Jika font tulisan tangan berantakan atau memakai Autotrace, masalah extrema dapat terjadi
    • Self intersecting adalah situasi ketika kontur glyph saling berpotongan dengan dirinya sendiri
    • Semua garis harus diperiksa untuk menghilangkan tumpang tindih

Pilihan TTF dan Instalasi

  • Untuk tujuan penggunaannya, TTF(TrueType Font) sudah cukup
  • OTF tidak diperlukan karena tidak ada rencana menyimpan banyak glyph, tidak ingin memasukkan bold dan italic sebagai style terpisah, dan tidak membutuhkan ligatur
  • Konten yang memakai font ini akan dipublikasikan di web, dan TTF cocok untuk tujuan tersebut
  • Untuk membuat font dari semua glyph di Font View, gunakan File > Generate Fonts
  • Pilih TTF sebagai format keluaran dari dropdown di bawah nama font, lalu konfirmasi; font akan disimpan di folder proyek
  • Font yang dibuat cukup dipindahkan ke lokasi penyimpanan font sistem
  • Referensi dan contoh penggunaan

Bacaan terkait

1 komentar

 
GN⁺ 2023-11-28
Komentar Hacker News

  • Ikhtisar FontForge-nya bagus, dan dulu saya juga pernah sedikit mencobanya
    Memang agak kasar, tapi saya juga tidak yakin apakah produk komersial pesaingnya jauh lebih baik. Bahkan saya tidak tahu namanya satu pun
    Dan situs webnya sangat keren. Unik dan punya karakter yang kuat

    • FontForge itu open source, lintas platform, dan fiturnya juga cukup kaya, jadi patut disyukuri; tetapi dari pengalaman saya sendiri, produk komersial pesaingnya memang jauh lebih bagus dalam praktik
      Jika punya macOS, Anda bisa mencoba langsung Glyphs(/Mini) atau RoboFont, yang masa trial-nya cukup panjang. Meski begitu, yang paling saya nantikan adalah generasi alat berikutnya, termasuk alat berbasis web seperti fontra.xyz
    • MFEK juga layak terus dipantau apakah akan menjadi lebih matang
      Semua pekerjaan terkait MFEK yang saya lihat sejauh ini tampak cukup keren
      https://mfek.org/
    • Mumpung membahas FontForge, saya penasaran apakah ada yang tahu cara melakukan pratinjau dengan teks beberapa paragraf saat membuat font
      Satu kalimat “quick brown fox” saja sering kali tidak cukup

  • 100r.co juga wajib dilihat
    Devine dan Rekka menjalankan studio mereka dari kapal layar Pino, sambil mendokumentasikan kehidupan, perjalanan, dan proyek mereka

  • Ringkasan FontForge-nya bagus
    Seperti yang tersirat di tulisan itu, untuk membuat font dari tulisan tangan ada juga opsi yang lebih mudah dan otomatis. Setelah itu hasil font-nya juga bisa diperbaiki lagi
    https://www.calligraphr.com/en/ nama lamanya MyScriptFont

  • Font yang dibuat terlihat cukup mirip dengan yang pernah saya buat
    https://imgur.com/a/g8bIoUY
    Saya tidak terlalu mendalami optimisasi seperti kerning, tetapi 3–4 software yang saya coba semuanya sangat menyebalkan, rusak, atau sulit digunakan. Bisa saja masalahnya ada pada cara saya memakai, dan software berbayar mungkin jauh lebih baik. Hebat juga bisa menyelesaikannya sampai akhir

  • Saya penasaran apa cara paling sederhana untuk menggabungkan beberapa font menjadi satu font
    VS Code tidak mendukung pengaturan font per bahasa atau token. Misalnya tidak bisa memakai Comic Sans untuk komentar dan font lain untuk sisanya, tetapi pengaturan seperti italic/bold dimungkinkan

  • Saya sudah menyukai font sejak Desktop Publishing populer pada era 80-an dan font mulai digunakan secara luas
    Bisa dibilang sempat dipakai berlebihan untuk sementara waktu, tetapi itu salah satu hal pertama yang membuat saya merasakan bahwa desain itu penting. Bagaimanapun, font-nya keren dan ikhtisarnya juga bagus

  • Saya penasaran apakah memang ada orang yang membuat font dengan MetaFont/MetaPost
    Saya juga tidak tahu apakah FontForge punya fitur scripting. Saya belum pernah memakainya sendiri dan hanya pernah membacanya, tetapi saya sudah membaca kelima volume “Computers and Typesetting” karya Knuth

  • Saya penasaran apakah sudah ada startup AI wrapper yang membuatkan font
    Prompt-nya sepertinya menarik. Misalnya seperti “desainkan font Natal yang sangat dipengaruhi Balkan tetapi juga bercampur brutalisme Soviet, dan ramah untuk anak-anak”
    Secara komersial, penggunaan font yang eksotis juga harus menjadi hal yang terasa wajar secara budaya. Saya paham mengapa Helvetica, Roboto, Noto Sans, dan font-font yang lebih modern dipakai, tetapi dunia ini jujur saja jadi agak hambar

  • Sayang sekali tulisan blog itu sendiri tidak memakai font buatannya sendiri

  • Kalimatnya seharusnya bukan “anjing melompati rubah”, melainkan rubah melompati anjing ;-)
    Karena anjing itu malas dan rubah itu cepat