Tipografi dan praktik terbaik

Tipografi sangat penting dalam interaksi kita dengan produk dan antarmuka. Lebih dari 90% informasi online ada dalam bentuk teks. Tipografi meningkatkan pengalaman pengguna dan kegunaan, menarik perhatian pengguna dan berpotensi membantu mencapai tujuan bisnis. Karena ada beberapa ambiguitas dalam terminologi tipografi, bacaan ini akan membahas istilah-istilah penting yang sangat penting bagi Anda sebagai desainer UX UI.

Hasilnya, tipografi membuat bahasa terlihat dan memainkan peran penting dalam desain. Panduan Gaya Anda juga harus menyertakan studi Tipografi.

Huruf dan tipografi

Sangat penting untuk membedakan antara huruf dan tipografi. Keduanya sangat populer saat ini dan sering kali tercampur aduk. Keduanya memang berhubungan dengan bentuk huruf, namun dengan cara yang berbeda. Tipografi adalah tata letak dan pengaturan konten menggunakan sistem huruf yang sudah jadi seperti jenis huruf dan font. Namun, lettering adalah membuat bentuk huruf untuk penggunaan dan tujuan tertentu.

Terminologi tipografi

Istilah "jenis huruf", juga dikenal sebagai keluarga huruf, berasal dari cetakan fisik dan mengacu pada permukaan blok huruf fisik. Jenis huruf terdiri dari font, seperti halnya sebuah album yang terdiri dari lagu-lagu atau buku yang terdiri dari bab-bab. Jenis huruf memiliki beberapa bobot huruf dan gaya yang konsisten di semua karakter, angka, dan simbol. Jenis huruf meliputi Arial, Times New Roman, dan Comic Sans.

Elemen-elemen tipografi

Sebelum membahas praktik desain terbaik untuk meningkatkan pengalaman pengguna, mari kita lihat elemen-elemen tipografi.

Garis dasar

Garis dasar adalah titik di mana garis teks berada. Garis ini menghitung jarak antara konten tertulis dan elemen lain pada antarmuka.

Tinggi huruf

Tinggi huruf dari suatu jenis huruf mengacu pada tinggi huruf kapital. Tinggi huruf menunjukkan tinggi huruf datar seperti M, H, T, atau I, yang berlawanan dengan huruf bulat seperti S, O, atau Q, atau huruf runcing seperti A dan V, yang melampaui batas. Perlu dicatat bahwa tinggi tutup kurang dari tinggi maksimum jenis huruf.

Tinggi X

Tinggi X, juga dikenal sebagai ukuran korpus, adalah jarak antara huruf kecil "x baseline" dan garis tengah. Karena jenis huruf dengan x-height yang sangat besar memiliki lebih sedikit ruang putih di antara baris-baris huruf, ukuran ini dapat menjadi penting untuk keterbacaan. Karena banyak huruf memiliki bagian atas yang melambung atau membulat, mengukur bagian atas karakter datar seperti x, y, atau z lebih mudah, sesuai dengan namanya.

Ascender dan descender

Ascender adalah bagian dari huruf yang memanjang di atas tinggi x atau tinggi huruf, seperti batang huruf kecil b atau d. Descender adalah goresan vertikal ke bawah yang memanjang di luar garis dasar, seperti huruf kecil g atau p.

Berat

Ketebalan keseluruhan dari goresan huruf disebut sebagai bobot. Bobot dapat berkisar dari yang sangat ringan hingga yang sangat berat. Bobot yang paling terkenal adalah:

1. Ringan,
2. Biasa,
3. Sedang, dan
4. Tebal.

Pelacakan

Tracking adalah spasi di antara semua karakter font. Tracking yang dipilih dengan tepat dapat membuat salinan menjadi menarik secara visual. Spasi huruf, juga dikenal sebagai tracking, adalah penyesuaian yang konsisten terhadap spasi antar huruf dalam sebuah teks.

Kerning

Kerning adalah spasi yang ada di antara dua huruf tertentu. Hal ini berbeda dengan pelacakan karena tidak berlaku untuk semua karakter.

Memimpin

Spasi di antara dua baris teks dikenal sebagai leading.

Spasi putih

Dalam tipografi, spasi putih mengacu pada ruang di antara blok teks. Jika digunakan dengan benar, spasi putih dapat membuat konten lebih menarik dan meningkatkan keterbacaan.

Stroke

Garis lurus atau lengkung membentuk bagian utama huruf.

Serif

