Panduan Lengkap Tipografi – Pemakaian Font Dalam Web

Sebelumnya, saya minta maaf pada yang kemarin-kemarin request tutorial, ternyata senin kemarin saya tidak bisa saya penuhi permintaannya karena sedang banyak pekerjaan. Juga, tidak seperti sebelum-sebelumnya, posting kali ini tidak membahas tutorial ataupun trik CSS/HTML/JS karena ketidak-cukupan waktu untuk melakukan riset dan eksperimen.

Namun, jangan khawatir karena posting ini tidak kalah bagusnya dengan posting lain. Kali ini saya akan membahas secara lengkap tentang tipografi, yaitu bagaimana cara yang baik dalam menggunakan font pada web design. Artikel ini merupakan rangkuman dari beberapa artikel berbahasa inggris di smashingmagazine, creativebloq dan beberapa website lain.

—

Mengenal Apa itu Tipografi

Tipografi dalam web identik dengan font. Namun, sebenarnya tidak sesederhana itu.

“Tipografi, seni cetak atau tata huruf adalah suatu kesenian dan teknik memilih dan menata huruf dengan pengaturan penyebarannya pada ruang yang tersedia, untuk menciptakan kesan tertentu, guna kenyamanan membaca semaksimal mungkin.” – Wikipedia

Intinya, tipografi adalah salah satu bagian penting dari desain web yang mencakup segala hal mengenai tata huruf, teks, dan paragraf yang di tampilkan sedemikian rupa untuk memberikan kenyamanan dan kesan tertentu yang ingin disampaikan kepada pembaca. Untuk lebih mengenalnya, silahkan perhatikan secara seksama gambar dibawah ini (klik untuk memperbesar).

Dalam web design, hal-hal yang mempengaruhi tipografi diantaranya jenis font yang di pakai, ukuran, jarak tiap baris, margin dan padding teks, dan styling css lainnya yang berhubungan dengan font. Selengkapnya, akan dibahas di bawah.

Mengapa Tipografi Penting?

Tipografi penting karena kenyataannya hampir semua website di dunia ini terdiri dari teks. Hampir semua website dibuat untuk dibaca. Tipografi adalah faktor terbesar yang mempengaruhi kenyamanan pengunjung. Sebagus apapun desain, ketika tipografinya tidak cocok dan buruk, akan memberikan kesan ‘bete’ pada pengunjung.

Pengunjung datang ke situs anda untuk membaca bukan? jadi mengapa fokus pada elemen desain lain sementara yang paling penting untuk membuat pembaca nyaman tidak diperhatikan?

Mengenal Jenis Font

Sebelum membahas bagaimana menerapkan tipografi yang bagus pada website, sebaiknya kenali dulu elemen paling penting dalam tipografi : Font. Ada 2 macam font yang harus anda ketahui, yaitu serif dan sans-serif.

Font Serif

Font serif adalah font yang memiliki lengkungan atau ekor pada ujung tiap-tiap hurufnya. Contoh-contoh font serif adalah Georgia, Cambria, Times New Roman, dan Bree serif yang saya gunakan untuk judul pada blog ini.

Font serif memberikan kesan unik, menarik dan seperti membaca buku pada pembaca. Font jenis ini berperan besar untuk menciptakan desain yang unik dan tidak monoton.

Biasanya, font serif lebih banyak digunakan untuk font judul atau headline pada sebuah situs. Hal ini karena font serif akan lebih baik dan menarik dalam ukuran besar. Namun, beberapa web designer ada yang lebih suka memakainya untuk font isi konten.

Font Sans-serif

Sans-serif adalah kebalikkan dari serif. Font sans-serif adalah font yang tidak memiliki ekor pada ujung tiap-tiap hurufnya. Contoh font serif adalah Arial, Verdana, Calibri, dan Trebuchet MS.

Sans-serif memberikan kesan formal dan sederhana pada pembaca. Font sans-serif biasa digunakan untuk font isi konten karena lebih memberikan kenyamanan saat dibaca. Sangat jarang website yang menggunakan serif untuk font pada konten.

Cara & Konsep yang harus anda Terapkan untuk Tipografi yang Bagus

Setelah mengenal jenis-jenis font, sekarang mari kita pelajari bagaimana membuat tipografi yang baik pada website anda. Poin-poin dibawah ini adalah konsep dan teknik yang harus anda patuhi untuk membuat tipografi yang baik.

1. Komposisi Font

Pemakaian font pada sebuah website tidak boleh seenak jidat. Mentang-mentang lihat website-website lain menggunakan font yang unik, tidak serta merta anda bisa menambahkannya pada website anda. Penggunaan font dalam website tidak boleh terdiri lebih dari 3 jenis font. Bahkan 3 juga terbilang kebanyakan.

Komposisi font yang baik adalah menggunakan 2 jenis font, yaitu 1 font untuk judul atau tulisan-tulisan besar di website, dan 1 font lain untuk konten. Kedua font tersebut juga sebaiknya tidak 1 jenis, misal keduanya adalah font jenis serif. Jadi, sebaiknya 1 jenis font serif, dan 1 jenis font sans-serif.

Gunakan font serif untuk judul, dan gunakan sans-serif untuk konten. Kombinasi ini sudah menjadi hal umum yang bisa anda lihat di kebanyakan website-website besar di dunia.

2. Styling Teks dan Paragraf

a. Leading

