
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.
jadi pengen nyobain
Kayaknya yang poin no. 2 bagus juga. Lalu bagaimana kita tahu kalau FLIR sudah bekerja?
@infini3: teks yang di-FLIR-kan akan berubah jadi image, silakan lihat contohnya pada judul berita NYTimes.com
pinter nih soal tipografi.. siip
Hmm.. masalah tipografi emang rada njlimet yach
Saya bersyukur karena belum merasa terlalu butuh penggunaan font yang menarik.
Makasih banyak info tentang standar baru W3-nya. Jadi tambah wawasan mas Fandy
seperti yang saya bilang semalam bro, ada banyak kerugiannya juga menggunakan teknik ini. kecuali menggunakan image…
Benar-benar solusi jitu…..
Makasih mas infonya. Bingung juga nih
bingung nih, ga ngerti, baru tau tuh….
salam kenal.
saran dong tentang font font yang bagus untuk screen dan print, klo bisa sih yg di luar font-font microsoft.
Simbah IE memang riwil..
klo liat aksesbilitasnya SEF itu like as code HTML ya mas?
Saya malah tambah bingung nih…. ga dong…
wahhh
saya malah baru tau
kalo ada ginian
baru tau nihh saya mengenai hal ini..
thx atas infonya yaa
Keren nich … saya sering bingung mau ganti font … kayaknya asyik untuk dicoba
wew… dapat ilmu baru neh
br tau ada metode2 kyak gt
itu point keduanya kayak instantart yg make PHP+GD+FreeType, yah ? keren tuh. cuma apa tiap hosting yg sekalipun make php nyediain library nya….hmm kayaknya sy mau autis dulu nyobain di hosting sendiri. hehehe siapa tau bisa
Wow.. metode2nya mantab.. tengkyu mas..
flir di wp ada plugins untuk itu, tapi katanya gak seo
Thanks info nya kebetulan lagi cari2 info mengenai 2 hal itu
Klo cara buat font nya sendiri gimana ya ? Dari ttf ke flash nya ?
Thanks
@Cakka: konversi TTF ke format SWF bisa pakai tool online sIFR Generator
nah nemu lagi blog yang bahas jquery dan teman2nya.. bakal sering main kesini neh..
kemaren ada temen bikin template model cufon.. ya walau agak kacau, tapi keren
keknya mirip2 ini deh
gw coba cufon di blogger, lumayan, walau saat loading masih keliatan jenis font aslinya.
wah.. makasih mas info sharingnya. Jadi, kepengen nyoba ^_^
Artikel yang bagus !
Thanks!
tengkyu artikelnya ya mas… sangat bermanfaat