Memahami konsep & penggunaan web-safe font

Ada satu perbedaan sangat mencolok dalam mendesain web dibandingkan desain untuk media print / cetak: kompatibilitas / ketersediaan font.

Dalam desain untuk media print, anda bisa menggunakan font apa saja yang anda inginkan. Ketika desain tersebut dicetak ke media yang diinginkan, semuanya beres.

Hal berbeda terjadi untuk media web (dan kebanyakan media digital lainnya). Anda tidak bisa menggunakan sembarangan font untuk desain anda (kecuali anda menggunakan text replacement, image replacement atau @font-face nya CSS3 – kita bahas belakangan dalam tulisan ini). Hal ini dikarenakan sistem kerja media web sendiri: saat anda mendesain sebuah halaman html, halaman tersebut menggunakan font yang tersedia di sistem operasi anda. Saat halaman html tersebut diakses dan dibuka di komputer pengguna (komputer lain), font yang digunakan pada halaman html tersebut belum tentu tersedia di komputer pengguna. That’s the problem.

Karena permasalahan ini, muncul lah konsep web-safe font.

Sederhananya, web-safe font adalah font yang hampir pasti akan tersedia di semua komputer karena disediakan by default oleh sistem operasi yang digunakan (Windows, Mac & Linux). Dan jika tidak tersedia, setidaknya terdapat font “padanan”-nya yang dapat menggantikan font tersebut.

Untuk daftar lengkap web safe font ini, ampsoft.net memiliki tabel lengkap web safe font lengkap dengan perbedaan minor di berbagai browser. Anda bisa lihat di halaman ini.

Sedangkan bagi saya pribadi, web-safe font set yang paling sering saya gunakan adalah:

• Serif: Georgia
• Sans-Serif: Arial, Verdana

Yap, hanya itu saja. Tiga font diatas adalah web-safe font yang paling sering saya gunakan. Dengan pengaturan CSS yang baik, tiga font diatas sudah berperan dengan cukup baik sebagai body text.

Tidak bisakah desain web menggunakan font lain?

Kebutuhan untuk menggunakan font lain selain web-safe font atas dasar keunikan web memicu banyak desainer dan pengembang web menciptakan berbagai teknik yang memungkinkan mereka untuk menggunakan font-font lain selain web-safe font dalam desain-desain mereka tanpa perlu dikhawatirkan dengan ketersediaan font di komputer pengguna. Terdapat banyak sekali teknik untuk menggunakan custom font, namun saya pribadi lebih sering menggunakan tiga teknik ini:

1. Image Replacement – idenya adalah “menyembunyikan” teks lalu menggantinya dengan gambar menggunakan CSS. Efisien untuk logo situs atau teks yang akan sangat jarang berubah. Kekurangannya adalah tidak fleksibel: untuk mengganti tulisan, anda harus mengeditnya melalui image processing software, edit css, save, upload, tidak praktis. Saya sudah menulis mengenai image replacement disini.
2. Cufon – Konsepnya begini: mereplace text dengan image (CMIIW) yang digenerate menggunakan JavaScript. Lebih fleksibel karena text bisa diedit langsung menggunakan text editor sedangkan replacement berlangsung on the fly di browser pengguna dengan menggunakan JavaScript. Kekurangannya adalah tidak efisien untuk digunakan pada body text karena menggenerate markup tambahan (yang setahu saya jadi kurang oke untuk SEO) sehingga penggunaannya terbatas pada heading saja. Saya belum menulis banyak mengenai hal ini. Anda bisa langsung mengetahui lebih banyak mengenai Cufon disini.
3. font embedding menggunakan @font-face (CSS3) – CSS3 adalah perkembangan termutakhir (untuk saat ini) dari CSS. Konsepnya adalah CSS dapat “mengembedd” font dari server sehingga browser akan turut membawa font seiring dengan halaman web dan menggunakan font tersebut untuk “membentuk” tampilan halaman web. Kekurangan teknik ini hanya satu: masih banyak sekali pengguna internet yang menggunakan browser yang belum kompatibel dengan CSS3. Jadi teknik ini bisa dikatakan “solusi masa depan yang sudah dapat mulai diaplikasikan dari sekarang“. Saya belum menulis tentang @font-face. Anda bisa langsung mengetahui lebih banyak mengenai @font-face disini.