FlowingDev

Font, dijelaskan: membongkar software mungil yang menggambar kata-kata kita

Pelajari anatomi font digital, mulai dari TTF dan WOFF2 hingga variable axes, dan temukan bagaimana glyph, kerning, dan metadata membentuk tipografi web.

Coba tool-nya: Font Inspector & Glyph Viewer

Dalam satu kalimat

Font digital bukan cuma sekadar kumpulan gambar kecil; mereka itu paket software kompleks dan executable yang penuh dengan matematika vektor, aturan hak cipta, dan rule substitusi tersembunyi.

Masalah yang diselesaikan

Kalau dipikir-pikir, huruf itu konsep yang sangat subjektif. Saat komputer ketemu urutan byte 0x41, dia tahu itu maksudnya huruf "A". Tapi wujud "A" itu seperti apa? Apakah pakai serif? Apakah tebal? Apakah miring?

Sebelum adanya layar digital, tipografi itu hal yang harfiah. Tukang cetak menyusun balok timah secara fisik. Saat era digital datang, kita butuh cara untuk ngasih tahu piksel gimana cara menggambar bentuk-bentuk ini. Awalnya, kita pakai bitmap font—yang secara harfiah adalah grid piksel—tapi bentuknya jadi kayak tangga bergerigi begitu kamu coba scale-up (perbesar).

Di akhir tahun 1980-an dan awal 90-an, Apple dan Microsoft kerja bareng buat bikin TrueType (TTF) untuk menyaingi format proprietary milik Adobe yaitu PostScript (Type 1). Ini memicu "perang font" (font wars). Solusi yang akhirnya mereka sepakati adalah OpenType (OTF), sebuah format yang menggabungkan kedua pendekatan tersebut. Belakangan, biar file-file ini lebih bersahabat untuk web, kita mengompresnya jadi WOFF dan WOFF2.

Masalah buat developer sekarang adalah font itu bertingkah layaknya black box. Kamu nulis font-family: 'Inter'; di CSS, tapi sebenernya kamu lagi terbang buta (flying blind). Apakah file ini beneran punya karakter Cyrillic? Apakah lisensinya mengizinkan embedding untuk aplikasi komersial? Apakah dia men-support variable font axes modern, atau kamu cuma pura-pura bikin bold pakai CSS? Buat ngejawab pertanyaan-pertanyaan ini, kamu butuh mesin sinar-X buat ngintip ke dalam file font itu sendiri, membongkar metadata-nya, dan menginspeksi geometri internalnya.

Bagaimana cara kerjanya di balik layar

Sebuah file font modern (entah itu TTF, OTF, atau WOFF2) pada dasarnya adalah relational database biner yang sangat teroptimasi. Format ini dibangun di atas format kontainer SFNT, yang mengatur data ke dalam "tabel-tabel" terpisah, masing-masing diidentifikasi dengan tag 4 huruf.

Anatomi Font OpenType

Saat sebuah alat font inspector mem-parse sebuah file, dia membaca sebuah direktori pusat untuk menemukan tabel-tabel spesifik ini:

Tag Nama Fungsinya
cmap Pemetaan Character ke Glyph Sang penerjemah. Memetakan nilai Unicode (seperti U+0041 untuk "A") ke Glyph ID internal spesifik.
glyf Data Glyph Outline vektor asli yang dipakai di font TrueType (kurva Bézier kuadratik).
CFF Compact Font Format Outline vektor yang dipakai di font OpenType bernuansa PostScript (kurva Bézier kubik).
name Tabel Penamaan Metadata: font family, desainer, pemberitahuan hak cipta, dan URL lisensi.
kern Kerning Aturan untuk mengatur spasi pasangan huruf spesifik (misal, menyelipkan huruf 'o' kecil di bawah huruf 'T' kapital).
GSUB Substitusi Glyph Aturan tipografi tingkat lanjut, kayak mengubah 'f' dan 'i' menjadi satu ligature 'fi'.

Karakter vs. Glyph

