Tips Membangun Tipografi dalam Desain Website

Komunikasi memiliki peran penting untuk membangun hubungan antara situs web dengan pengguna dalam mencapai tujuan tertentu. Ketika kita berbicara tentang komunikasi dalam konteks desain web, hal ini biasanya berbentuk sebuah teks. Dengan demikian tipografi memiliki peran penting dalam proses ini:

Lebih dari 95% persen informasi di web dalam bentuk bahasa tertulis.

Tipografi yang baik akan mudah dibaca. Seperti yang dikatakan Oliver Reichenstein dalam artikelnya ” Web Design adalah tipografi 95% “:

Mengoptimalkan tipografi adalah mengoptimalkan keterbacaan, aksesibilitas, kegunaan, dan keseimbangan grafis.

Dengan kata lain: mengoptimalkan tipografi juga dapat berperan dalam mengoptimalkan antarmuka pengguna. Pada artikel ini, akan mengulas beberapa aturan yang membantu untuk meningkatkan keterbacaan konten dari sebuah teks.

1. Batasi Minimal Jumlah Font yang Digunakan

Menggunakan lebih dari 3 font yang berbeda membuat situs web terlihat tidak terstruktur dan tidak profesional. Perlu diingat bahwa terlalu banyak jenis ukuran dan gaya sekaligus dapat merusak tata letak apapun.

Secara umum, batasi jumlah font family seminimal mungkin. Jika Anda menggunakan lebih dari satu font, pastikan font family saling melengkapi berdasarkan lebar karakternya. Sebagai contohnya adalah kombinasi huruf di bawah ini. Kombinasi Georgia dan Verdana (kiri) memiliki nilai yang sama sehingga mampu menciptakan pasangan yang harmonis. Bandingkan dengan pasangan Baskerville and Impact (kanan) di mana beban berat terlihat sangat membayangi pasangan serifnya.

Pastikan font family saling melengkapi berdasarkan lebar karakternya

2. Cobalah Menggunakan Font Standar

Layanan penyematan font (seperti Google Web Fonts atau Typekit ) memiliki banyak font menarik yang memberikan desain Anda terlihat baru, segar, dan tak terduga. Selain itu, juga sangat mudah digunakan. Sebagai contoh Google misalnya:

  1. Pilih font seperti Open Sans .
  2. Buat kode dan tempelkan di < dokumen > HTML Anda.
  3. Selesai!

Sebenarnya, dengan pendekatan ini juga memiliki satu persoalan – pengguna akan terbiasa oleh font standar, dengan demikian membacanya bisa lebih cepat. Kecuali situs web Anda memiliki kebutuhan tertentu yang harus menggunakan font khusus, seperti untuk tujuan pencitraan merek ataupun untuk menciptakan pengalaman yang mendalam, tapi sebaiknya tetap menggunakan font sistem.

3. Batasi Panjang Baris

Memiliki jumlah karakter yang tepat pada setiap baris adalah kunci dari keterbacaan suatu teks. Karena bukan seharusnya desain yang menentukan lebar teks.

Jika garis teks terlalu pendek, mata akan bergerak terlalu jauh, memecahkan ritme pembaca. Jika garis teks terlalu panjang, mata pengguna akan sulit memfokuskan pada teks. Kredit gambar: Desain Material

Untuk perangkat mobile, Anda harus membuat 30-40 karakter per baris. Berikut contoh dua situs yang terlihat dengan tampilan seluler. Yang pertama menggunakan 50-75 karakter per baris, sedangkan yang kedua menggunakan 30-40 karakter optimal.

Credit gambar: Usertesting

Dalam desain web Anda dapat mencapai jumlah karakter yang optimal per baris dengan membatasi lebar blok teks menggunakan em atau piksel.

4. Pilih Typeface yang Baik dalam Berbagai Ukuran

