Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Typography

Readability dan Legibility Tipografi

by
Length:MediumLanguages:
This post is part of a series called A-Z of Web Typography.
Start Using Quotation Marks the “Correct” Way
How to Establish a Modular Typographic Scale

Indonesian (Bahasa Indonesia) translation by Rossie (you can also view the original English article)

Saat menggunakan tipografi di web, ada banyak hal yang perlu diingat untuk membuat halaman yang menyediakan akses yang jelas ke konten dan menyajikannya dengan cara yang dapat dibaca. Biasanya ini dapat dipecah menjadi dua ember: Readability and Legibility. Readability mengacu pada cara di mana kata dan blok jenis diatur pada halaman. Legibility mengacu pada bagaimana jenis huruf dirancang dan seberapa baik satu karakter individu dapat dibedakan dari yang lain. Demi artikel ini, saya akan berbicara sedikit tentang keduanya, menyarankan beberapa teknik khusus untuk meningkatkan tipografi Anda.

Legibility

Mari kita bicara legibility pertama. Penting untuk memahami apa yang membuat satu jenis huruf lebih mudah dibaca daripada yang lain. Saat memilih jenis huruf, itu semua tergantung pada bagaimana Anda berencana untuk menggunakannya. Tanyakan kepada diri Anda beberapa pertanyaan mendasar: Pada ukuran apa teks akan digunakan? Apakah akan muncul sebagai salinan tubuh atau judul? Apakah perlu menjadi pekerja keras atau akan lebih banyak digunakan sebagai eye candy? Apakah akan dipasangkan dengan font lain? Apakah tampilan jenis huruf melengkapi materi pelajaran?

Penting juga untuk diingat bahwa tipografi yang berbeda dirancang untuk penggunaan yang berbeda. Misalnya, Garamond asli dirancang agar sangat terbaca saat dicetak dalam teks berukuran besar. Beberapa juga mengatakan itu adalah font paling ramah lingkungan pada masanya, menghemat penggunaan tinta. Bell Centennial adalah jenis huruf yang ditugaskan oleh AT&T pada tahun 1970-an, yang dirancang untuk digunakan dalam direktori telepon. Direktori ini dibuat dari kertas murah dan untuk alasan ini Bell Centennial dirancang untuk mengakomodasi penyebaran tinta selama proses pencetakan. Di sisi digital, ada font yang telah dirancang khusus untuk layar seperti Georgia dan Verdana. Azura adalah font yang relatif baru yang dirancang khusus untuk membaca teks di layar.

Singkatnya, ini membantu untuk mengetahui konteks yang diinginkan dari jenis huruf yang Anda pertimbangkan untuk digunakan. Beberapa font memang cukup fleksibel, termasuk beberapa bobot dan dapat digunakan dalam beberapa cara. Yang lain lebih terbatas, dirancang untuk digunakan dengan sangat spesifik.

Ini membawa kita ke hal pertama dari beberapa hal yang perlu diingat mengenai legibility jenis huruf:

Tampilan vs. Teks

Beberapa tipografi dirancang untuk digunakan besar, seperti dalam tajuk utama. Biasanya tipografi ini kurang dapat dibaca pada ukuran yang lebih kecil dan tidak boleh digunakan untuk salinan tubuh. Ini disebut tampilan muka. Jenis huruf yang ditunjukkan di bawah ini, Knockout, adalah salah satu wajah tampilan favorit saya.

display

Tipografi lainnya dirancang khusus untuk digunakan di area yang luas dari salinan tubuh yang lebih kecil. Ini disebut teks atau badan.

serif-sans

Ada banyak variasi di antaranya. Biasanya, yang saya lakukan adalah menemukan tampilan yang menurut saya sesuai untuk tugas tersebut, mengingat bahwa saya berencana untuk memasangkannya dengan font lain, dan mencobanya. Saya sudah memfilter semua font yang saya pikir tidak sesuai untuk tugas itu, tetapi jika Anda baru memulai, mungkin perlu beberapa percobaan dan kesalahan.

Serif vs. Sans Serif

