Tips memilih fonts untuk UI Design
Kenapa obrolan fonts penting dalam User Interface Design? Karena sejatinya 95% konten yang ada di dalam Internet dalam bentuk media tulisan. Itu jadi alasan kuat kenapa UI Designer (atau Product Designer secara luas) harus memiliki pemahaman akan Typography yang kuat. Dan ini jadi alasan yang bagus kenapa kamu harus mempelajari itu dari sekarang.
Sebelum membahas tips and tricks, tahukah kamu istilah Font dan Typeface suka ketuker tuker? Apakah 2 hal itu sama, apa jangan jangan yang kita sebut selama ini salah?
Friend: Bro, desain lu pake font apa bro? Keren.
Me: Circular bro. Tapi itu bukan font bro, itu Typeface.
Yeap. Typeface itu beda dengan Font sodara2. Yang temen kalian suka bilang font, itu sebenernya typeface 🤦🏻♀️.
Typeface merujuk pada nama kolektif fonts family (Times New Roman, San Fransisco, Lato, dll), kalau font itu merujuk pada nama font yang spesifik dengan width, weight, dan style nya (Times New Roman Regular, Italic, Bold, dll).
Cus ke obrolan utama,
Kita sempat menanyakan ke 1500+ audience, tentang cara mereka mendesain interface. Salah satunya pertanyaan berikut.
Berapa jumlah typeface yang ideal dipakai dalam desain interface?
Mayoritas menjawab maksimal 2. Yang mana… somehow benar. Walaupun demikian kita harus selalu usahakan jumlah paling minimal dalam pemakaian typeface.
- iOS pakai 1 (San Fransisco),
- Windows pakai 1 (Segoe UI),
- Android pakai 1 (Roboto, dan akhir2 ini transisi ke Google Sans).
4 Tips memilih typeface untuk desain interface?
Tips praktis yang bisa langsung diterapkan saat belajar mendesain produk digital.
Typo UI Tips #1
Pilih typeface dengan variasi weights yang beragam.
Kenapa butuh banyak variasi weights? Karena kita nanti butuh ini untuk membangun kontras dan juga hirarki visual yang memudahkan mata kita untuk melihat dan membaca elemen2 yang ada dalam suatu halaman (baik app maupun web).
Kan bisa aja pake typeface lain?
Ya bisa, tapi itu akan memperumit komposisi desain mu. Ingat, semakin banyak detail yang tidak perlu, sekecil apapun detail itu, akan memperumit kualitas akhir UI Desain kita. Maka dari itu, setiap ada elemen baru dalam kompisisi kita, selalu tanyakan, ini elemen penting atau ga ya, bisa ga saya hapus atau kurangi aja.
Typo UI Tips #2
Pilih typeface dengan legibility yang tinggi.
Maksudnya mudah dibedakan antar huruf nya. Ada kan font yang I besar ama L kecil nya keliatan sama. Nah jangan pake itu. Ada juga yang kalo kita liat di kartu2 undangan, hurufnya ampe meringkil ringkil begitu, nah jangan pake itu juga untuk interface design (kecuali emang kamu mendesain kartu undangan digital 🙂).
Legibility diartikan sebagai tingkat kemudahaan suatu typeface untuk dibaca. Semakin mudah setiap huruf dibedakan dengan huruf lainnya, semakin baik typeface tersebut untuk dipakai.
Typo UI Tips #3
Pilih typeface yang bekerja dengan baik dalam ukuran yang berbeda.
Banyak komponen UI butuh teks elemen dalam ukuran berbeda; field label, button copy, section header, dll. Kalau typeface nya bagus di ukuran besar doang tapi saat ke label kecil (<12pt) dia ga kebaca, mending pilih yang lain.
Typo UI Tips #4
Good designers treat text as a content, great designers treat text as an UI.
Maksudnya segala prinsip UI harus dibebankan juga terhadap teks. Baik penerapan nya dalam hirarki visual, balance, positions dan juga struktur. Apalagi banyak teks yang berperan sebagai elemen fungsional (text link, button copy).
Next bakal kita kasih font2 terbaik favourite yang sering dipakai untuk UI design, baik untuk Dashboard, Mobile App, atau Landing pages.
Follow Medium ini untuk dapet update2 selanjutnya.
Dan follow juga Instagram kita @halodesigners untuk belajar bersama UI, UX Design dan Research bareng temen2 yang baru memulai dan profesional lainnya. Sstt.. kita sering bagi2 tips dan mentoring desain gratis loh 🤐.
Penasaran dengan asal mula teks dalam UI dan bagaimana cara 👀 mata kita membaca tulisan, kalian bisa baca ulasan panjang penuh ilmu ini:
