Sentuhan Magis dalam Blog

J

Jangan biarkan tulisan hanya di - intimidasi oleh atribut emosi & ambisi yang berkesan mewah serta modern. Tapi beri ia pijakan yang kuat agar mampu bertahan! Dan biarlah pijakan tersebut bekerja dengan magicnya.

BELAJAR

Saya masih belajar dan tulisan inipun saya dapat dari belajar. Kita semua sama-sama belajar_dalam hal apapun_agar tahu tentang sesuatu. So, tidak perlu ada sebutan "lebih pintar".

"Kita tidak akan tahu 'garam itu asin', jika kita tidak mencobanya."

Saya dan Anda adalah sama. Saya belajar kepada Anda, karena Anda tahu lebih dulu. Sebaliknya, jika saya lebih dulu tahu, mungkin Anda akan belajar kepada saya. Yah, hanya sekedar 'puzzle' kata-kata_sudah 30'15" memikirkannya_yang tidak berarti apa-apa...

Belajar

Saya masih belajar & tulisan inipun saya dapat dari belajar. Kita semua sama - sama belajar — dalam hal apapun — agar tahu tentang sesuatu. So, tidak perlu ada sebutan “lebih pintar”.

Kita tidak akan tahu ‘garam itu asin’, jika kita tidak mencobanya.

Saya & Anda adalah sama. Saya belajar kepada Anda, karena Anda tahu lebih dulu. Sebaliknya, jika saya lebih dulu tahu, mungkin Anda akan belajar kepada saya. Yah, hanya sekedar ‘puzzle’ kata - kata — sudah 30′15″ memikirkannya — yang tidak berarti apa - apa…

Dari kedua kasus bacaan di atas, “mana yang Anda sukai?” Mungkin rata - rata Narablog menyukai bacaan yang kedua, karena lebih legibility & readability (keterbacaan). Selanjutnya, pokok bahasan tulisan ini dibatasi hanya untuk membicarakan dua kasus tersebut.

Analisa Kasus

Dua kasus tulisan di atas sama - sama menggunakan keluarga font ‘Serif’ (font-family:Georgia,Serif;) & ukuran font sebesar 16 pixels (font-size:16px;). Panjang baris yang digunakan berkisar antara 52 – 78 karakter termasuk spasi, atau 2 – 3 alfabet yang disusun secara mendatar (1 alfabet=26 huruf). Selanjutnya, untuk mengerucutkan masalah dalam analisa, mungkin kita lebih menyoroti salah satu kasus. Yah, anggap saja kasus pertama merupakan problematika yang patut kita bicarakan.

Titik sensitif problematika yang terdapat pada kasus pertama, antara lain :

  • Pemilihan warna font yang kurang ‘matching’ dengan warna latar, sehingga tulisan pun kurang terbaca dengan jelas.
  • Gaya penulisan rata kanan & rata kiri (text-align:justify;), menyebabkan kurangnya “konsistensi kontrol” per kata. Hal tersebut dapat kita temui pada lebarnya ‘white space’ (ruang kosong), antara kata yang satu dengan kata berikutnya dalam setiap baris tulisan.
  • Jarak vertikal antar baris terlalu rapat, sehingga kita harus memicingkan mata untuk membaca tulisan tersebut.
  • Penggunaan tanda baca yang kurang tepat.
  • Judul kasus “Belajar” ditulis secara manual dengan huruf kapital.

Alternatif Pemecahan

Mudah - mudahan Narablog setuju bahwa salah satu alternatif pemecahan kasus pertama adalah pada kasus kedua. :)

Menurut Harry Roberts, “panjang baris yang ideal untuk legibility berkisar antara 2 – 3 alfabet, atau 52 – 78 karakter termasuk spasi ”. Sedangkan Oliver Reichenstein berpendapat, “panjang baris yang optimal adalah 10 – 15 kata, & untuk liquid layout dengan ukuran font 100%, maka dibutuhkan lebar kolom sebesar 50% (layar windows)”.

Liquid layout merupakan tata letak yang berdasarkan persentase dari ukuran jendela browser.”

(Definition: Liquid Layout)

