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.

Dicari dengan kata kunci:

tipografi,tipografi adalah,belajar tipografi,tips tipografi,typografi,tipografi yang baik,cara membuat tipografi,belajar typografi,makalah tipografi,typografi adalah

49 thoughts on “10 Tips Tipografi untuk kenyamanan membaca

  1. omje

    menarik mas artikelnya.. sy masih kurang sensitif soal tipografi nih, jiwa seninya masih harus dilatih ๐Ÿ™‚
    thx for sharing..

  2. Pinasti Untung

    Tipografi memang sangat penting bagi kenyamanan pembaca. Dan memang benar yang empunya blog sering mengabaikan hal sederhana namun penting ini. Terima kasih untuk wawasan yang sudah Mas bagikan.

  3. Ramzi

    Iya ni Pak
    Harus berimbang juga tipografi blog kita, biasanya untuk bagian konten / posting lebih lebar dari bagian sitebar blog
    Nice share pak dan selamat menjalankan puasa :0

  4. untoro

    Mas, kalau ada blogger yang memang fokuskan blognya untuk adsense, terus pakai theme yang penuh dengan jebakan batman dengan tujuan meningkatkan konversi klik iklan kira2 efektif ngga yah..

  5. RudhiMaya

    Lumayan kalo buat nambah ilmu oprak oprek wordpress, kalo masalah font..Yupz..kayaknya yang dibahas ini harus menjadi perhatian utama bagi development, selain mempermudah dalam hal penyampaian informasi via teks,juga bisa meringankan kinerja wp, dan tentunya sangat menarik dipandang mata.

  6. nurulwp

    Alhamdulillah y…akhirnya dapet juga ilmunya. Selama ini saya kurang memperhatikan tips2 tipografi biar bacanya jadi enak. Maklumlah yg pemula seperti saya ni…makasih informasinya yah. ^__^

  7. supplier daging

    Mas tipografi ini apa berlaku di semua web browser? Blog ku sih responsive, tp ketika dibuka dari bb kok sedikit beda ya? Maksudnya beda font gt, apa properti2 di css nya kudu urut gt misalnya?

  8. check my source

    I simply want to say I am just newbie to blogs and seriously savored your web site. Most likely Iโ€™m want to bookmark your site . You really have excellent articles and reviews. Thanks for revealing your web site.

  9. Jeffrey Mcjunkins

    This is really interesting, You are a very skilled blogger. I have joined your feed and look forward to seeking more of your wonderful post. Also, I’ve shared your web site in my social networks!

  10. Xavier Willert

    Heya i am for the earliest period here. I set up this board and I find It truly beneficial & it helped me outdated a lot. I chance to give impressive back and evade others like you helped me.

  11. Carmen Tatsuta

    Hello there, just became alert to your blog through Google, and found that it’s really informative. I am gonna watch out for brussels. I will appreciate if you continue this in future. Many people will be benefited from your writing. Cheers!

  12. Natividad Hastert

    Hey there! I just wanted to ask if you ever have any issues with hackers? My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no back up. Do you have any methods to stop hackers?

  13. Baby

    Great โ€“ I should definitely pronounce, impressed with your web site. I had no trouble navigating through all the tabs as well as related information ended up being truly easy to do to access. I recently found what I hoped for before you know it in the least. Reasonably unusual. Is likely to appreciate it for those who add forums or something, website theme . a tones way for your customer to communicate. Excellent task.

  14. Yasmine Teo

    I am really impressed with your writing skills as well as with the layout on your weblog. Is this a paid theme or did you customize it yourself? Anyway keep up the excellent quality writing, itโ€™s rare to see a great blog like this one nowadays..

Comments are closed.