Solusi Tipografi dengan Metode Alternatif sIFR dan FLIR

Fonts

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

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 ↓

  1. 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).
  2. 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 ↓

  1. 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
  2. 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)

FLIR

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 ↓

  1. 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).
  2. Proses replacement teks lebih cepat daripada sIFR
  3. Sama seperti sIFR, masalah aksesibilitas dan SEF tidak perlu dikhawatirkan.

Kekurangan FLIR ↓

  1. Teks tidak dapat di-highlight layaknya sIFR, karena teks sudah diganti berupa gambar
  2. 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.

Eksternal

  1. Introducing sIFR: The Healthy Alternative to Browser Text
  2. This Is How You Get sIFR To Work
  3. Wiki.Novemberborn, sIFR Documentation & FAQ

Instant Internet Business Ideas

Related Posts ↓

Rahasia Sukses Paid Review

{27 Comments so far }

  1. izandi said,

    Wrote on April 23, 2009 @ 6:23 am

    jadi pengen nyobain :D

  2. infini3 said,

    Wrote on April 23, 2009 @ 10:34 pm

    Kayaknya yang poin no. 2 bagus juga. Lalu bagaimana kita tahu kalau FLIR sudah bekerja?

  3. fanari said,

    Wrote on April 24, 2009 @ 5:27 am

    @infini3: teks yang di-FLIR-kan akan berubah jadi image, silakan lihat contohnya pada judul berita NYTimes.com

  4. Masenchipz said,

    Wrote on April 24, 2009 @ 1:26 pm

    pinter nih soal tipografi.. siip :)

  5. ipung said,

    Wrote on April 26, 2009 @ 2:18 am

    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 :D

  6. thegands said,

    Wrote on April 26, 2009 @ 3:34 pm

    seperti yang saya bilang semalam bro, ada banyak kerugiannya juga menggunakan teknik ini. kecuali menggunakan image… :)

  7. Muslihun Al-lampani said,

    Wrote on May 1, 2009 @ 3:21 pm

    Benar-benar solusi jitu…..

  8. Taktiku said,

    Wrote on May 7, 2009 @ 11:01 pm

    Makasih mas infonya. Bingung juga nih

  9. negeri hijau said,

    Wrote on May 8, 2009 @ 10:30 am

    bingung nih, ga ngerti, baru tau tuh….

    salam kenal.

  10. aL said,

    Wrote on May 9, 2009 @ 4:03 am

    saran dong tentang font font yang bagus untuk screen dan print, klo bisa sih yg di luar font-font microsoft.

  11. -tikabanget- said,

    Wrote on May 9, 2009 @ 7:27 pm

    Simbah IE memang riwil..

  12. ceznez said,

    Wrote on May 10, 2009 @ 6:45 pm

    klo liat aksesbilitasnya SEF itu like as code HTML ya mas?

  13. buJaNG said,

    Wrote on May 12, 2009 @ 2:54 pm

    Saya malah tambah bingung nih…. ga dong…

  14. Rusa Bawean™ said,

    Wrote on May 13, 2009 @ 9:23 am

    wahhh
    saya malah baru tau
    kalo ada ginian
    :)

  15. tentangrifai said,

    Wrote on May 14, 2009 @ 2:13 am

    baru tau nihh saya mengenai hal ini..
    thx atas infonya yaa

  16. Arif said,

    Wrote on May 15, 2009 @ 10:56 pm

    Keren nich … saya sering bingung mau ganti font … kayaknya asyik untuk dicoba

  17. afwan auliyar said,

    Wrote on May 18, 2009 @ 1:45 pm

    wew… dapat ilmu baru neh
    br tau ada metode2 kyak gt :)

  18. uwiwu said,

    Wrote on May 19, 2009 @ 11:01 pm

    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

  19. Danta said,

    Wrote on May 20, 2009 @ 7:44 pm

    Wow.. metode2nya mantab.. tengkyu mas..

  20. geblek said,

    Wrote on May 30, 2009 @ 9:26 am

    flir di wp ada plugins untuk itu, tapi katanya gak seo :)

  21. Cakka said,

    Wrote on July 6, 2009 @ 4:49 pm

    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

  22. fanari said,

    Wrote on July 6, 2009 @ 5:42 pm

    @Cakka: konversi TTF ke format SWF bisa pakai tool online sIFR Generator

  23. Denny said,

    Wrote on July 9, 2009 @ 11:09 am

    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 :D
    keknya mirip2 ini deh :D

  24. choen said,

    Wrote on July 11, 2009 @ 9:41 am

    gw coba cufon di blogger, lumayan, walau saat loading masih keliatan jenis font aslinya.

  25. hanum said,

    Wrote on October 7, 2009 @ 4:24 pm

    wah.. makasih mas info sharingnya. Jadi, kepengen nyoba ^_^

  26. mivtech said,

    Wrote on October 30, 2009 @ 3:54 pm

    Artikel yang bagus !
    Thanks!

  27. adam said,

    Wrote on April 17, 2010 @ 4:52 am

    tengkyu artikelnya ya mas… sangat bermanfaat

Comment RSS · TrackBack URI

Leave a Comment ↓

Name

E-mail

Website