Sebuah elemen seperti goresan atau kaki yang terhubung ke ujung goresan utama beberapa jenis huruf. Font serif sering kali lebih mudah dibaca daripada font sans-serif karena "kaki" kecilnya memandu mata pembaca ke karakter berikutnya. Namun, karena ukurannya yang kecil, font ini mungkin tidak selalu dapat ditampilkan dengan baik di layar.

Sans serif

Jenis huruf yang tidak memiliki goresan atau elemen tambahan di bagian bawah huruf. Karena resolusi layar yang lebih rendah, sans serif sering digunakan untuk antarmuka digital. Seiring dengan kemajuan teknologi dan layar dengan resolusi yang lebih tinggi menjadi lebih umum, hal ini mungkin tidak lagi menjadi faktor penentu ketika memilih font.

Bagaimana tipografi dapat digunakan untuk meningkatkan pengalaman pengguna

Karena Tipografi mengandung begitu banyak elemen, banyak desainer mengabaikan disiplin ini karena menguasainya membutuhkan waktu dan latihan. Ingatlah bahwa tipografi yang baik adalah spesifik untuk format tertentu, dan kegunaan sama dengan keterbacaan. Mari kita bahas beberapa langkah penting untuk memastikan UI Anda berikutnya memiliki tipografi yang mudah dibaca yang menyampaikan suasana hati yang sesuai untuk teks Anda.

Hierarki

Ukuran teks memiliki dampak yang signifikan terhadap pengalaman membaca pengguna. Elemen hirarki harus digunakan untuk memisahkan blok dan meningkatkan komunikasi. Judul atau header, subjudul, dan teks tubuh terdiri dari hierarki tipografi dasar. Karena judul berada di bagian atas hierarki tipografi, maka ukurannya lebih besar dan lebih berat.

Ingatlah untuk memulai dengan ukuran font yang nyaman untuk teks tubuh Anda. Sebagai aturan umum:

• Untuk desktop, gunakan ukuran font 16 poin atau lebih tinggi untuk teks tubuh
• Untuk perangkat iOS, gunakan ukuran teks minimal 11 poin
• Untuk perangkat Android, gunakan setidaknya 14 poin untuk teks utama

Karena ukuran teks tubuh yang berbeda adalah hal yang umum, pilih jenis huruf yang bekerja dengan baik dalam berbagai ukuran.

Warna teks

Pemilihan warna juga penting. Warna dikaitkan dengan berbagai emosi serta hierarki visual. Oleh karena itu, sebaiknya gunakan warna yang berbeda untuk judul, teks tubuh, tautan, tombol, dan pesan kesalahan. Selain itu, ingatlah bahwa warna teks harus kontras dengan warna latar belakang; hal ini sangat penting untuk pengalaman membaca yang baik, dan meskipun terlihat jelas, masih banyak tombol yang tidak terbaca di luar sana.

Panjang baris

Perhatikan panjang baris teks. Tetapkan batas panjangnya agar tidak terlalu panjang dan mengganggu pengalaman membaca. Untuk menentukan panjang baris terbaik untuk sebuah teks, gunakan rumus sederhana berdasarkan ukuran huruf: kalikan dengan 30. Jadi, jika ukuran font Anda adalah 10px, panjang baris bacaan yang ideal adalah 300px.

Hindari dinding teks

Anda harus menghindari membuat "dinding teks" Dinding teks, juga dikenal sebagai efek dinding abu-abu, adalah satu blok teks yang tidak memiliki spasi kosong atau elemen desain lainnya. Dengan menyisipkan jeda paragraf pada interval yang sesuai, Anda bisa menghindari efek dinding abu-abu. Anda juga dapat menggunakan elemen desain berikut ini: gambar, kutipan, judul dan subjudul, serta poin-poin. Ketika bekerja dengan paragraf yang panjang, cobalah untuk menyertakan apa pun yang bukan teks dan memecah blok padat.

Pikiran akhir

Dengan panduan dan pengetahuan tipografi yang Anda miliki, Anda siap untuk mulai bereksperimen dengan jenis huruf, font, dan gaya untuk mencari pengalaman membaca yang ideal. Namun, satu peringatan terakhir adalah bahwa Anda dapat mengikuti semua panduan di atas dan masih mengabaikan beberapa aspek tipografi yang akan segera diketahui oleh rata-rata pengguna. Akibatnya, tahap akhir dari setiap iterasi desain teks adalah pengujian pengguna yang komprehensif.

Cari kelompok pengguna internet yang luas yang dapat memberikan umpan balik tentang keterbacaan teks Anda; menggabungkan masukan manusia ke dalam tipografi Anda akan memastikan bahwa situs web Anda mudah dibaca dan menyenangkan.