Tipografi Untuk Blog

Sekarang ini banyak sekali website terutama blog yang mengandalkan tipografi sebagai desain utama. Hal ini dapat dijumpai pada blog-blog dengan template yang relatif sederhana yang sekarang lagi trend di era web2.0. Terdapat beberapa teori tentang penggunaan tipografi dalam dunia web desain mulai dari penggunaan font, ukuran font, warna font, spasi, dan lain-lain yang tujuannya antara lain agar pengunjung merasa nyaman saat membaca konten atau dengan kata lain menjadi lebih enak dibaca.

Mungkin selama ini kita kurang memperhatikan hal tersebut, Pengalaman saya sendiri saat saya blogwalking di beberapa blog (yang umumnya menggunakan template buatan sendiri) masih kurang memperhatikan masalah tipografi ini. Coba kita bayangkan, membaca tulisan berwarna biru tua (#0000EE) dengan background berwarna hitam (#000) dengan font Tahoma berukuran 12 pixel, Kalau saya pribadi jelas malas membacanya karena membuat mata sakit.

Lorem Ipsum Dolar Sit Amet...

Coba bandingkan saat kita membaca tulisan dengan warna latar yang cukup kontras dengan warna font (biasanya latar berwarna cerah) dengan ukuran font antara 12-14 pixel, dengan letter space yang tidak terlalu renggang dan tidak terlalu rapat, pasti kita akan lebih betah membaca artikel dalam blog tersebut. Imbasnya, komentar ngawur bernada spam bisa berkurang. Hal ini pula yang (menurut saya) template-template blog yang minimalis semacam Simpla, BlogTXT, white as milk, dll. bisa menjadi template yang terkenal dan terkesan professional. Kita tahu bahwa template-template tersebut tidak mengandalkan gambar-gambar dan hanya mengandalkan desain berbasis web tipografi.

Lorem Ipsum Dolar Sit Amet...

Sekarang saatnya berbicara statistik, menurut smashingmagazine.com terdapat beberapa poin penting dalam web design typography antara lain adalah:

1. Font yang digunakan
2. Background yang digunakan dan warna font
3. Ukuran font
4. Spasi atar baris (line height)

Berikut ini adalah data statistik yang diperoleh yaitu:

1. Font yang digunakan

• 60% website menggunakan sans-serif (font tidak berkaki) untuk headline semacam Arial, Verdana, Lucida Grande, dan Helvetica.
• Hanya 34% website menggunakan font tipe serif sebagai font konten
• Font tipe serif yang paling populer untuk headline adalah georgia (28%) dan Baskerville (4%) (blog ini menggunakan Georgia)
• Font tipe serif yang paling populer untuk konten adalah georgia (32%) dan Times New Roman (4%)
• Font tipe sans-serif yang paling populer untuk headline adalah Arial (28%) Helvetica (20%) and Verdana (8%).
• Font tipe sans-serif yang paling populer untuk konten adalah Arial (28%), Verdana (20%) and Lucida Grande (10%). (blog ini menggunakan Georgia)

2. Background yang digunakan

Kita dapat menggunakan backround berwarna terang atau gelap. Sebagian besar website dengan konten tulisan akan memilih warna terang dengan tulisan berwarna gelap. Beberapa website memilih backround gelap kemungkinan karena alasan konten yang ditampilkan. (misal: postsecret). Yang perlu diperhatikan adalah jangan sampai warna background menyebabkan tulisan susah untuk dibaca. Contohnya adalah menggunakan warna hitam(#000) untuk background dan warna abu-abau (#222) untuk font. Hal ini jelas membuat tulisan sukar dibaca. Selain itu hindarilah kontras yang berlebih. Misalnya font berwarna hitam aseli (#000) dipadu dengan background putih alami (#FFF) hal ini juga kurang baik. Banyak desainer yang memilih menurunkan kontras antara background dengan kontent. Misalnya menggunakan background putih (#FFF) dan font abu-abu (#222, #333, #444 dll).


3. Ukuran font rata-rata

Beberapa ukuran yang populer digunakan unutk headline berkisar antara 18 hingga 29 pixel, dengan 18-20px dan 24-26px adalah yang paling populer.
Ukuran yang sering digunakan untuk font konten berkisar antara 12-14 pixel. yang paling populer (38%) adalah ukuran 13px.

Terdapat beberapa studi yang menyebutkan bahwa perbandingan antara font hedline dan font body (konten) merupakan hal yang perlu diperhatikan. Perbandingan raa-rata yang baik untuk digunakan adalah antara ukuran headline dan konten adalah 1.96. Karena saya menggunakan pixel (bukan ems) dalam satuan ukuran, maka saya mengasumsikan perbandingannya adalah 2.

4. Spasi antar baris (line-height)

• Perbandingan line height ÷ ukuran fon konten =1.48/1.5
• line length (pixels) ÷ line height (pixels) = 27.8
• Spasi anttar paragraf ÷ line height (pixels) = 0.754
• space between paragraphs (pixels) ÷ line height (pixels) = 0.754

Begitulah kira-kira beberapa aturan yang biasa diterapkan dalam membuat desain web berbasis tipografi. Saya rasa informasi ini masih sangat terbatas dan saya sarankan anda untuk mencari lebih banyak informasi tentang tipografi dan desain web (blog) agar perkembangan dunia blog di Indonesia tidak tertinggal dengan negara lain. Sekedar masukan dari saya, perlu kita ingat bahwa blog adalah sesuatu yang unik yang (bisa dikatakan) merepresentasikan pemiliknya baik dari desain maupun konten yang terdapat di dalamnya. Kita mungkin dapat dengan mudah membedakan blog milik orang yang menyukai musik rock dan blog milik seorang penggila dangdut. Karena itu berkreasilah dengan bebas untuk mengekspresikan diri melalui blog. Saya menampilkan data di atas hanya sekedar ingin berbagi ilmu pengetahuna tentang dunia web desain dan tidak berarti saya menganggap blog yang bagus adalah yang mengikuti 'pakem' tersebut. Dan jika ada masukan yang membangun akan saya terima dengan senang hati.....

Gambar header diambil dari speckyboy.com