FONT TIPS
Dwinawan Hariwijaya
Jul 07, 2021
• • •
Beberapa tips penggunaan font pada design User Interface
• • •
1. Karakter
Ketika memilih font yang akan dipakai, jangan mempertimbangkan dari target market nya, tetapi mempertimbangkan dari branding atau karakter yang ingin dibangun oleh produknya.
Agar lebih jelas bagaimana maksudnya coba kita lihat website duolingo dibawah ini
Duolingo adalah sebuah website untuk belajar bahasa asing. Tampilan nya Lucu, Imut, Menggemaskan. Apakah Duolingo khusus dibuat untuk anak-anak? Tentu tidak.
Lalu kenapa Duolingo memilih menggunakan font yang chubby dan terlihat imut-imut seperti itu? Karena menyesuaikan dengan branding produknya.
Branding yang dibangun oleh Duolingo adalah Lucu dan Menyenangkan. Membuat orang orang yang hendak mencoba belajar menjadi merasa senang dan nyaman.
Duolingo memiliki maskot burung hantu yang sangat lucu dan akan memandu kita dalam belajar bahasa asing. Itulah kenapa pemilihan font nya juga yang terkesan lucu dan imut.
• • •
2. Kontras
Jika kamu ingin memadukan 2 jenis font maka pilihlah yang bentuk nya berbeda. Apa alasan nya? Kontras. Karena kalau bentuknya hampir sama dan malah terlihat tidak ada beda nya ya buat apa pake 2 jenis font? hehe...
Mari kita lihat gambar dibawah ini. Ini adalah design yang menggunakan 2 jenis font yang terlihat berbeda.
Teks pada judul menggunakan Playfair Display dan teks lain nya menggunakan Poppins. Terlihat kontras yang begitu jelas.
Mari kita lihat jika menggunakan 2 jenis font yang terlihat sama.
Teks pada judul menggunakan Mulish dan teks lain nya menggunakan Poppins. Kontras nya tidak terlalu terlihat. Huruf "a" nya saja hampir mirip.
Terasa agak sia-sia jika menggunakan 2 jenis font tetapi kedua nya mirip, mending pakai 1 font saja kalau gitu.
• • •
3. Text Width
Jangan menaruh teks terlalu panjang seperti dibawah ini karena membaca nya akan susah. Mata harus membaca terus sampai ke ujung kanan, setelah itu musti balik lagi ke ujung kiri.
Batasi lebar area teks agar mata nyaman dalam membaca teks nya. Seperti gambar dibawah ini
• • •
Seberapa suka kamu dengan artikel ini?
Landing Page Preface
Apa itu landing page dan fungsi nya