Apa itu Tipografi?

Baik itu buku, koran, situs, bahkan aplikasi sekalipun pasti akan memuat teks di dalamnya. Teks tersebut berisi informasi yang ingin disampaikan kepada pembaca.

Namun, bagaimana jika pembaca tidak memahami informasi tersebut karena teks terlalu kecil atau rapat? Jangankan menangkap maksud tulisan, pembaca terlanjur pusing melihat teksnya yang seperti itu. 

Karena itulah tipografi sering digunakan oleh desainer. Bisa dikatakan, tipografi adalah sebuah seni untuk mengatur huruf sedemikian rupa, sehingga ketika tulisan ditampilkan bisa menarik secara visual dan dipahami pengguna. 

Tipografi mencakup pengaturan format tulisan, seperti jenis tulisan (font) yang dipakai, ukuran huruf, dan kerapatan tulisan. 

Tipografi juga dapat memberikan emosi pada tulisan, sehingga pembaca bisa lebih menangkap pesan di dalamnya. Karena itu pemahaman tipografi sangatlah penting. 

Tipografi dimanfaatkan pada seluruh bidang yang melibatkan tulisan dan desain. Artikel ini akan membahas tipografi dalam desain website dan aplikasi. 

Fungsi Tipografi

Dalam website dan aplikasi, tipografi termasuk komponen penting dalam desain UI dan UX.

Tipografi yang berkualitas menghasilkan tampilan awal (user interface/UI) yang baik, sehingga user tidak akan kebingungan saat mengakses situs atau aplikasi.

Ketika user menggunakan fitur-fitur pada aplikasi, pengalaman mereka (user experience/UX) juga akan meningkat karena merasakan tulisan di dalamnya merepresentasikan fungsi fitur dengan baik. 

Selain itu, berikut fungsi tipografi dalam suatu desain:

• Membantu mengenalkan brand: Melalui tipografi yang unik, user secara otomatis akan terhubung dengan sebuah brand. Perlahan-lahan, user juga akan mengenali brand hanya dengan melihat visualnya saja seperti tipografi, warna, dan grafik yang digunakan (brand awareness).
• Membuat visual lebih seimbang: Website terdiri dari campuran berbagai warna, gambar, dan elemen seperti kategori konten. Pemilihan tipografi bisa membuat visual website jadi lebih seimbang dan indah dipandang. 
• Mempertahankan perhatian user: Penggunaan tipografi yang optimal memudahkan user memahami tulisan dengan jelas, yang pada akhirnya membuat mereka betah berlama-lama pada situs atau aplikasi tersebut. Jika tulisan terlalu sulit dimengerti, kemungkinan besar user akan meninggalkan halaman dengan cepat.  
• Memengaruhi pengambilan keputusan oleh user: Tipografi memiliki efek yang cukup kuat dalam memengaruhi pengambilan keputusan yang dilakukan user. Hal ini karena setiap gaya tulisan menghasilkan emosi berbeda ketika dibaca.

Prinsip-prinsip Tipografi

Dikutip dari Geeks for Geeks dan UX Design, berikut prinsip tipografi yang harus dilaksanakan agar tipografi terlihat profesional:

#1 Legibility 

Legibility adalah bagaimana pembaca bisa mengenali dan membaca setiap karakter atau huruf yang tersusun dalam satu kalimat. 

Legibility mencakup:

• Ketebalan huruf, yang terdiri dari tipis (light), sedang (bold), dan tebal (black)
• Pemakaian font sans dan sans-serif, yang dibedakan dari pengait yang berada di bagian atas dan bawah huruf

#2 Readability

Readability mengacu pada kemudahan seluruh tulisan dibaca oleh user. Jadi, keterbacaan tidak dilihat per huruf seperti legibilitas, tapi secara keseluruhan termasuk judul, isi paragraf, dan kutipan.

Readability mencakup:

• Struktur dan hierarki tulisan, seperti judul, sub-judul, dan isi harus ditaruh berurutan
• Ukuran tulisan, di mana judul memiliki ukuran yang lebih besar dibandingkan sub-judul dan isi
• Jarak antar huruf (tracking), kata, dan baris kalimat (leading)
• Margin, atau ruang kosong antara tulisan dan tepian halaman
• Warna huruf yang harus kontras dengan background

#3 Optimal Line Height & Length

Prinsip ini mengacu pada efisiensi tulisan ketika dibaca. Tinggi dan panjang garis sangat penting, terutama bagi website yang umumnya ditampilkan pada dua device yang berbeda. 

Jika mengakses situs dari komputer, tak masalah jika satu kalimat atau paragraf terdiri dari banyak karakter. Namun jika diakses melalui smartphone, jumlah karakter yang terlalu banyak akan membuat mata lelah. 

Ditambah lagi menurut penelitian, jumlah karakter yang terlalu panjang atau pendek bisa mengurangi kecepatan membaca. 

Berikut tips untuk membuat panjang garis yang optimal:

