Berbagai Alternatif Memperindah Font Website

Berbagai Alternatif Memperindah Font Website

Seiring dengan perkembangan teknologi dunia web, tentu saja semakin memunculkan banyak desain-desain kreatif untuk sebuah halaman website. Desainer yang berpengalaman pasti paham, bahwa tipografi…

Seiring dengan perkembangan teknologi dunia web, tentu saja semakin memunculkan banyak desain-desain kreatif untuk sebuah halaman website. Desainer yang berpengalaman pasti paham, bahwa tipografi menjadi salah satu unsur penting keindahan sebuah web. Untuk itu, tentu saja pemilihan font yang benar jadi salah satu kuncinya.

Sebelum era JavaScript dan CSS3, jenis font yang dipakai untuk website sangatlah terbatas. Hal ini karena font yang dideklarasikan di website harus juga dimiliki oleh komputer pengguna yang mengaksesnya, seperti Arial, Georgia, Times New Roman, dan sebagainya. Bila ingin membuat tipografi yang menarik dengan font yang tidak biasa, maka haruslah diubah menjadi suatu image/gambar.

Namun saat ini, ada banyak alternatif untuk menampilkan berbagai jenis font yang masing-masing memiliki kelebihan dan kekurangan tersendiri. Berikut ini cara-cara yang bisa Anda gunakan.

  1. Cufon
    Alternatif pertama ini sering digunakan sebelum munculnya CSS3. Trik yang dipakai adalah dengan membuat file JavaScript yang akan mengconvert jenis font yang dipakai menjadi sebuah gambar. Karena menggunakan JavaScript, maka pemrosesan akan berjalan di client/browser pengakses. Dua langkah yang perlu Anda lakukan adalah mendownload library javascript Cufon, kemudian mengupload file font yang akan digunakan untuk dibuat kode javascriptnya secara otomatis. Anda bisa mencobanya dengan melalui website resminya di http://cufon.shoqolate.com/generate/.

    Keunggulan cara ini antara lain adalah support untuk berbagai jenis browser, dapat memilih karakter secara spesifik dari suatu kata, dan style CSS dengan tampilan sama di semua browser. Sedangkan kekurangannya adalah teks tidak dapat diseleksi, performa hanya baik untuk header, dan styling khusus seperti hover membutuhkan effort lebih.
  2. @font-face
    Saat ini, teknik ini mungkin yang paling populer dipakai. Programmer front-end dapat sesuka hati menggunakan font miliknya, kemudian membuat kode CSS3 yang menggunakan font tersebut. Sayangnya setiap browser bisa saja menampilkan hasil font tersebut secara berbeda, dan beberapa tipe format dibutuhkan di browser yang berbeda. Cara penggunaan teknik @font-face ini akan dibahas pada artikel lain.
    Keunggulan teknik ini adalah kemudahan styling dengan CSS, support Unicode, dan dapat dengan mudah di-maintain. Sedangkan kekurangannya adalah beberapa jenis font akan cukup berat didownload, serta perlu memakai berbagai format font untuk browser yang berbeda.
  3. Google Font API
    Berbekal masalah pada kekurangan @font-face, Google merilis sebuah API yang memungkinkan programmer front-end untuk menggunakan berbagai jenis font yang dihosting di server Google. Prinsipnya adalah Google membuat suatu kode CSS yang kompak untuk mendeklarasikan @font-face, di mana seluruh format file font yang dibutuhkan telah tersedia. Cara penggunaan teknik ini juga telah dibahas di artikel lalu.

    Keunggulan teknik ini adalah penggunaan font open source yang artinya Anda bisa mendistribusikan kode Anda sebebas-bebasnya, serta file font yang tidak perlu lagi Anda host karena telah dihosting oleh Google. Tidak ada kekurangan berarti dari teknik ini. Anda bisa memilih font yang ingin digunakan di http://www.google.com/webfonts.
  4. FontSquirrel Font Kit
    Hampir sama dengan apa yang dilakukan Google Font API, FontSquirrel.com menyediakan kit yang dapat langsung digunakan dari berbagai font yang ada dalam direktorinya. Perbedaannya, Anda harus mendownload terlebih dahulu kit yang disediakan, kemudian memasukkannya dalam kode website Anda, sebab tidak tersedia servis untuk hostingnya.

    Kelebihan dari cara ini adalah setiap @font-face telah tersedia berbagai format file-nya, Anda cukup mendownload kit maka kode @font-face telah Anda miliki. Selain itu, masalah lisensi adalah tanggungjawab FontSquirrel, pilihan font yang lebih banyak, dan Anda juga bisa membuat kit sendiri. Sedangkan kekurangannya sama dengan @font-face, hanya saja cara ini jauh lebih baik. Anda bisa mengetahui lebih lanjut di websitenya http://www.fontsquirrel.com/fontface.
  5. TypeKit
    Bila Anda menginginkan sesuatu yang eksklusif dan Anda memiliki dana untuk itu, Anda bisa mencoba menggunakan TypeKit ini. Jumlah font yang bisa digunakan sangatlah banyak, dan tersedia servis untuk langsung menggunakan font yang ada, karena file dihosting di server TypeKit.

    Namun tentu saja Anda harus membayar biaya subscribe tahunan yang bervariasi, tergantung paket apa yang Anda ingin gunakan. Kekurangan lainnya ada pada anti-aliasing yang kurang baik untuk beberapa jenis font. Anda bisa mengetahuinya lebih lanjut di http://typekit.com/.
  6. FontDeck
    Servis premium lain yang bisa Anda gunakan adalah FontDeck ini. Perbedaannya dengan TypeKit adalah Anda hanya perlu membayar jenis font yang Anda gunakan saja. Anda juga bisa memilih untuk membayar berdasarkan jumlah page view yang dibuka.

    Jumlah font yang tersedia cukup banyak, ditambah pula file-nya dihosting oleh FontDeck secara langsung. Sayangnya, ada keterbatasan jumlah page view perbulan. Servis ini tidak disarankan bagi website yang memiliki jumlah pengunjung sangat banya. Anda bisa mengeceknya lebih lanjut di http://fontdeck.com/.

Masih banyak lagi alternatif memperindah tampilan font lainnya. Tidak menutup kemungkinan juga Anda bisa membuatnya sendiri, kemudian menyediakannya sebagai servis umum. Selamat mencoba!

Artikel ini dengan versi sebelumnya telah dipublikasikan Penulis di PC Mild edisi 16/2011.
Tag: , , , , , , , ,

3 Comments

Leave Comment
  1. Nessaj says:

    Wah.. Thanks bang! bermanfaat banget ni buat gw!

  2. Opik says:

    langsung ke tkp gan kebetulan lagi cari2 font yang pas buat blog ane

  3. hayakana says:

    waah ijin praktek gan lumayan nie bisa bikin blog saya lebih bagus :D

Write Comment

Your email will not be published. The marked label is required.