Tipografi Untuk Blog

aat 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...

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.

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

Kesimpulan

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 pengetahuan 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.....

Mengenali Helvetica dan Arial

Seperti yang kita ketahui, font Helvetica & Arial adalah tipe sans-serif yang sangat populer digunakan. Keduanya memiliki bentuk karakter yang sangat mirip bahkan dapat dikatakan sama. Akan tetapi, Helvetica & Arial adalah font yang berbeda. Helvetica didesain oleh Max Miedinger pada tahun 1957 ―nama Helvetica berarti Swiss(dalam bahasa latin). Sedangkan Arial dibuat pada tahun 1982 oleh Robin Nicholas & Patricia Saunders.

Meskipun keduanya memiliki bentuk yang identik, tetapi masih terdapat perbedaaan pada beberapa karakter. Jika kita lihat dengan seksama, maka dapat kita jumpai perbedaan yang mencolok pada karakter a, f, r, t(lowercase) dan C, G, Q, R(Uppercase).

Untuk lebih jelasnya dapat dilihat pada gambar berikut ini:

Mungkin perbedaan tersebut sangat kecil dan tidak begitu berarti. Tetapi bagi yang suka dengan detil pasti tidak ingin berbuat kesalahan dengan menulis "I Love Helvetica" Menggunakan Arial.

Referensi

1. Arial Versus Helvetica ― ilovetypography


2. How To Spot Arial ― ms-studio

Sedikit Sentuhan Pada Ampersand

Ampersand (&) adalah logogram yang mewakili kata "dan". Simbol ini merupakan ligature dari kata et, bahasa latin untuk "dan".
―Wikipedia

Selama ini, dalam membuat tulisan —pada blog— adakalanya kita kurang memperhatikan penggunaan ampersand. Selain karena tidak selalu digunakan, mungkin karena kita lebih suka/familiar dengan menulis kata "dan" daripada menulis kode ampersand (&). Padahal, kita dapat melakukan improvisasi pada desain tipografi hanya dengan mengubah style ampersand standar menggunakan sedikit trik CSS.

Salah satu metode sederhana untuk mengubah gaya ampersand menjadi terkesan lebih artistik adalah dengan menggunakan CSS. Pertama-tama, masukkan kode CSS berikut ini:

span.amp {

   font-family:Baskerville, Baskerville BT, "Goudy Old Style","Palatino","Book Antiqua",serif;



   font-size:110%;

   font-style:italic;

}

Berikut ini adalah kode contoh untuk penggunaan ampersand pada paragraf.

<p>Tips <span class="amp">&amp;</span> Trik</p>

Maka, akan tampak seperti ini

Tips & Trik

Dapat kita saksikan bahwa ampersand standar telah diubah dengan gaya yang lebih artistik —Contoh di atas ditulis dengan font berukuran 35px agar lebih jelas.

Bagi pengguna Wordpress mungkin akan lebih mudah karena telah tersedia plugin semacam wp Typography. Sedangkan untuk pengguna Textpattern terdapat plugin sejenis yaitu Typogrify Textpattern Plugin

Saya sangat menyukai trik ini. Meskipun hanya mengubah style pada satu karakter saja, tetapi memberikan nilai tambah pada estetika tulisan. Saya rasa, tidak ada salahnya anda juga mencoba.

Bacaan yang dianjurkan

1. Ampersand ―Wikipedia


2. SimpleBits / Use the Best Available Ampersand


3. Sunday type: ampersand type