• Bereksperimenlah antara skala 130% - 180% untuk menemukan aksesibilitas dan reability yang optimal. Tujuannya adalah untuk menentukan apakah terlalu banyak ruang kosong pada halaman, atau tulisan terlalu sedikit.
• Periksa spasi baris saat mengubah font dan ukurannya. Font yang berbeda memiliki panjang dan tinggi garis yang berbeda pula. Jadi periksa kembali keterbacaan saat mengganti font dan ukurannya. 
• Batasi panjang baris hingga 70–80 karakter. Baris teks yang terlalu panjang dapat melelahkan mata ketika dibaca.
• Font seperti kaligrafi harus memiliki lebih banyak jarak, karena jika terlalu rapat lebih sulit dibaca. Ruang tambahan membuatnya lebih mudah untuk diuraikan.

Misalnya pada gambar di atas, keduanya ditulis dengan font dan ukuran yang sama. Namun, tulisan nomor 2 jauh lebih nyaman dibaca karena memiliki jarak. 

Sedangkan tulisan nomor 1 lebih rapat, sehingga mata cepat lelah saat membacanya.

Contoh Tipografi dalam Website

Contoh tipografi dalam website bisa dilihat pada website Revou, di bagian Kosa Kata. 

Pada bagian ini dirangkum berbagai istilah teknis yang berkaitan dengan Software Engineering, Product Management, Digital Marketing, dan Data Analytics. 

Karena banyaknya topik yang dibahas, Revou membagi topik tersebut sesuai abjad dan bidang terkait. Pengunjung juga bisa langsung mencari topik yang diinginkan melalui kolom pencarian yang tersedia. 

Selain itu, di setiap topik juga disertai label untuk memberitahu pembaca, bahwa topik tersebut berkaitan dengan bidang tertentu. 

Saat salah satu topik diklik, misalnya topik A/B Testing, maka akan muncul tampilan seperti di bawah ini. 

Bisa dilihat bahwa tipografi pada situs RevoU memiliki struktur yang jelas, yaitu judul, meta-deskripsi, sub-judul, dan juga isi artikel. 

Setiap hierarki menggunakan font yang sama dengan ukuran yang berbeda, begitu juga pada CTA, gambar pendukung, dan table of content. Hal ini membuat tampilan situs seimbang dan mudah dibaca.

Selain itu, warna yang dipakai adalah pink dan kuning, di mana kuning melambangkan RevoU dan pink khusus topik terkait digital marketing. Jadi secara tak langsung, pembaca dapat mengenali konten-konten yang dibuat oleh RevoU.

FAQ (Frequently Asked Question)

Apa saja langkah-langkah membuat tipografi?   

Dikutip dari Hubspot, berikut langkah-langkah membuat tipografi dalam website: 

1. Batasi typefaces yang ingin digunakan

Langkah paling awal untuk membuat tipografi adalah menentukan berapa banyak typefaces yang ingin digunakan di seluruh situs. 

Typefaces adalah tampilan spesifik dari sebuah tulisan, yang terdiri dari jenis font, ukuran, ketebalan tulisan, dan jarak antar karakter.

Gunakan maksimal 2 typefaces dengan tampilan yang kompatibel satu sama lain. 

Biasanya typeface yang digunakan sangat berbeda satu sama lain, tapi menghasilkan visual yang seimbang. Misalnya, salah satunya font kaligrafi, dan satunya font Times New Roman. 

2. Gunakan font sans serif untuk isi tulisan

Para ahli tipografi sepakat bahwa font dengan sans serif lebih mudah dibaca dibandingkan font serif. Karena itu gunakan font serif untuk tulisan dekoratif saja. 

3. Gunakan font yang kompatibel

Pilih font yang kompatibel dengan website agar lebih mudah dibaca dan tak terjadi error saat situs diakses. 

4. Tetapkan ukuran yang sama di seluruh situs

Gunakan ukuran huruf standar, yaitu minimal 16 pixel (px). Ukuran ini bisa digunakan pada seluruh isi konten, sedangkan untuk seluruh judul dan sub-judul bisa menggunakan ukuran yang lebih besar. 

5. Jangan menggunakan huruf kapital di seluruh isi konten

Gunakan huruf kapital sesuai kebutuhan saja, misalnya setiap awal kalimat atau untuk menekankan suatu istilah atau contoh.

6. Pilih warna yang kontras

Warna tulisan yang sama atau hampir mirip dengan background membuat tulisan sulit dibaca. 

7. Pastikan setiap baris mengandung 40-80 karakter

Jumlah karakter yang terlalu banyak dalam satu baris dapat membuat mata lelah saat membacanya. 

8. Beri jarak antar baris

Pemberian jarak antar baris dan paragraf membantu pembaca lebih memahami isi konten. Tulisan yang terlalu rapat bisa memberikan kesan isinya sangat banyak, dan berpotensi membuat user meninggalkan situs. 

9. Jangan gunakan teks bergerak

Tulisan bergerak bisa membuat otak sulit fokus menangkap pesan dari teks. Bagi beberapa orang, teks bergerak membuat tak nyaman, serta memicu pusing dan kejang.

‍