Solusi Tipografi dengan Metode Alternatif sIFR dan FLIR

Masalah utama dari tipografi web adalah keterbatasan jumlah web-safe font. Seperti yang kita tahu bahwa tipografi memegang kunci penting dalam web design dari aspek keindahan sampai readability. Sebenarnya W3 sudah mendefinisikan property @font-face pada CSS3, yang memungkinkan web designer untuk menentukan typeface dan menyertakan font untuk didownload dan di-render di websitenya.
Tapi ada beberapa masalah pada penggunaan property @font-face ini. Keluarga Internet Explorer 6-8 belum mendukung font-face, walaupun pesaingnya seperti Safari sudah mendukung cara ini, serta rilis terbaru dari Firefox dan Opera nanti.
Selain itu, masalah pelanggaran hak cipta (copyright) juga mungkin terjadi akibat pengunduhan dan pembagian (sharing) font.
Selain menggunakan CSS untuk mengatur tipografi web, metode alternatif lain yang ditawarkan adalah dengan menggunakan sIFR dan FLIR. Kedua-duanya merupakan typeface script yang memungkinkan kita untuk mengatur tipografi atau tampilan font sesuka hati tanpa harus mengorbankan aksesibilitas dan SEO. Sebenarnya ada metode lain seperti Cufon dan Typeface.js, tapi tidak akan saya bahas disini karena saya sendiri belum pernah mencobanya.
Berikut ini hasil perbandingan saya setelah mencoba menggunakan kedua metode sIFR dan FLIR.
1 – sIFR (Scalable Inman Flash Replacement)

sIFR biasanya digunakan untuk menggantikan teks judul atau pullquote (sebenarnya pullquote juga bisa dibuat bagus menggunakan sedikit teknik CSS seperti yang pernah saya tulis) dengan Flash. sIFR menggunakan Flash untuk merender font face dan menggantikan teks. Keuntungan menggunakan sIFR adalah ↓
- Aksesibilitas tetap terjaga. Walaupun menggunakan Flash, tetapi sesungguhnya format dokumen tetap berupa HTML/XHTML normal. Jadi soal semantik, akesibilitas, dan SEF akan tetap sama dengan kode HTML aslinya (panduan lengkap Best uses of Flash ada pada blog Google Webmaster Central).
- Teks tetap dapat di-highlight layaknya teks normal, serta tidak melanggar hak cipta seperti kata Clay McIlrath, karena metode SIFR menanamkan (embed) font ke dalam objek flash (SWF).
Selain itu ada beberapa kekurangan menggunakan metode ini ↓
- Membutuhkan waktu yang lebih lama untuk menampilkan seluruh halaman. Ini terjadi ketika saya mencoba menggunakan sIFR pada blog ini, tampilan judul postingan yang di-flash-kan muncul terakhir saat seluruh halaman selesai di-load. Dan memang menurut pembuatnya, alasan inilah yang membuat sIFR tidak dirancang untuk dipakai pada seluruh teks, melainkan cuma pada elemen-elemen tertentu seperti headline, judul, atau pullquote
- Fitur JavaScript dan plugin Flash di browser harus diaktifkan. Ya, tanpa keduanya sIFR tidak mungkin berjalan di browser (walaupun teks tetap bisa tampil dalam format teks pada umumnya).
Sebenarnya metode ini tidak terlalu sulit diimplementasikan karena dokumentasi sudah tersedia lengkap.
2 – FLIR (Facelift Image Replacement)

Metode kedua adalah FLIR. Sesuai namanya, konsep dari FLIR adalah mengubah teks menjadi sebuah gambar berformat PNG dengan menggunakan PHP untuk mengirim request ke server untuk membuat gambar yang dirender dari font lama menjadi font baru (dalam bentuk gambar).
Beberapa keuntungan yang saya rasakan setelah mencoba salah satu tool FLIR online generator pada blog ini ↓
- Teks tetap tampak walaupun fitur penampil gambar di browser dimatikan. Beberapa orang membuka halaman web tanpa menampilkan gambar, dan keuntungan menggunakan FLIR adalah teks tetap tampil dengan fitur gambar dinonaktifkan (berupa teks normal).
- Proses replacement teks lebih cepat daripada sIFR
- Sama seperti sIFR, masalah aksesibilitas dan SEF tidak perlu dikhawatirkan.
Kekurangan FLIR ↓
- Teks tidak dapat di-highlight layaknya sIFR, karena teks sudah diganti berupa gambar
- Harus berjalan dengan PHP. Untuk pengguna CMS web dinamis mungkin ini tidak menjadi masalah karena pasti menggunakan PHP di web hostingnya.
Sekali lagi, kedua metode di atas merupakan metode alternatif, jadi bukan merupakan metode baku/standar. Mungkin keduanya merupakan metode terbaik untuk webmaster yang benar-benar serius memperhatikan aspek tipografi, setidaknya untuk saat ini sebelum font-face dibakukan. Beberapa website terkenal seperti The New York Times, RedHat, serta Wired juga telah memanfaatkan sIFR atau FLIR untuk pengaturan tipografi mereka.








Blog ini cuma blog komersil yang dipakai oleh fanari buat nyari duit. Siapa fanari?? Calon "pengangguran" yang (mencoba) sukses dalam bisnis online :).
{27 Comments so far ↓}