Jadi mana yang lebih terbaca: tipografi serif atau sans-serif? Sejarah memberi tahu kita bahwa wajah serif selalu dianggap lebih terbaca, karena mereka hampir selalu digunakan dalam cetakan untuk bagian teks yang besar. Wajah serif memungkinkan mata mengalir lebih mudah di atas teks, meningkatkan kecepatan membaca dan mengurangi kelelahan mata.

Konon, ada banyak wajah sans-serif yang bisa dibaca. Secara online sepertinya wajah sans-serif lebih banyak digunakan untuk teks tubuh daripada sebelumnya. Saya pikir ada beberapa alasan untuk ini. Bentuk huruf yang lebih sederhana tampaknya berfungsi lebih baik dengan tren desain saat ini dan dapat terasa lebih modern. Selain itu, kita biasanya tidak membaca sebagian besar teks pada situs web, jadi font sans-serif baik-baik saja dalam potongan salinan yang lebih pendek.

Perlu dicatat bahwa ada perdebatan tentang hal ini - satu sudut pandang adalah bahwa wajah serif tidak mengurangi layar yang pada dasarnya mengurangi legibility. Yang lain percaya bahwa tidak ada perbedaan. Posisi yang selalu saya ambil adalah, apakah itu terasa benar? Apakah saya akan membaca bagian tipe yang mengatur cara saya mendesainnya?

x-height

Karakteristik lain yang perlu diperhatikan adalah x-height. Ini biasanya berlaku untuk menggunakan tipe pada ukuran teks isi. Ketinggian x adalah, yah, pengukuran ketinggian huruf kecil "x" dalam font yang diberikan. Itu tidak memperhitungkan ketinggian para pendatang atau keturunan. Anda mungkin terkejut mengetahui seberapa besar perbedaan dalam ketinggian x dari satu wajah ke wajah lainnya. Saat digunakan kecil, tipografi dengan ketinggian x lebih besar biasanya lebih mudah dibaca.

x-height

Readability

Readability adalah tentang mengatur kata dan kelompok kata dengan cara yang memungkinkan mata pembaca untuk mengakses konten dengan mudah dan dengan cara yang masuk akal. Ini benar-benar bentuk seni yang diasah seiring berjalannya waktu ketika kombinasi yang berhasil ditemukan.

Dalam pengalaman saya, ini cenderung menjadi salah satu konsep yang paling sulit untuk dipahami oleh para pengembang dan desainer pemula. Bahkan desainer kawakan kadang-kadang berjuang dengan cara terbaik mengatur tipografi dalam layout. Sekarang kedua penunjukan itu mulai bergabung ketika datang ke desain web, penting untuk mulai memahami konsep keterbacaan. Berikut adalah beberapa hal yang perlu diingat:

Spasi/Tinggi Baris

Salah satu "kesalahan" tipografi yang paling umum yang saya lihat di web saat ini adalah spasi tipe yang tidak tepat. Apa yang saya maksudkan di sini adalah contoh di mana teks blok tidak diberi cukup margin, subjudul dan teks isi berkorelasi yang tidak dikelompokkan secara visual bersama, dan sebagainya. Spasi yang tepat (dikombinasikan dengan hierarki) memungkinkan pembaca untuk memindai teks dan mengaksesnya pada titik yang diinginkan.

Ini bukan aturan yang sulit dan cepat, tetapi bagi saya tampaknya hubungan jarak paragraf (jarak tambahan ditempatkan sebelum atau setelah paragraf), ruang di sekitar blok jenis, dan jarak huruf dapat dikaitkan secara proporsional dengan garis ketinggian paragraf. Tinggi baris didefinisikan sebagai jarak vertikal antara baris teks. Jadi misalnya, jika tinggi baris dari satu paragraf diatur ke 2em dan paragraf dengan ukuran teks yang sama diatur ke 1.5em, paragraf pertama akan membutuhkan lebih banyak jarak paragraf dan mungkin lebih banyak margin di sekitarnya.

Sebagian besar ini dilakukan dengan mata daripada formula yang tepat, tapi saya menggunakan aturan praktis yang baik ketika datang ke hubungan jarak paragraf dengan ketinggian garis. Saya biasanya membuat spasi paragraf saya (yang di web diterjemahkan menjadi margin atau padding yang ditempatkan di bagian atas atau bawah paragraf) sekitar setengah dari tinggi baris. Ini cenderung membantu bagian-bagian teks “disatukan” daripada menggunakan pengembalian penuh keras antara setiap paragraf, menciptakan ruang besar di antara paragraf.

