Tipografi atau seni tata huruf merupakan salah satu hal penting dalam sebuah disain web. Tipografi yang baik dapat menambah keindahan disain dan kenyamanan dalam membaca, sebaliknya tipografi yang buruk bisa mengakibatkan pembaca frustasi dalam membaca setiap baris kalimat dalam sebuah tulisan, seberapa baikpun tulisan tersebut. Tipografi yang baik memperhatikan kombinasi antara warna, ukuran dan tipe huruf atau font, lebar spasi, kontras, dan sebagainya yang tentunya harus memenuhi tuntutan pembaca blog kita yang mengutamakan kenyamanan dan kemudahan dalam membaca. Pada artikel ini saya sedikit membahas bagaimana mendisain tipografi web secara teknis, dan lebih fokus pada tipografi sebagai sebuah seni. Ya, tipografi pada asalnya merupakan sebuah seni, bukanlah sekedar cara mengatur tata letak huruf saja.
Beberapa petunjuk dalam mendisain tipografi yang indah sudah banyak ditulis oleh banyak disainer, dan saya merangkum beberapa inti dalam petunjuk dasar mendisain tipografi web ↓
Panjang
Sebuah baris kalimat paling tidak memiliki maksimal 15 sampai 20 kata supaya nyaman dibaca. Yang mempengaruhinya tentu saja lebar dari area konten itu sendiri. Lebar konten bisa diatur menggunakan property CSS width.
Spasi
Disain tipografi yang baik memiliki spasi atau jarak antar kalimat yang cukup longgar yang memudahan pembaca melanjutkan bacaannya baris demi baris. Pengaturan tinggi spasi antar baris diatur dalam CSS menggunakan property line-height, misalnya p { line-height: 140%; }.
Ukuran
Ukuran huruf sangat mempengaruhi kemudahan pembacaan, dan ini juga berhubungan erat dengan ukuran spasi antar baris seperti poin no. 2 di atas. Salah satu contoh bagus misalnya font berukuran 12px dengan ukuran antar spasi 13px. Usahakan menggunakan ukuran font yang besar (yang memungkinkan) dan hindari ukuran di bawah 10px atau 12px.
Kontras
Memilih kombinasi warna huruf dengan warna latar yang pas untuk kemudahan pembacaan. Perlu diperhatikan bahwa warna teks harus cukup kontras dengan warna yang melatarbelakanginya. Kebanyakan disainer menggunakan warna teks yang gelap dan dipadukan dengan warna latar yang terang.
Hirarki
Yang dimaksud hirarki di sini adalah pemilihan ukuran huruf yang variatif untuk membedakan dan memperjelas masing-masing elemen website, misalnya header, judul, post meta data, dan sebagainya. Selain ukuran huruf, hirarki juga dapat diterapkan menggunakan style atau dekorasi teks yang berbeda-beda, misalnya huruf kapital (all-caps) atau miring (italic) misalnya untuk membedakan sub-header dengan konten. Pemilihan font yang berbeda juga merupakan salah satu cara yang tepat untuk itu (lebih baik tidak menggunakan lebih dari tiga tipe font).
Font
Selalu gunakan jenis font yang cross-platform (Windows®, Mac OS®, dan Linux). Mungkin hal ini kadang-kadang diabaikan dalam pendisainan tipografi. Jangan pernah gunakan font-font yang tidak lazim digunakan di web seperti Comic Sans pada blog anda 
Atur tampilan font yang digunakan melalui property CSS font, font-family, font-variant, dan lainnya.
Keenam penjelasan di atas ↑ bukan merupakan aturan-aturan melainkan sekedar petunjuk. Bagaimanapun juga, ukuran, panjang baris, font, spasi, warna, dan kontras merupakan beberapa hal yang wajib dipatuhi dalam tipografi. Tipografi sesungguhnya merupakan seni, jadi pemilihan dan pengaturan tatanan huruf dengan menggunakan petunjuk di atas boleh jadi masih bersifat subyektif. Ada metode atau tips lain yang ingin ditambahkan melalui komentar?
Wah klo saya mlah ndak ngrus2 sampek se detail itu mas, ckup pakek yg standar aja
saya termasuk ngurusi yg detil2 gitu
ndak suka ama keluarga times new roman
brasa baca surat resmi aja hehehehe
dan apalagi hurup yg segede gaban
waaaa
yang seimbang aja kombinasinya
Iya.. setuju banget sama poin2 di atas. Kadang juga kita harus memperhatikan background yang menggunakan images, perlu diperhitungkan apakah blog kita dapat dibaca jika pengunjung kita mematikan images di browsernya
wah kebetulan nih mas fanari
aku lagi belajar bikin themes
thanks infonya
Makasih atas infonya, kebetulan lagi belajar buat blog yang baik juga neh Arigato thankyou
blog saya masuk kritria di atas ndak yah?
@badoer: yang penting bagus tipografinya
@cebong ipiet: sama, saya juga ndak suka sama times new roman
@ipung: iya mas, lebih baik backgroundnya pakai CSS
@izandi: sama2, selamat bikin themes
@Frenk’Q Cupu:
@ick: blognya mas sudah cukup bagus tipografinya, kan bikinan desing disease yg terkenal itu
wah saya harus banyak belajar lagi nih mas
hi hi hi wah saya harus banyak belajar nih
trus mengenai pemilihan font untuk tulisan di header dll ada ga mas? itu masuk tipografi ga mas? caranya tau font yang cross-platform gimana yaah? thank u…
@audy: ya tinggal cek aja blog mbak audy pake OS yang berbeda (Windows, Mac, Linux), kalau tampilan font-nya sama semua berarti ketiga OS support font yang dipakai di blog
beuh, kirain ga’ ada pedomannya.
thanks atas infonya yah mas
Wah, betul mas dengan tipography yang bagus blog kita jadi enak dibaca dan itu membuat kita semakin rame apalagi didukung dengan artikel yang berbobot
saya banyak blajar dari blog ini…
Yup! knyamanan pmbaca sngt prlu dprhtikan spaya pmbaca mnjadi ‘betah’
seep… aku cek blog ku dulu ah… pake apa.. belum aku utek2 ukuran hurufnya.. trims bos..
haduh berarti saya salah tangkap donk. saya kira tipo itu selalu jelek malah.
makasi dikasi tau info tipografi
mirip seni menulis indah kaligrafi..
O ya, untuk yang keenam bisa nggak kalo fontnya disertakan kedalam? jadinya nggak ngikut browser dan komputer…
oh sepenting itu y tipografi dalam dunia blog? saya yg di bidang grafika justru g perhatiin tata letak dan huruf blog saya…
@budi: sama2 semoga bermanfaat
@Paman Gober: tipografi, salah satu hal yg sering dilupakan
@Ardy Pratama: terima kasih banyak
@aha: sama2 bos
@yudi: kalau typo beda lagi mas, artinya salah tulis
@masarif: wah saya juga mikir begitu, tapi saya belum nemiun caranya buat nyertain font ke dalam theme
@blogdanseo: iya mas, penting sekali seperti kata para web designer
Saya paling suka ama tipography nya theme defaultnya wordpress… hurufnya enak di pandang mata. IMHO.
Thanks infonya
Salam kenal m(_ _)m
Suatu ulasan yang sangat bagus
aku suka arial…
yang penting tulisan enak di baca,font nya jelas desain nya gak mbikin mata ngucek2
harus pake tipografi segala ya?? wah aku gimana
makasih infonya, mantaf…
Wah sampe merhatiin kayak gitu
thx infonya,, sy lagi belajar css jg nih
Setuju dengan Mas Fanari, faktor tipografi ini merupakan hal yg paling saya perhatikan pada saat memilih template untuk blog saya yg berplatform Blogger. Beberapa kali mesti gonta-ganti karena meski desainnya sudah bagus, tapi font ataupun spasinya kurang, dst. Soalnya ini pengaruh sih sama pengunjung. Iya kan?
wah mantep banget tipsnya, blog ku kira2 sudah memenuhi kriteria tidak yah??
keren mas, ini juga pemilihan fontnya bagus
btw penggemar steve vai?
Banyak juga tips nya ya…
yup setuju, orang juga males klo blog itu postingnnya sampe berbaris-baris panjangnya.
@Anang: aku suka georgia
@Ecko:tipografi bisa diatur juga pada bagian CSS pada template Blogger
@preme: wah ini ada gitaris yg mampir ke sini nih
hehe sebenernya saya penggemar berat joe satriani, kalau Steve Vai nggak terlalu berat sih.
Tapi saya paling suka nonton aksi panggungnya Steve Vai, soalnya menurut saya dia lebih keren daripada mbah Joe
susah deh…blog saya yang ini masih numpang…jadi gak bisa ngatur ini itu…
Senangnya jika bisa bikin theme sendiri, selama ini hanya bisa ngedit2 saja tanpa bisa berkreasi. Memng betul sekali, unsur estitka (halah istilah apaan ini) diperlukan dalam sebuah website. Orang cenderung lebih menikmati membaca artikel jika komposisi warna dan font bagus. Terlalu banyak image yang menyebabkan berat juga harus dihindari! Tapi belajar css cukup rumit juga mengingat kompabilitas browser yang digunakan
Makasih banget infonya. Memang enak kalo baca sebuah blog pengaturan hurufnya kayak yang Mas bilang. Kan isinya blok umumnya >80 % adalah tulisan.
Pingback: Estetika Menulis - 8 Kesalahan Yang Sering Ditemui Pada Blog Lokal | Fanari dash Id dot Com | Going to Become a CSS Artist
utk layout yg fleksibel/fluid gemana ya baiknya ukuran lebar ruang kontennya terkait jumlah baris kalimat??
kl jenis huruf utk web, cmiiw..ktnya yg sans-serif lbh terbaca dibanding serif ya
kl utk kontras, saya pake ekstensi colour contrast analyser-nya peramban fx (firefox)
Pingback: Solusi Tipografi dengan Metode Alternatif sIFR dan FLIR | Fanari dash Id dot Com
setuju setuju.. emang bikin mata nyaman kalo udah seperti ini, pengunjung juga bakalan betah … kayak saya neh betah deh di sini…
saya juga suka georgia
i love typography too..
boleh juga…..!?!?!?!?!?!?