Konsep paling mendasar yang harus dipahami adalah pemisahan antara karakter (characters) dan glyph.

  • Sebuah karakter adalah konsep semantik (Unicode). Maksudnya adalah "ide tentang huruf g kecil".
  • Sebuah glyph adalah gambarnya. Ini adalah bentuk vektor spesifik yang disimpan di dalam font.

Satu karakter bisa dipetakan ke beberapa glyph (seperti huruf 'g' standar dan huruf 'g' hias/swash yang estetik). Sebaliknya, beberapa karakter bisa dipetakan ke satu glyph (seperti saat karakter f dan i diganti oleh satu glyph ligature fi). Tabel cmap dan GSUB yang menangani proses routing yang sangat rumit ini.

Variable Font

Menurut sejarahnya, kalau kamu butuh typeface Regular, Bold, dan Italic, kamu harus me-load tiga file terpisah. Variable Font, yang dikenalkan sebagai ekstensi OpenType pada tahun 2016, mengubah segalanya.

Daripada pakai outline statis, variable font menyimpan sebuah master outline dan sekumpulan delta matematis (di dalam tabel fvar dan gvar). Delta-delta ini mendefinisikan sebuah "ruang desain" (design space) interpolasi di sepanjang axes (sumbu) yang berbeda.

Lima axes standar tersebut adalah:

  • wght: Ketebalan (Thin sampai Black)
  • wdth: Lebar (Condensed sampai Expanded)
  • ital: Italic (On atau Off)
  • slnt: Kemiringan (Sudut hurufnya)
  • opsz: Ukuran Optik (Menyesuaikan bentuk berdasarkan seberapa besar font ditampilkan)

Di CSS, pemetaan ke sebuah axis variable font terlihat seperti ini:

/* Mengatur weight kustom di 430 dan sedikit miring */
h1 {
  font-family: 'MyVariableFont', sans-serif;
  font-variation-settings: 'wght' 430, 'slnt' -5;
}

Kompresi Web (WOFF2)

WOFF2 (Web Open Font Format 2) pada dasarnya bukanlah jenis font baru; itu cuma wrapper kompresi yang membungkus sebuah file TTF atau OTF. Dia pakai algoritma kompresi Brotli, yang secara khusus dioptimasi buat paham struktur tabel SFNT, menghasilkan ukuran file sekitar 30% lebih kecil dibanding WOFF versi asli. Saat browser men-download file WOFF2, ia akan diam-diam men-decompress file tersebut kembali menjadi font OpenType standar di dalam memori sebelum diserahkan ke graphics engine.

Cerita di dunia nyata

Sabotase Cyrillic Tak Kasat Mata

Seorang frontend developer ditugaskan buat bikin situs marketing global pakai typeface open-source yang lagi tren. Semuanya kelihatan pixel-perfect di bahasa Inggris dan Spanyol. Tapi, begitu tim lokalisasi masukin konten bahasa Rusia ke CMS, font sans-serif yang cantik itu tiba-tiba balik jadi font fallback Times New Roman yang jelek dan nggak di-style.

Si developer ngira karena font itu "modern", pasti bakal support semua bahasa mayor. Inspeksi di tabel cmap mengungkapkan kebenaran yang pahit: font tersebut cuma berisi glyph ASCII dan Latin dasar. Blok Unicode Cyrillic-nya kosong melompong. Pelajarannya? Jangan pernah langsung percaya sama language support sebuah font tanpa ngecek coverage glyph-nya secara langsung.

Blunder 3 Megabyte

Sebuah design agency nge-hand-off proyek web ambisius yang pakai sembilan weight berbeda dari sebuah font brand kustom (mulai dari Hairline sampai UltraBlack). Si developer dengan rajin me-load kesembilan file .ttf tersebut ke dalam CSS. Hasilnya adalah payload 3MB yang bikin bencana cuma buat urusan tipografi doang, menyebabkan delay rendering yang parah di jaringan seluler.