Pengguna akan mengakses situs Anda dari berbagai perangkat dengan ukuran layar dan resolusi yang berbeda. Sebagian besar antarmuka pengguna memerlukan elemen teks dari berbagai ukuran (teks tombol, label, bagian header, dll.). Sehinnga penting untuk memilih jenis huruf yang bekerja dengan baik dalam berbagai ukuran dan bobot untuk menjaga keterbacaan dan kegunaan dalam setiap ukuran.

Pastikan jenis huruf yang dipilih terbaca di layar yang lebih kecil! Cobalah untuk menghindari font yang menggunakan skrip kursif, seperti Vivaldi (pada contoh di bawah ini): meski cantik, tapi sulit dibaca.

Jenis huruf Vivaldi akan sulit dibaca di layar kecil

5. Gunakan Font dengan Setiap Style yang Berbeda

Banyaknya tipografi membuat bingung terhadap bentuk huruf yang hampir serupa, terutama huruf “i” dan “L” (seperti yang terlihat pada gambar di bawah), dan jarak huruf yang buruk, seperti “r” dan “n” “M”. Jadi saat memilih jenis style, periksalah setiap jenis yang berbeda untuk memastikan hal itu tidak menimbulkan masalah bagi pengguna.

6. Hindari Menggunakan Huruf Kapital Semua

Semua huruf yang dikapitalisasi jangan memaksa pengguna untuk membaca isi dari semua teks dengan memaksakan semua huruf harus dibuat menjadi kapital, kecuali yang tidak melibatkan pembacaan (seperti akronim atau logo).

7. Jangan Terlalu Meminimalkan Jarak Antar Garis

Dalam tipografi, kita memiliki istilah khusus untuk jarak antara dua baris teks (atau tinggi garis). Sebagai aturan, gunakan ruang sekitar 30% lebih tinggi dari tinggi karakter untuk keterbacaan yang baik.

Memang benar menggunakan ruang antar baris teks telah terbukti dapat meningkatkan pemahaman hingga 20%, namun hal ini juga harus dipertimbangkan dalam membuang detail yang tidak relevan. Keterampilan menggunakan ruang teks terletak pada penyediaan konten yang kemudian dicerna oleh pengguna.

8. Pastikan Memiliki Kontras Warna yang Cukup

Jangan gunakan warna yang sama atau serupa untuk teks dan latar belakang. Semakin terlihat teksnya, semakin cepat pengguna bisa memindai dan membacanya. Berikut W3C merekomendasikan rasio kontras untuk teks body dan teks gambar:

  • Teks kecil harus memiliki rasio kontras minimal 4.5: 1 terhadap latar belakangnya .
  • Teks besar (pada 14 pt tebal / 18 pt reguler dan atas) harus memiliki rasio kontras minimal 3: 1 terhadap latar belakangnya .

Baris teks ini tidak memenuhi rekomendasi rasio kontras warna dan sulit dibaca dengan warna latar belakangnya.

Baris teks ini memenuhi rekomendasi rasio kontras warna dan mudah dibaca dengan warna latar belakangnya.

9. Hindari Memberi Warna Teks Merah atau Hijau

Kebutaan warna adalah kondisi yang umum, terutama di kalangan pria (8% pria buta warna), disarankan menggunakan isyarat lain untuk membedakan informasi yang penting. Hindari menggunakan warna merah dan hijau untuk menyampaikan informasi, karena kebutaan warna merah dan hijau adalah bentuk paling umum dari buta warna.

10. Hindari Menggunakan Teks Berkedip

Konten yang berkedip dapat memicu depresi pada individu yang rentan. Tidak hanya itu, tapi cenderung mengganggu pengguna pada umumnya.

Kesimpulan

Membuat pilihan tipografi yang tepat dapat memberi kesan nuansa dan kejernihan situs web Anda. Di sisi lain pilihan tipografi yang buruk, dapat mengganggu dan cenderung menimbukan atensi pada diri mereka sendiri. Hal terpenting dalam membuat tipografi adalah mudah dibaca , mudah dipahami , dan terbaca.

Share this article to

Leave a Reply

Your email address will not be published. Required fields are marked *