paragraph-spacing

Ukuran

Jelas, perhatian harus diberikan untuk memastikan bahwa teks tidak disajikan terlalu kecil. Penting juga untuk diingat bahwa usia audiens Anda dapat bervariasi, karenanya kualitas penglihatan mereka. Secara umum, paling baik untuk tetap sekitar 13px atau .813em. Saat ini, dengan implementasi yang lebih luas dari situs web yang responsif, ada tren bergerak menuju salinan tubuh yang lebih besar. Di RWD, penting juga untuk diingat bahwa ukuran teks yang berbeda untuk perangkat yang berbeda mungkin masuk akal. Sebagai contoh, mungkin masuk akal untuk meningkatkan ukuran salinan tubuh pada lebar ponsel yang bertentangan dengan lebar desktop.

Mengukur

Praktik umum lainnya yang menghalangi keterbacaan tipe memungkinkan garis horizontal tipe pada halaman menjadi terlalu lebar. Jarak ini disebut sebagai ukuran (juga terkadang panjang garis). Jika satu baris jenis terlalu panjang itu adalah pembacaan yang membosankan dan peregangan untuk mata pembaca untuk kembali ke tepi kiri blok teks untuk baris berikutnya. Itu juga menakutkan untuk melihat blok teks diatur dengan cara ini dan beberapa pembaca bahkan mungkin tidak berusaha untuk membacanya.

Jadi berapa lebar maksimum blok teks seharusnya? Yah, itu semua tergantung pada ukuran teks. Semakin besar teks, semakin panjang barisnya (hal proporsi keseluruhan itu lagi). Menurut pendapat saya, umumnya sekitar 70 karakter selama yang Anda inginkan. Rata-rata, untuk teks berukuran badan salinan, saya mencoba untuk tetap dalam 45ems.

Spasi Huruf

Spasi huruf (juga disebut sebagai pelacakan) adalah kenaikan atau penurunan jarak yang konsisten antara bentuk huruf dalam kata atau blok teks. Tidak perlu bingung dengan kerning, yang mengacu pada menyesuaikan jarak antara karakter individu. Penspasian huruf dapat digunakan untuk mengatur kepadatan blok teks atau judul atau subjudul individu.

Jelas, jarak huruf memang mempengaruhi readability teks. Terlalu banyak atau terlalu sedikit dan keterbacaan akan terganggu. Namun, ada kalanya, menurut pendapat saya, jarak antar surat diperlukan. Seperti yang dapat Anda lihat pada grafik di bawah ini, saya ingin menambahkan spasi huruf yang murah hati ke subjudul atau frasa teks huruf besar. Saya merasa lebih mudah membaca teks huruf besar ketika karakter memiliki beberapa ruang tambahan di sekitarnya. Juga, tergantung pada jenis huruf yang digunakan, saya ingin meningkatkan jarak huruf sedikit dalam salinan tubuh.

caps-letterspacing

Kontras

Mungkin terdengar jelas bahwa kontras jenis yang baik sangat penting untuk keterbacaan. Faktanya adalah desainer (termasuk saya sendiri) selalu mendorong batas-batas kontras. Mungkin kita ingin bagian teks tertentu menjadi kurang menonjol, atau untuk membuat "layer" hierarki dalam desain kita. Apapun masalahnya, ingatlah bahwa kontras di layar, terutama ketika datang ke kecil, bentuk-bentuk halus seperti teks tubuh, sangat bervariasi dari layar ke layar. Yang terbaik adalah melakukan kesalahan dengan sedikit kontras “terlalu banyak”.

Hirarki

Seperti yang telah kita bahas dalam seri ini, hierarki memainkan peran besar dalam keterbacaan konten. Hirarki yang sukses mengatur konten menjadi bagian-bagian yang dapat dicerna dan memungkinkan pembaca untuk memindai dan mengakses teks dengan mudah.

Mulailah berpikir untuk menggunakan konsep legibility dan readability ini ke dalam proyek Anda. Semakin banyak Anda melakukannya semakin baik Anda akan dapatkan.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.