6 Pedoman Tipografi Blog

Web Typography

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 :D 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?

Instant Internet Business Ideas

Related Posts ↓

Rahasia Sukses Paid Review

{43 Comments so far }

  1. badoer said,

    Wrote on November 3, 2008 @ 3:13 pm

    Wah klo saya mlah ndak ngrus2 sampek se detail itu mas, ckup pakek yg standar aja

  2. cebong ipiet said,

    Wrote on November 3, 2008 @ 5:57 pm

    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

  3. ipung said,

    Wrote on November 3, 2008 @ 6:53 pm

    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 :D

  4. izandi said,

    Wrote on November 4, 2008 @ 9:18 am

    wah kebetulan nih mas fanari
    aku lagi belajar bikin themes
    thanks infonya :D

  5. Frenk'Q Cupu said,

    Wrote on November 5, 2008 @ 12:37 pm

    Makasih atas infonya, kebetulan lagi belajar buat blog yang baik juga neh Arigato thankyou

  6. ick said,

    Wrote on November 5, 2008 @ 3:06 pm

    blog saya masuk kritria di atas ndak yah?

  7. fanari said,

    Wrote on November 5, 2008 @ 8:45 pm

    @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 :)

  8. harianku said,

    Wrote on November 6, 2008 @ 11:36 am

    wah saya harus banyak belajar lagi nih mas :)

  9. iwan said,

    Wrote on November 6, 2008 @ 4:11 pm

    hi hi hi wah saya harus banyak belajar nih

  10. audy said,

    Wrote on November 6, 2008 @ 7:27 pm

    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…

  11. fanari said,

    Wrote on November 6, 2008 @ 9:59 pm

    @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

  12. budi said,

    Wrote on November 7, 2008 @ 12:10 am

    beuh, kirain ga’ ada pedomannya.

    thanks atas infonya yah mas

  13. Paman Gober said,

    Wrote on November 7, 2008 @ 12:38 am

    Wah, betul mas dengan tipography yang bagus blog kita jadi enak dibaca dan itu membuat kita semakin rame apalagi didukung dengan artikel yang berbobot

  14. Ardy Pratama said,

    Wrote on November 7, 2008 @ 3:42 am

    saya banyak blajar dari blog ini…

    Yup! knyamanan pmbaca sngt prlu dprhtikan spaya pmbaca mnjadi ‘betah’

  15. aha said,

    Wrote on November 7, 2008 @ 8:37 am

    seep… aku cek blog ku dulu ah… pake apa.. belum aku utek2 ukuran hurufnya.. trims bos..

  16. yudi said,

    Wrote on November 7, 2008 @ 8:46 am

    haduh berarti saya salah tangkap donk. saya kira tipo itu selalu jelek malah.
    makasi dikasi tau info tipografi :-D

  17. masarif said,

    Wrote on November 7, 2008 @ 10:19 am

    mirip seni menulis indah kaligrafi..

    O ya, untuk yang keenam bisa nggak kalo fontnya disertakan kedalam? jadinya nggak ngikut browser dan komputer…

  18. blogdanseo said,

    Wrote on November 7, 2008 @ 4:29 pm

    oh sepenting itu y tipografi dalam dunia blog? saya yg di bidang grafika justru g perhatiin tata letak dan huruf blog saya…

  19. fanari said,

    Wrote on November 7, 2008 @ 4:30 pm

    @budi: sama2 semoga bermanfaat ;)
    @Paman Gober: tipografi, salah satu hal yg sering dilupakan :D
    @Ardy Pratama: terima kasih banyak :)
    @aha: sama2 bos :D
    @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

  20. kipas said,

    Wrote on November 7, 2008 @ 5:15 pm

    Saya paling suka ama tipography nya theme defaultnya wordpress… hurufnya enak di pandang mata. IMHO.

  21. didta said,

    Wrote on November 7, 2008 @ 6:10 pm

    Thanks infonya
    Salam kenal m(_ _)m

  22. love-ely said,

    Wrote on November 7, 2008 @ 7:27 pm

    Suatu ulasan yang sangat bagus

  23. Anang said,

    Wrote on November 7, 2008 @ 9:09 pm

    aku suka arial…

  24. thevemo said,

    Wrote on November 7, 2008 @ 9:09 pm

    yang penting tulisan enak di baca,font nya jelas desain nya gak mbikin mata ngucek2

  25. albri said,

    Wrote on November 7, 2008 @ 11:48 pm

    harus pake tipografi segala ya?? wah aku gimana

  26. Reza Fauzi said,

    Wrote on November 8, 2008 @ 7:56 am

    makasih infonya, mantaf…

  27. ariwolu said,

    Wrote on November 8, 2008 @ 12:26 pm

    Wah sampe merhatiin kayak gitu

  28. emfajar said,

    Wrote on November 8, 2008 @ 12:29 pm

    thx infonya,, sy lagi belajar css jg nih :)

  29. Ecko said,

    Wrote on November 8, 2008 @ 6:58 pm

    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?

  30. septian said,

    Wrote on November 8, 2008 @ 8:28 pm

    wah mantep banget tipsnya, blog ku kira2 sudah memenuhi kriteria tidak yah??

  31. preme said,

    Wrote on November 9, 2008 @ 6:13 am

    keren mas, ini juga pemilihan fontnya bagus
    btw penggemar steve vai?

  32. Vandy said,

    Wrote on November 9, 2008 @ 3:05 pm

    Banyak juga tips nya ya…

  33. ario saja said,

    Wrote on November 9, 2008 @ 5:09 pm

    yup setuju, orang juga males klo blog itu postingnnya sampe berbaris-baris panjangnya.

  34. fanari said,

    Wrote on November 10, 2008 @ 12:36 pm

    @Anang: aku suka georgia :D
    @Ecko:tipografi bisa diatur juga pada bagian CSS pada template Blogger
    @preme: wah ini ada gitaris yg mampir ke sini nih :D
    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 :lol:

  35. suamimalas said,

    Wrote on November 10, 2008 @ 1:37 pm

    susah deh…blog saya yang ini masih numpang…jadi gak bisa ngatur ini itu…

  36. @del said,

    Wrote on November 11, 2008 @ 6:44 pm

    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 :(

  37. yafeth said,

    Wrote on December 3, 2008 @ 10:06 am

    Makasih banget infonya. Memang enak kalo baca sebuah blog pengaturan hurufnya kayak yang Mas bilang. Kan isinya blok umumnya >80 % adalah tulisan.

  38. Estetika Menulis - 8 Kesalahan Yang Sering Ditemui Pada Blog Lokal | Fanari dash Id dot Com | Going to Become a CSS Artist said,

    Wrote on December 5, 2008 @ 5:09 pm

    [...] Yang saya maksud di sini erat sekali hubungannya dengan estetika atau keindahan tulisan dan seni tipografi (seperti yang pernah saya tulis [...]

  39. dani said,

    Wrote on December 20, 2008 @ 8:32 am

    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) :)

  40. Solusi Tipografi dengan Metode Alternatif sIFR dan FLIR | Fanari dash Id dot Com said,

    Wrote on April 22, 2009 @ 11:03 am

    [...] menggunakan CSS untuk mengatur tipografi web, metode alternatif lain yang ditawarkan adalah dengan menggunakan sIFR dan FLIR. Kedua-duanya [...]

  41. idotkontji said,

    Wrote on April 25, 2009 @ 12:16 pm

    setuju setuju.. emang bikin mata nyaman kalo udah seperti ini, pengunjung juga bakalan betah … kayak saya neh betah deh di sini…

  42. OI Web Designer said,

    Wrote on May 8, 2009 @ 5:07 am

    saya juga suka georgia
    i love typography too.. :-)

  43. top bgt said,

    Wrote on December 1, 2009 @ 4:46 pm

    boleh juga…..!?!?!?!?!?!?

Comment RSS · TrackBack URI

Leave a Comment ↓

Name

E-mail

Website