Pemilihan warna font (font-color) seharusnya kontras dengan warna latar (background). Background gelap; font-color cerah, begitu pula sebaliknya. Kemudian, gaya perataan tulisan sebaiknya menggunakan “rata kiri” (text-align:left;) untuk menjaga konsistensi per kata & jarak “ruang kosong” yang ideal dalam setiap baris.

Pengaturan jarak vertikal antar baris (ritme vertical) seharusnya menjadi salah satu titik penting untuk meningkatkan kenyamanan dalam membaca suatu tulisan. Hal ini dapat dilakukan dengan menambahkan atribut line-height, yang besarnya disesuaikan dengan ukuran font. Umumnya, pengaturan ini disertai pula dengan pengaturan jarak antar paragraf — paragraf 1, 2, 3,… — yang ber - atribut margin-bottom.

“If you have a 24px baseline, all your line-heights and margin-bottoms must be in multiples of 24. So a font-size of 16px would need a line-height of 1.5em and a margin-bottom of 24px.”

Harry Roberts1

Secara matematis, mungkin rekomendasi dari Harry Roberts dapat ditulis demikian: font-size:16px; = line-height:1.5em; + margin-bottom:24px;. Artinya font yang berukuran 16 pixels membutuhkan tinggi sebesar 1.5 ems & batas bawah antar paragraf sebesar 24 pixels. Perhatikan juga jarak antar huruf — jika masih kelihatan rapat — kita dapat menambahkan atribut letter-spacing secukupnya. Selain itu, Anda pun bisa menentukan sendiri, besaran (font-size, line-height, & margin) yang sesuai dengan karakter blog Anda.

Alangkah lebih baik, kalau kita selalu memperhatikan tanda baca dalam tulisan kita, sehingga “setiap orang” mampu memaknai tulisan — intonasi, jeda, & sebagainya — sesuai dengan pengamatannya sewaktu pembacaan. Mengenai tanda baca lebih lanjut, Anda dapat mengunjungi sebuah artikel menarik, yang diberi titleTanda Baca” oleh Ardianzzz.

Akhirnya kita sampai di penghujung alternatif, yakni huruf kapital yang ditulis secara manual. Jika kita ingin menulis kata atau beberapa kata dengan huruf kapital, sebaiknya menggunakan CSS untuk mengubahnya, contoh: {text-transform:uppercase;}. Hal ini tidak berlaku untuk kata - kata yang pada dasarnya memang ditulis dengan huruf kapital, seperti: RI, DPR, PBB, & lain - lain.

Itulah sedikit dari sekian banyak sentuhan magic — CSS & HTML — yang mungkin dapat lebih menata tulisan kita untuk menciptakan kesan tertentu, sehingga pembaca mendapatkan kenyamanan membaca semaksimal mungkin. Mungkinkah ini sebagian kecil dari “Tipografi”?

Sumber Tulisan

Berikut beberapa sumber bacaan yang mungkin dapat menambah wawasan & pengetahuan serta bahan koreksi, atas kesalah – tafsiran penulis dalam menerbitkan posting ini.

  1. Typography quick tips (Harry Roberts of CSS Wizardry)
  2. Quick Tips-A series of quick development tips (Harry Roberts of CSS Wizardry)
  3. Tipografi (Wikipedia)
  4. The 100% Easy – 2 – Read Standard (Information Architects)
  5. Five simple steps to better typography (Mark Boulton)
  6. Tipografi (Ardianzzz)

