10 Tips Tipografi untuk kenyamanan membaca

Tipografi adalah seni penataan dan pemilihan huruf. Dalam web tipografi dimaksimalkan untuk memberikan kenyamanan pengunjung dalam membaca. Nah, berikut ini beberapa tips yang bisa diterapkan pada blog kita. Saya ambil dari web favorit saya CatsWhoCode.com

Perbaiki Tinggi Baris (Line Height)

Kesalahan yang sering terjadi pada tipografi banyak web adalah tinggi baris yang kurang tepat. Tinggi baris seharusnya berdasarkan ukuran font. Sebagai panduan, saya biasanya menggunakan 7px dari ukuran font saat men-setting line-height pada CSS. Sedangkan ukuran font-nya antara 12 – 15 px.

body{
    font-size:14px;
    line-height:21px; /* 14px + 7px */
}

Perbaiki Margin Judul

Saat menulis artikel, seringkali kita perlu menambah sub judul. Atau yang sering terlihat adalah di halaman depan blog dimana disana berderet judul2 artikel. Nah, kita harus mengatur agar margin atas judul lebih besar daripada margin bawah.

h2 { margin: 20px 0 10px 0; }

Jangan menggunakan terlalu banyak jenis font

Agar web bisa terbaca dengan nyaman, jangan terlalu banyak menggunakan jenis font. Setidaknya kita menggunakan maksimal 3 jenis font saja. Terlalu banyak jenis font akan membingungkan pembaca. Kita bisa menggunakan 1 jenis font untuk heading, satu jenis untuk teks dan satu lagi untuk subtitle/logo

Gunakan monospace font untuk menampilkan code

Jika kita adalah seorang developer, terkadang kita perlu menampilkan kode-kode HTML, CSS atau PHP di blog. Untuk itu, gunakanlah monoscape font yaitu font yang memiliki ukuran lebar sama di tiap hurufnya. Yang banyak dipakai adalah Courier. Kita juga bisa menggunakan Consolas atau Monaco

Buatlah kontras

Meskipun kita menggunakan huruf2 dan penataan yang keren, tapi kalau warna latar dan teks-nya tidak kontras, maka akan sulit untuk dibaca.

Biarkan garis bawah pada link

Sejak saya menggunakan internet, style default untuk link adalah biru dengan garis bawah. Tapi sekarang warna biru ini banyak diganti dengan warna lain sehingga kita perlu menjaga agar text yang mengandung link tetap memiliki garis bawah untuk membedakannya dengan text biasa.

Buatlah perpustakaan style

Ada cara sederhana tapi efektif untuk membuat web kita seragam yaitu dengan membuat class style dengan nama sesuai dengan fungsinya. Misalnya .warning untuk menampilkan pesan peringatan pada pembaca

Hirarki Judul dan Teks

Untuk meningkatkan kenyamanan membaca, kita perlu konsisten dalam menerapkan penggunaan font dan ukuran baik untuk judul, sub judul dan teks

Jangan takut space putih

Space putih bukanlah space kosong atau space yang tak berguna. Spasi putih baik antara judul dengan teks maupun antara block teks satu dengan yang lain atau antara bagian konten dan sidebar akan menghindari tampilan web kita terkesan semrawut sehingga terlihat profesional. Contohnya web Apple dimana banyak orang menyukainya karena terlihat sederhana, banyak space dan terkesan profesional

Gunakan simbol yang benar

Penggunaan simbol yang tepat, akan mempermudah pembaca memahami tulisan kita. Penggunaan titik, koma bahkan tanda kutip. Sebagai contoh tanda kutip seperti ini:

Dia mengatakan "Halo Bos!"

dan teks yang sama dengan simbol kutipan

Dia mengatakan “Halo Bos!”

Terlihat berbeda bukan? Untungnya bagi pengguna WordPress, WP secara otomatis mengubah petik dobel dengan tanda kutip.