TTF vs OTF vs WOFF2: Perbandingan Format Font
Sejarah Singkat Ketiga Format Ini
TrueType (TTF) muncul pada tahun 1989 dari hasil kerja sama antara Apple dan Microsoft. Tujuan mereka adalah memberikan sistem operasi kontrol langsung atas rendering font, memotong ketergantungan mereka pada lisensi PostScript dari Adobe. Sebuah file TTF menyimpan outline glyph sebagai kurva Bézier kuadratik dan menggabungkan semuanya—metrik, instruksi hinting, tabel kerning—ke dalam satu file biner. Selama sebagian besar era 90-an, TTF adalah raja font desktop yang tak terbantahkan di Windows maupun macOS. Lalu muncullah OpenType (OTF) pada tahun 1996, yang dikembangkan oleh Microsoft dan segera diikuti oleh Adobe. Alih-alih memulai dari awal, OpenType secara cerdas memperluas kontainer TrueType. Sebuah file OTF dapat menggunakan kurva kuadratik TrueType atau kurva PostScript kubik milik Adobe (outline CFF), itulah sebabnya kamu melihat istilah 'OTF berbasis CFF.' Lebih penting lagi, format ini memperkenalkan serangkaian tabel layout yang kuat—GSUB dan GPOS—yang membuka fitur-fitur seperti ligature, small caps, swash, dan contextual alternate. Sebuah file OTF yang canggih untuk aksara kompleks seperti Arab bisa berisi ribuan aturan substitusi glyph. WOFF2 (Web Open Font Format 2) bermain di ranah yang sama sekali berbeda. Disahkan sebagai Rekomendasi W3C pada tahun 2018, ini bukanlah format outline baru, melainkan pembungkus kompresi yang super efisien. Format ini mengambil file TTF atau OTF yang ada, menerapkan kompresi Brotli dan langkah pra-pemrosesan khusus untuk font, dan menghasilkan file yang seringkali 30–50% lebih kecil. WOFF2 dibuat khusus untuk pengiriman web. Browser mendekompresinya secara langsung, jadi file ini bahkan tidak pernah terlihat oleh manajer font di OS kamu. Memahami perbedaan ini—format outline versus format pengiriman—adalah kunci untuk memahami cara menggunakannya.
Ukuran File dan Kompresi: Angka yang Benar-Benar Penting
Ukuran file mentah sangat berpengaruh pada hal-hal penting: waktu muat halaman, ukuran paket aplikasi, dan biaya bandwidth CDN. Mari kita lihat beberapa angka konkret. Jenis huruf Latin yang cukup kompleks seperti Source Sans Pro Regular berukuran sekitar 260 KB sebagai file TTF. Versi OTF-nya, yang menggunakan outline CFF yang lebih efisien, berukuran sekitar 155 KB. Ini karena kurva kubik CFF seringkali dapat mendeskripsikan bentuk dengan lebih sedikit titik dibandingkan kurva kuadratik TrueType, yang menyebabkan OTF berbasis CFF 20–40% lebih kecil untuk aksara Latin. Sekarang, konversikan font yang sama ke WOFF2 dan kamu akan mendapatkan file sekitar 75 KB. Itu adalah pengurangan sebesar 71% dari file TTF asli. Dengan font CJK (Cina, Jepang, Korea), ceritanya berbeda. File TTF CJK dengan cakupan penuh seperti Noto Sans CJK SC bisa membengkak hingga lebih dari 20 MB. Kompresi WOFF2 memang membantu, mungkin menurunkannya menjadi 13–15 MB, tapi itu bukanlah solusi ajaib. Solusi sebenarnya untuk font berukuran besar adalah subsetting, yang merupakan proses terpisah dari sekadar konversi format. WOFF2 saja tidak akan menyelamatkan font dengan 65.000 glyph. Adapun WOFF (versi 1), pada dasarnya sudah usang. Format ini menggunakan kompresi zlib dan telah sepenuhnya digantikan oleh WOFF2. Menurut caniuse.com, dukungan WOFF2 telah mencapai 97%+ pengguna global sejak tahun 2024, mencakup setiap browser modern yang kamu pedulikan. Satu-satunya yang tertinggal adalah browser bawaan kuno atau kios yang masih menjalankan Internet Explorer 11. Untuk proyek web baru mana pun, WOFF2 bukan hanya pilihan terbaik; itu satu-satunya pilihan yang masuk akal.
Fitur OpenType: Di Mana OTF Benar-Benar Mengungguli TTF
Perbedaan teknis paling penting antara OTF yang bagus dan TTF adalah akses ke fitur layout OpenType tingkat lanjut. Meskipun secara teknis kedua jenis file dapat berisi tabel GSUB (Glyph Substitution) dan GPOS (Glyph Positioning) yang diperlukan, para type foundry profesional hampir secara eksklusif membangun set fitur kaya mereka ke dalam rilis OTF mereka. Di dunia nyata, fitur-fitur keren ada di OTF. Apa sebenarnya fungsi fitur-fitur ini? Ligature menggantikan urutan umum seperti 'fi' dan 'fl' dengan satu glyph tunggal yang dibuat sempurna, mencegah tabrakan. Ligature diskresioner melangkah lebih jauh, dengan indah menggabungkan pasangan seperti 'ct' atau 'Th' untuk sentuhan kaligrafi. Small caps menggantikan huruf kapital setinggi penuh dengan versi lebih kecil yang berukuran optik—ini adalah glyph yang digambar ulang, bukan hanya huruf yang diperkecil. Figur gaya lama (oldstyle figures) memberimu angka dengan ascender dan descender, memungkinkan mereka menyatu dengan indah dalam baris teks. Satu file OTF untuk jenis huruf seperti Minion Pro bisa berisi lebih dari 1.700 glyph dan puluhan fitur ini, yang ditandai sebagai 'onum,' 'smcp,' 'calt,' 'swsh,' dan 'hist.' Di CSS, kamu mengaktifkannya dengan `font-feature-settings: 'onum' 1;` atau `font-variant-numeric: oldstyle-nums;`. Di Adobe InDesign, kamu akan menemukannya di bawah Type > OpenType. Bahkan Microsoft Word 365 memiliki beberapa dukungan di dialog font tingkat lanjut, meskipun tidak selengkap alat dari Adobe. File TTF tanpa tabel-tabel ini tidak menawarkan semua itu, tidak peduli aplikasinya. Jika desainmu bergantung pada small caps yang tepat, contextual alternate, atau pembentukan kompleks yang diperlukan untuk aksara seperti Arab atau Devanagari, OTF bukan lagi sekadar preferensi. Ini adalah sebuah keharusan.
Hinting dan Rendering: Konteks Desktop vs. Layar
Font hinting adalah seperangkat instruksi di dalam file font yang menyesuaikan outline glyph agar terlihat tajam pada ukuran kecil di layar. Siapa pun yang pernah menyipitkan mata melihat teks 12px yang buram tahu betapa menyiksanya rendering yang buruk; hinting adalah obatnya. Tanpa hinting, batang vertikal dari huruf 'n' kecil mungkin memiliki lebar satu piksel sementara yang lainnya dua piksel, menciptakan tampilan yang jelek dan tidak rata. Hinting yang baik akan menyelaraskan goresan-goresan tersebut ke grid piksel. Font TTF terkenal dengan hinting TrueType manualnya, sebuah bahasa bytecode kompleks yang memberi desainer kontrol terperinci atas setiap piksel. Ini adalah pekerjaan yang sangat padat karya—font yang di-hinting sepenuhnya secara manual seperti Arial mewakili ratusan jam kerja. Hasilnya sangat terasa pada sistem Windows lama yang menggunakan renderer GDI. Font OTF berbasis CFF menggunakan hinting PostScript yang lebih sederhana. Di macOS, yang telah lama menggunakan renderer yang sebagian besar mengabaikan hinting, perbedaan ini tidak relevan. Di Windows, renderer ClearType (standar sejak Vista) telah mempersempit kesenjangan secara signifikan. Dan pada layar high-DPI—pada dasarnya semua ponsel modern atau layar "Retina"—hinting menjadi hampir tidak relevan. Pikselnya terlalu kecil untuk masalah penyelarasan grid tersebut muncul. WOFF2 tidak mengubah cerita hinting; format ini hanya mempertahankan data hinting dari font asli yang dikompresnya. Jika kamu mengonversi TTF yang di-hinting dengan baik, hinting tersebut akan ikut terbawa. Jadi, kesimpulan praktisnya? Jika pengguna utamamu menggunakan monitor Windows non-HD dan kamu menampilkan teks di bawah 16px, TTF yang di-hinting secara manual masih memiliki keunggulan yang terlihat. Untuk penggunaan web di perangkat keras modern, perbedaannya hampir mustahil untuk dilihat.
Kapan Menggunakan Masing-Masing Format: Panduan Praktis
Untuk instalasi desktop—di OS, aplikasi desain, atau paket office kamu—kamu memerlukan TTF atau OTF. Baik Windows maupun macOS mendukung keduanya secara native, begitu pula distro Linux. Keputusannya tergantung pada kebutuhanmu. Jika kamu seorang desainer yang membutuhkan ligature, swash, dan fitur tipografi canggih lainnya di InDesign, kamu pasti mau OTF. Jika kamu seorang admin IT yang menyebarkan font perusahaan ke seluruh komputer Windows, TTF yang di-hinting seringkali merupakan pilihan yang lebih aman dan lebih kompatibel. Untuk web, jawabannya simpel: WOFF2. Titik. Deklarasi `@font-face` di CSS kamu harus selalu mencantumkan WOFF2 terlebih dahulu: `src: url('font.woff2') format('woff2'), url('font.woff') format('woff');`. Menyajikan file TTF atau OTF mentah melalui web adalah sebuah kejahatan terhadap performa. Kamu memaksa pengguna mengunduh data 2-3x lebih banyak dari yang diperlukan. Jika kamu melihat tema lawas yang merujuk file .ttf di stylesheet-nya, menggantinya dengan WOFF2 adalah cara cepat dan mudah untuk meningkatkan performa. Aplikasi seluler adalah konteks yang berbeda. Baik iOS maupun Android secara native menggunakan file TTF dan OTF yang dibundel di dalam paket aplikasi; keduanya tidak menggunakan WOFF2 untuk tujuan ini, karena ini adalah format pengiriman khusus browser. Aplikasi Flutter membundel TTF atau OTF di direktori aset dan mendeklarasikannya di `pubspec.yaml`, dan React Native mengikuti pola serupa. Game engine memiliki preferensinya sendiri. TextMeshPro dari Unity bekerja dengan OTF dan TTF untuk menghasilkan aset font-nya. Importer Unreal Engine lebih menyukai TTF. Keduanya tidak akan mengimpor file WOFF2 secara langsung, jadi jika hanya itu yang kamu miliki, kamu perlu mengonversinya kembali ke TTF atau OTF terlebih dahulu.
Mengonversi Antar Format dengan CocoConvert
Perlu beralih antar format ini? CocoConvert menangani jalur konversi paling penting: TTF ke WOFF2, OTF ke WOFF2, WOFF2 ke TTF, dan bahkan OTF ke TTF. Proses kami didukung oleh `fonttools`, library Python standar industri yang juga digunakan oleh Google Fonts. Ini memastikan file hasil konversimu sesuai standar dan tabel OpenType seperti GSUB, GPOS, catatan nama, dan data hinting tetap terjaga. Untuk membuat font yang siap untuk web, cukup unggah file .ttf kamu di halaman konversi font kami, pilih WOFF2 sebagai output, dan klik Convert. Font Latin biasa diproses dalam hitungan detik. File WOFF2 yang dihasilkan menyimpan semua metrik dan fitur layout dari file asli, tanpa ada yang dihilangkan secara default. Tentu saja, CocoConvert tidak bisa melakukan segalanya. Aplikasi ini tidak melakukan subsetting. Jika kamu mengonversi font CJK 20 MB, kamu akan mendapatkan file WOFF2 terkompresi 13 MB, bukan file ramping 50 KB yang hanya berisi karakter yang kamu butuhkan. Untuk itu, kamu memerlukan alat khusus seperti `pyftsubset`. CocoConvert juga tidak mengubah metadata lisensi. Jika flag embedding (fsType) sebuah font membatasinya untuk penggunaan web, flag tersebut akan tetap ada di file hasil konversi. Ingat: mengonversi font tidak mengubah lisensinya. Jika kamu tidak memiliki hak untuk menggunakan font di web, mengonversinya ke WOFF2 tidak akan membuatnya legal. Mengonversi WOFF2 kembali ke TTF sangat berguna ketika kamu menemukan font web dan perlu menginstalnya untuk penggunaan desktop. Dekompresinya bersifat lossless, artinya data outline pada file TTF yang dihasilkan identik byte-demi-byte dengan sumber aslinya. Konversi ini dengan bersih membalikkan setiap optimisasi spesifik WOFF2, memberimu file desktop yang dapat digunakan dengan sempurna.
Ringkasan: Memilih Format yang Tepat Tanpa Perlu Pusing
Mari kita langsung ke intinya. Ketiga format ini bukanlah alternatif yang bisa saling menggantikan. Mereka adalah alat yang berbeda untuk pekerjaan yang berbeda. TTF adalah adaptor universal. Setiap platform yang berurusan dengan font dapat menangani TTF. Ini adalah pilihan yang tepat ketika kamu membutuhkan kompatibilitas maksimum, menargetkan lingkungan Windows lama di mana hinting spesifiknya unggul, atau ketika alat seperti game engine mengharuskannya. Kelemahan utamanya adalah ukuran file yang lebih besar dibandingkan OTF berbasis CFF dan biasanya tidak memiliki fitur tipografi canggih. OTF adalah pilihan para profesional untuk pekerjaan desktop. Ketika sebuah type foundry menjual font untuk desain serius, versi OTF adalah yang kamu inginkan. Format ini berisi set fitur OpenType lengkap, outline CFF-nya ringkas, dan setiap aplikasi desain modern mendukungnya. Satu-satunya kelemahan nyata adalah ukurannya terlalu besar untuk pengiriman web. Menyajikan OTF mentah melalui HTTP adalah pemborosan bandwidth. WOFF2 hanya untuk satu hal: web. Ini bukan jenis font baru, hanya font yang sudah ada yang dikompres dengan cemerlang untuk browser. Gunakan WOFF2 dalam aturan `@font-face` kamu. Selalu. Simpan file TTF atau OTF asli sebagai file sumbermu, tetapi perlakukan WOFF2 sebagai aset sekali pakai yang dioptimalkan untuk pengiriman. Berikut alur kerja sederhananya untuk setiap proyek baru: dapatkan font OTF berkualitas dari sebuah foundry. Gunakan CocoConvert untuk membuat versi WOFF2 untuk situs web kamu. Simpan OTF asli untuk pekerjaan cetak atau desain apa pun. Dan jika suatu saat kamu hanya memiliki file WOFF2 dan membutuhkannya di desktop, konversikan kembali ke TTF. Sesederhana itu.