angan 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 ‘magic’ - nya.

Kasus pertama

Kasus kedua

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: selector {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.

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