Cerdas Memilih Typeface (Font) untuk Website Anda
Seperti halnya gambar, warna, maupun desain yang user-friendly, pemilihan font juga tak kalah penting untuk membuat website Anda lebih efektif dalam menyampaikan informasi.
Beberapa tips berkaitan dengan typography yang barangkali sudah Anda kuasai konsep maupun teknisnya, baik itu tentang white space balance, line spacing, measurement, text alignment, konsep emphazise, proportion dan sebagainya. (lihat juga: Five Simple Steps for Better Typography).
Memilih font yang sesuai dengan website kadang merepotkan bahkan membuat frustasi. Mulai dari banyaknya pilihan font yang sudah tentu tidak semuanya bagus jika ditampilkan di layar, dilema tentang mitos serif untuk title dan sans-serif untuk content. Belum lagi tentang repotnya pemakaian font yang belum tentu terinstall pada komputer pengguna, meskipun kita harus berterimakasih pada teknologi font-embedding untuk yang satu ini.
Ada beberapa hal yang harus dipertimbangkan dalam memilih font, yang akan dibahas dalam artikel ini. Sebelum mempelajari pertimbangan-pertimbangan tersebut di atas, ada baiknya kita mengenal beberapa istilah berikut: Generic Fonts, Common Fonts, dan Similar Fonts.
Generic Fonts: Jenis-jenis font yang digunakan sebagai pengganti untuk font-font yang ditetapkan pada stylesheet namun tidak terinstal pada komputer pengguna. Ada 5 macam generic fonts, yaitu:
- Serif. Di antaranya: Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit.
- Sans-Serif. Di antaranya: MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica.
- Cursive, jenis font yang memiliki garis sambung, atau istilah yang lazim adalah tulisan tegak bersambung. Di antaranya: Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery.
- Fantasy, jenis font bersifat dekoratif yang masih memiliki bentuk karakter yang diwakili (kecuali yang berjenis Picture Fonts/Pi). Di antaranya: Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz.
- Monospace, jenis font yang setiap karakternya memiliki lebar yang sama. Di antaranya: Courier, MS Courier New, Prestige, Everson Mono
Common Fonts: Jenis-jenis font yang lazim digunakan atau terinstall pada komputer user sesuai dengan sistem operasinya. Gambar di bawah ini merupakan hasil sebuah survey untuk jenis font yang terinstal sesuai platformnya (terkahir diupdate pada 13 November 2010).
Untuk daftar lengkapnya, silakan lihat di sini.
Similar Fonts: Beberapa font memiliki kemiripan dengan jenis font lain, yang bisa digunakan sebagai alternatif font tersebut. Misalkan font berikut ini:
Sumber: http://www.upsdell.com
Hal-hal yang Perlu Dipertimbangkan dalam Memilih Font
Sediakan Font-font yang Lazim Digunakan
Seperti pada penjelasan istilah tentang common fonts di atas, jangan berasumsi bahwa font yang Anda gunakan tersedia untuk semua komputer pengguna. Jika Anda atau klien Anda memang menginginkan penggunakan font yang tidak lazim, Anda bisa menempatkannya pada urutan pertama dalam font-family di stylesheetnya.
Gunakan Similar Fonts pada Konten Sejenis
Jika Anda ingin menggunakan lebih dari satu jenis font pada satu bagian website, misalkan pada badan artikel, ada baiknya jika menggunakan similar fonts seperti pada daftar di atas.
Intermezzo: Anda juga harus memperhatikan keadaan, gunakan jenis font yang sesuai pada tempatnya. Bukan seperti gambar di bawah ini yang merupakan contoh pemilihan font yang tidak sesuai dengan situasi dan kondisi 
Memakai Font yang Legible
Mungkin istilah legibility dan readibility kadang dimaknai sama, karena memang keduanya memiliki arti kata yang sama jika diterjemahkan ke dalam Bahasa Indonesia. Menurut saya pribadi, legibility lebih mengacu pada desain font itu sendiri, yang membuat sebuah karakter mudah dibaca. Sedangkan readibility adalah penempatan atau tata letak keseluruhan pada sebuah website yang membuat bagian berisi teks tersebut mudah dibaca.
Berkaitan dengan legibility, hal-hal berikut mungkin bisa membantu Anda dalam menentukan pemilihan font:
- Gunakan jenis font yang scalable, sekarang (hampir) semua website menggunakan jenis font tersebut misalkan TrueType dan OpenType. Non-scalable font yang sebaiknya dihindari misalnya: Courier, MS Serif dan MS Sans Serif.
- Jenis font Verdana sangat cocok untuk teks berukuran kecil. Pada jenis font lainnya, mungkin terlihat kurang jelas di ukuran kecil di bandingkan Verdana.
- Jenis font serif terlihat kurang jelas pada ukuran dan font-weight yang kecil, kecuali jenis font Georgia baik di Windows maupun Mac masih bisa terbaca dengan baik pada ukuran kecil karena memang didesain untuk penggunaan pada website.
Menggunakan Jenis Font Berbeda untuk Print Media
Hal ini karena resolusi cetak lebih besar dari resolusi layar pada umunya. Untuk keperluan cetak sendiri, jenis font yang digunakan bisa lebih beragam. Pada stylesheet Anda bisa memakai CSS Media Query, sebagai contoh:
@media print { body { font-family:'Times New Roman', Times, serif; } }
Pertimbangkan Variasi Glyph Pada Font
Setiap font memiliki jumlah glyph (karakter) yang beragam. Font Arial (versi lama) misalnya tidak memiliki karakter Euro (€). Hal ini perlu Anda perhatikan karena karakter yang tidak didukung pada sebuah font biasanya ditampilkan dalam bentuk yang aneh. Pada sebuah judul artikel misalnya, Anda bisa memakai font yang memiliki glyph yang lebih sedikit daripada font yang digunakan pada badan artikel tersebut.
Semoga bermanfaat.
Web designer dan front-end developer muda yang belum terlalu jelas dari spesies mana dia berasal. Pada sebuah eksperimen, dia mampu bertahan di dalam air selama 323,007645 detik, dan bisa melayang di udara dengan ketinggian mencapai 15,23 meter. Karena sering berpindah habitat, kini ia memutuskan untuk berada di darat dan menekuni dunia Web Design, HTML5, CSS, dan jQuery.
keren artikelnya.
eh.. denger2.. @suwec (surabaya web community) mau kopdar mbahas ini tgl 17 desember besok. pasti seru tuh, acara..
wow mantab. hadirrrr. pengen memperdalam tentang typography juga, hehe.
woah ternyata typography juga ngejelimet ya..
nice info!! bermanfaat bgt buat saya.
Saat ini saya masih kurang yakin dengan font-embedding, terutama untuk bodycopy. Selain cross browser, font embedding itu juga bermasalah pada kemampuan OS (dan browser) untuk rendering.
Untuk masalah rendering, bisa coba juga property CSS3 text-rendering, tapi ya itu tadi, belum cross browser compatible
bang , saya mau tanya .
klo web buat gambar2 monster kartun itu apa ya .
thanks sbelum nya .
Nice info bang, ijin share ke blog saya ya..
bagus banget artikelnya..