Dengan menginspeksi sumber font family tersebut, si developer nemuin satu versi variable font (.woff2) dari typeface yang sama. Dengan menukar sembilan file statis tadi sama satu file variable font, mereka berhasil mengurangi payload jadi 120KB. Bukan cuma performanya yang meroket, tapi mereka juga bisa ngasih animasi yang mulus di axis wght pada state hover.

Surat Ancaman Hukum

Sebuah startup lagi buru-buru rilis aplikasi iOS baru mereka. UI desainer asal comot font "gratisan" dari blog tipografi random buat dipakai di tombol primary. Dua hari sebelum submit ke App Store, seorang senior engineer mutusin buat ngintip metadata font tersebut.

Di dalam tabel name, terpampang jelas ada sebuah string yang secara eksplisit melarang embedding font di dalam aplikasi mobile yang di-compile tanpa membeli lisensi komersial seharga $5.000. Berkat nemuin aturan EULA (End User License Agreement) yang terkubur ini, si startup selamat dari potensi tuntutan hak cipta dan takedown aplikasi paksa. Font itu adalah software, dan mereka membawa beban hukum tepat di dalam file binary mereka.

Kesalahan umum dan jebakan

  • Bikin bold dan italic palsu: Kalau kamu pasang font-weight: bold; atau font-style: italic; di CSS, tapi belum beneran me-load file font bold/italic tersebut, browser bakal mensintesiskan font regulernya (bikin tebal atau miring paksa). Teknik "faux-bolding" ini ngerusak bentuk vektor yang udah susah-susah dibikin desainer dan bakal kelihatan jelek banget.
  • Mengabaikan lisensi: Cuma karena kamu bisa download file .ttf, bukan berarti kamu punya hak buat menyajikannya di web atau mem-bundle-nya di dalam aplikasi. Selalu baca metadata-nya.
  • Mengirim subset yang membengkak (bloated): Banyak font populer yang berisi ribuan glyph buat bahasa yang mungkin nggak akan pernah kamu gunakan. Ngirim file font berukuran 400KB padahal kamu cuma butuh karakter alfabet Inggris adalah pemborosan bandwidth yang masif. Kamu harus menginspeksi font tersebut buat ngecek bloat-nya, lalu pakai subsetting tool buat ngebuang glyph yang nggak dipakai.
  • Berasumsi fitur OpenType nyala secara default: Banyak font punya ligature cantik, style karakter alternatif, atau tabular number (di mana setiap angka punya lebar yang sama persis, cocok banget buat tabel harga). Tapi fitur ini sering kali tersembunyi di balik tag OpenType kayak liga atau tnum. Kalau kamu nggak menginspeksi font itu buat tahu kalau fitur itu ada, kamu nggak bisa ngaktifin mereka pakai font-feature-settings di CSS kamu.

Kenapa ini harus ada di radarmu

Tipografi adalah nyawa absolut dari web; hingga 90% desain di website tipikal itu cuma sekadar teks. Sebagai developer, memperlakukan font kayak bubuk ajaib perias teks itu sama saja memancing masalah performa dan bug layout.

Kamu perlu mikirin font inspection tiap kali kamu lagi ngoptimasi performa web. File font yang ukurannya gede bikin Cumulative Layout Shift (CLS) dan Flash of Unstyled Text (FOUT) yang nyebelin. Dengan ngintip ke balik layarnya, kamu bisa memverifikasi apakah font dikompresi dengan benar (WOFF2), menentukan apakah font itu bisa di-subset, atau melihat apakah font itu bisa diganti sepenuhnya sama variable font. Terlebih lagi, setiap kali kamu masuk ke ranah internasionalisasi (i18n), kamu harus bisa mengaudit tabel glyph font buat memastikan kalau bahasa yang kamu targetkan bakal benar-benar bisa di-render.

Menguasai logika internal font bakal mengangkat levelmu dari orang yang cuma bisa ngetik font-family, jadi orang yang beneran paham mendalam gimana browser melukis konten paling penting di layar.

Gali lebih dalam

Teori beres. Saatnya praktik — 100% di browser kamu.

Coba tool-nya: Font Inspector & Glyph Viewer