Sentuhan Magis dalam Blog

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 Roberts¹

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 title “Tanda 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)