47 komentar untuk “Sentuhan Magis dalam Blog”

  1. thanks gan tas informasi nya sya lebih suka bacaan yg ke 2 jls,
    thanks gan menambah wawasan ya...salam kenal y

    BalasHapus
  2. thanks y gan for infonya y sya juga stuju ma bancan yg ke 2 jlasz,thanks y for info n article nya

    BalasHapus
  3. wah info yang bagus dan berbobot...

    ngomong2 templatenya sudah ganti ya om ?
    sekarang full pokok bahasan tanpa sidebar atau pernik2 lainnya ya...

    BalasHapus
  4. @Blog Kota Batik :
    Betul, gan. Mau coba tampil minimalis, walaupun belum bisa dikatakan minimalism.
    Dulu “blogging penuh widget”; sekarang diusahakan agar “blogging penuh typo”.

    BalasHapus
  5. Ini templatenya apa ya, terus cara buat home, daftar isi kaya disamping itu gimana

    BalasHapus
  6. @A. Mulky Asy'arie :
    Sorry, gan. Templatenya lagi diobrak - abrik ini, alias belum jadi.
    Mengenai navigasi image di samping, panjang ceritanya kalau diceritakan, gan.

    BalasHapus
  7. @OB
    Sipp, kalau sudah jadi kabari ya

    BalasHapus
  8. Ga cuma isi, tulisan biasa pun kalo tata letaknya bagus juga pasti enak dibaca

    BalasHapus
  9. saya coba tata lagi deh punya saya...
    rasanya sih kacau... hehehe

    BalasHapus
  10. trik ini memang sangat dibutuhkan hampir di seluruh postingan blog kita agar nantinya pengunjung kita semakin betah membaca terkait postingan kita. Seperti pada contoh yg kedua tersebut di atas

    BalasHapus
  11. blognya bagus baget aq suka,,,,,, http://www.inimun.co.cc

    BalasHapus
  12. well, it's so Good!
    memang pengaturan tampilan tulisan menjadi sangat penting untuk membuat pengunjung semakin nyaman dalam membaca setiap tulisan dalam postingan blog kita. trims udah berbagi. :)

    BalasHapus
  13. oke thanks ats infonya,,, cukup bermanfaat dan memberi inspirasi buat blog saya biar lebih nyaman di baca pengunjung....

    BalasHapus
  14. tips yang bagus nich,,, memang betul banget tulisan dalam blog sangat penting biar pembaca betah membacanya...

    BalasHapus
  15. hmmm tips dan trik yang cukup bermanfaat nich....
    thanks ya..

    BalasHapus
  16. wahhh lumayan nich jadi menambah pengetahuan tentang blog....
    makasih ya atas infonya

    BalasHapus
  17. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

    BalasHapus
  18. Terima Kasih, Tulisan yang sangat membantu. Salam Sukses!

    BalasHapus
  19. Terima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba

    BalasHapus
  20. aku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu

    BalasHapus
  21. Setelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses

    BalasHapus
  22. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  23. cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  24. Tulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.

    BalasHapus
  25. Tips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses

    BalasHapus
  26. Amazing artikel, Infonya bagus banyak mengandung Tips dan Pesan yang bermutu. salam sukses

    BalasHapus
  27. Ilmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses

    BalasHapus
  28. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu
    setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  29. Saat membaca Artikel dan Tipsnya yang benar benar menarik. Jadi ingin mencoba. Salam sukses selalu

    BalasHapus
  30. Ide cemerlang saya dapat dari Artikel yang di buat di Wibesite ini, Wajib dicoba Tipsnya. Semoga berhasil

    BalasHapus
  31. Wibesite yang menarik di dalamnya banyak Artikel dan Tips yang mengandung Ilmu Pengetahuan, Harus dicoba.Terimakasih

    BalasHapus
  32. Saya senang membaca Info dan Artikel yang di buat di Wibesite ini. Patut dicoba. Salam Sukses selalu.

    BalasHapus
  33. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  34. Wibesite yang sangat Amazing, Artikel dan Tipsnya boleh dicoba. Semangat !!

    BalasHapus
  35. terima kasih atas info nya pak, sangat informatif boleh di coba.

    BalasHapus
  36. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. terimaksih

    BalasHapus
  37. Artikel yang bermanfaat dan berguna, wajib di coba. sukses selalu

    BalasHapus
  38. Ilmu yang sangat Hebat, boleh dicoba Artikel dan Tipsnya. Semoga berhasil

    BalasHapus
  39. Artikel yang benar benar sangat infomantif dan Kreatif. boleh dicoba, sukses selalu

    BalasHapus
  40. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  41. Baru kali ini saya membaca Artikel yang sangat membangun. Boleh dicoba

    BalasHapus
  42. Terimaksih untuk Info yang sangat Amazing, boleh dicoba.

    BalasHapus
  43. Sangat Amazing Artikel dan Info. Wajib di coba.

    BalasHapus
  44. Sebanyak saya membaca Artikel,baru kali ini saya menemukan Artikel yang Amazing. boleh di coba. Terimaksih

    BalasHapus
  45. artikelnya bagus mas. saya tadi hanya mengambil

    BalasHapus
  46. info yang menarik untuk postingan blog

    BalasHapus