Cara Menentukan Line Hight Pada Sebuah Desain - Revesery -->

Cara Menentukan Line Hight Pada Sebuah Desain

Cara Menentukan Line Height Pada Sebuah Desain - "kak gimana cara nentuin angka line height di desain kita?"

aku sering dapet pertanyaan kaya gitu, bahkan aku sendiri dulu bingung nentuin angka brp yg tepat, tapi ...

ternyata ada best practice dan cara ngakalinnya

emang agak sedikit tricky,

Cara Menentukan Line Hight Pada Sebuah Desain

karena nentuin line height itu jg tergantung dari jenis typeface yg kamu gunakan. 

font size dan line weight juga berpengaruh ketika set line height untuk teks di desain kita.

contohnya gambar di bawah ini,

ketika ada teks panjang, dengan ukuran font misal 24px untuk nentuin line-height atau jarak antar baris kalimat cukup tricky

yg kubaca, paling umum 1.5 atau 150% satuan ini bisa juga kamu pake dengan px, rem, em

nah, dari kedua contoh ini (1/2)

keliatan bedanya kan? 

kalo kamu set line height 1.3 alias 130% (32px) itu terlalu dempet tulisannya. 

dan mata manusia agak sulit untuk transisi dari satu kalimat ke kalimat lainnya kalo teks itu panjang dan ga ada "ruang bernafas" (2/2)

tapi kalo kamu set lebih atau di atas 1.5 sampe mungkin 1.7 itu masih bisa, cuman

keliatannya jarak antar teks jd berjauhan, apalagi kalo kamu set ke 200% 

maka dari itu ...

untuk nentuin ini butuh proporsi yg tepat, mulai dari:

• brp panjang karakter teksnya

• font typefacenya (sans/sans-serif)

• font size dan line-lengthnya

kalo kondisi teks-nya panjang dan lebar kaya contoh di gambar ini,

kamu butuh adjust set line height lagi untuk teks yg "wider" atau panjang dengan teks yang "narrow" mirip column teks pd koran.

terus gmn cara kita biar paham nentuin line-height ini?

Ada tiga tips yg bisa kamu praktekan:

• font yg kecil = line height besar (begitu jg sebaliknya)

• semakin gelap teksnya maka semakin butuh line height yg agak besar angkanya

supaya users atau pembaca ga mengulangi baris kalimat yg sama ketika membaca, sprt hierarki pd teks

Sekian Cara Menentukan Line Hight Pada Sebuah Desain


Ada pertanyaan? Silahkan komentar

Posting Komentar

Revesery.com

Revesery.com

download file ini untuk mencoba: 

Revesery.com

Revesery.com

 Download ==>>