Leading adalah istilah yang biasa digunakan untuk jarak baris tiap baris sebuah paragraf. Leading, sangat berpengaruh pada kenyamanan baca sebuah teks. Jarak yang dibuat oleh leading ini membuat mata lebih rileks dan mudah dalam membaca teks.

Tinggi leading yang baik biasanya berkisar 2-5pt lebih besar daripada tinggi font. Dalam web design, leading dapat ditentukan dengan properti css line-height. Nilainya bisa berupa px ataupun angka desimal. Angka desimal 1.3 seperti di bawah menandakan bahwa tinggi baris 130% dari tinggi asli font.

b. Ritme Vertikal

Ritme vertikal sebenarnya mirip dengan leading, namun tidak terbatas pada paragraf. Ritme vertikal mengacu pada ketetapan atau konsistensi jarak vertikal antara teks 1 dengan teks lainnya. Penerapannya, bisa dilakukan dengan menyamakan leading untuk setiap paragraf, jarak antara paragraf satu dengan yang lainnya, serta jarak judul dengan isi. Semuanya harus konsisten.

c. Warna

Secara default, warna teks yang ditampilkan di web adalah warna hitam pekat (#000). Sebenarnya ini kurang baik. Hitam pekat akan terlalu kontras dengan warna-warna yang ada di web, apalagi jika webnya mengusung desain flat. Warna yang bagus untuk teks pada desain web era modern adalah hitam keabu-abuan, dari interval #333 – #999.

Namun, kita juga bisa menyesuaikan dengan desain dan dominasi warna yang ada pada website kita, seperti yang saya lakukan pada website ini.  Dalam penggunaan warna pada font, hindari warna yang terlalu kontras. Gunakanlah warna yang lebih lembut dan cocok dengan desain web secara keseluruhan.

Menggunakan warna gelap yang dominan di pakai dalam website juga bisa menjadi pilihan anda.

d. Ketebalan Teks

Ketebalan teks juga mempengaruhi tipografi. Dalam web design, anda bisa menentukannya dengan styling css melalui properti font-weight. Nilainya berkisar dari interval 100 – 900, bold dan bolder. Untuk teks pada konten, biasanya sudah cocok dengan nilai standar.

Namun, pada teks heading terkadang nilai standarnya (bold), justru membuat tidak cocok. Nah untuk menggantinya, anda bisa menggunakan properti font-weight, seperti di bawah ini :

e. Panjang Teks Perbaris

Hal lain yang perlu anda perhatikan pada styling paragraf adalah jumlah karakter rata-rata pada tiap baris. Perlu diingat bahwa orang tidak nyaman dengan baris yang terlalu panjang, atau terlalu pendek. Oleh karena itu idealnya, setiap baris terdiri dari 40 – 80 karakter, termasuk spasi.

Setiap situs memiliki lebar container untuk konten yang berbeda-beda. Jadi sebaiknya sesuaikan ukuran font dengan container agar setiap baris terdiri dari jumlah karakter yang ideal.

3. Padding dan Margin

Siapa bilang tipografi dalam web itu cuma teks saja?. Padding dan margin juga sangat berperan dalam tipografi pada web. Dalam hal ini, untuk membuat white space yang ideal.

Gunakanlah padding dan margin yang pas untuk setiap elemen yang berisi teks pada website anda. Padding yang ideal untuk container biasanya berkisar antara 10 – 30 piksel. Begitu juga untuk jarak atau margin elemen satu dengan yang lainnya. Besarnya, berbanding lurus dengan besar font yang digunakan.

Selain itu, penggunaan padding dan margin juga harus konsisten. Artinya, jika elemen a di beri padding atau margin sebesar 20px, maka elemen yang sejenisnya pun harus sama. Ini juga berlaku pada jarak antar paragraf.

4. Penekanan Pada Teks

Penekanan pada teks tertentu adalah hal yang lumrah untuk sebuah bacaan. Biasanya, untuk menekankan sebuah teks digunakan bold, Italic dan underline. Lalu, mana yang paling baik ?

Relatif. Itu tergantung pada jenis teks yang ditekankan. Bold, memiliki kesan yang lebih mendalam. Disusul oleh underline, kemudian italic.

Namun, teks apapun yang anda tekankan jangan pernah menggunakan 2 style sekaligus. Jangan menekankan sebuah teks dengan menggunakan bold sekaligus italic.

5. Hirarki dan Ukuran Font

Last but not least, hirarki dan ukuran font pada website anda juga harus anda tentukan. Secara default, browser yang menentukan ukuran setiap tag heading (<h1>,<h2>,<h3>,<h4>,<h5>,<h6>), tag paragraf (<p>), tag small (<small>), dan sebagainya. Namun, itu tentu saja tidak selalu cocok dengan desain web anda.

Oleh karena itu, tentukan ukuran font secara terstruktur. Hal ini akan membuat pengguna bisa membedakan mana judul utama, sub judul, konten dan sebagainya.

Untuk tag heading, tentu saja harus lebih besar dari elemen lainnya. Contoh hirarki dan ukuran font yang baik adalah seperti di bawah ini :

Itulah panduan dan tips yang bisa anda terapkan untuk membuat tipografi yang lebih baik. Lain kali, akan saya bahas lagi agar lebih lengkap.

Semoga bermanfaat.

~Muhammad Syakirurohman~

Referensi dan Gambar:

http://id.wikipedia.org
http://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/
http://web.enavu.com/tutorials/typography-in-web-design-complete-guide/
http://www.creativebloq.com/typography/what-is-typography-123652