{"id":11102,"date":"2020-12-31T00:00:00","date_gmt":"2020-12-31T00:00:00","guid":{"rendered":"https:\/\/binus.ac.id\/binus-digital\/2020\/12\/31\/7-tips-to-help-improve-your-web-typography-skills\/"},"modified":"2024-09-24T02:20:15","modified_gmt":"2024-09-24T02:20:15","slug":"7-tips-to-help-improve-your-web-typography-skills","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/binus-digital\/2020\/12\/31\/7-tips-to-help-improve-your-web-typography-skills\/","title":{"rendered":"7 tips to help improve your web Typography skills"},"content":{"rendered":"

Pemahaman yang baik tentang typografi (lebih dari citra & warna menurut saya) sangat penting dalam mendesain Uls<\/i> yang kuat. Mengapa demikian? Karena sebagian besar dari apa yang Anda lihat di web<\/i> adalah berbasis konten, jadi dalam memiliki pemahaman tentang typografi dapat memungkinkan Anda untuk tetap mempertahankan perhatian pembaca, memberikan pengalaman pengguna yang jauh lebih baik serta memperkuat makna teks dari bacaan yang diberikan.<\/span><\/p>\n

Dengan artikel ini, menunjukkan kepada Anda beberapa cara yang tidak hanya akan memberi Anda pemahaman yang lebih baik, tetapi juga membuat Anda lebih percaya diri saat bekerja dengan jenis proyek baru Anda berikutnya.<\/span><\/p>\n

1. Gunakan skala jenis untuk menentukan satu set ukuran jenis huruf yang harmonis.<\/span><\/h4>\n

\"\"<\/p>\n

Menggunakan skala jenis untuk menentukan satu set ukuran font<\/i> dengan mudah, praktis tanpa ada pikiran apa pun dalam mengerjakan tugas anda. Sesuai denga namanya, skala jenis bekerja berdasarkan faktor skala. <\/span>Idenya adalah Anda mulai dengan ukuran font<\/i> (18px) dan mengalikan (atau membaginya) dengan faktor skala untuk mendapatkan ukuran font<\/i> baik dan lebih tinggi (contoh: H1, H2, dll) atau hierarki yang lebih rendah (misal: Teks, Tombol, dll). <\/span>Skala jenis akan membantu Anda menghasilan teks yang terlihat serasi dikarenakan ukurannya meningkat bahkan dapat pula menurun sepanjang skala tetap yang telah Anda tetapkan.<\/span><\/p>\n

2. Pilih panjang baris yang sesuai untuk teks Anda dan meningkatkan minat baca.<\/span><\/h4>\n

\"\"<\/p>\n

Bekerja dengan body text<\/i> dan mencoba menemukan panjang garis yang sesuai sehingga dapat mengembangkannya. <\/span>45 hingga 75 karakter dianggap sebagai panjang garis yang cocok dalam halaman 1 kolom, dengan 66 baris karakter (yang mencakup huruf & spasi) dalam memberi pusat perhatian atau minat baca. <\/span>Tentu saja ukuran font<\/i> & tinggi garis berperan dalam menarik minat baca, tetapi untuk panjang baris, pertahankan pada pedoman 45 hingga 75 karakter.<\/span><\/p>\n

3. Kurangi jarak huruf pada judul anda untuk memberikan pandangan atau space<\/i> yang lebih baik.<\/span><\/h4>\n

\"\"<\/p>\n

Mengurangi spasi huruf pada body text<\/i> yang panjang? Dari saya tentu saja \u201ctidak\u201d, <\/span>Tapi untuk judul jawaban dari saya \u201cya!\u201d<\/span><\/p>\n

Judul Anda kemungkinan besar akan jauh lebih besar daripada body text<\/i> yang lain. Dari yang terlihat, jarak antara huruf terkadang tempak lebih besar, inilah yang tidak selalu Anda inginkan saat Anda mencari nilai atau estetika yang sempurna. <\/span>Gunakan skala kecil dalam mengurangi jarak-huruf (letter-spacing<\/i>) sehingga membuat judul Anda lebih seimbang, mudah dibaca, dan secara umum lebih menyenangkan dan enak dipandang.<\/span><\/p>\n

4. Gunakan saja satu jenis huruf dalam desain Anda.<\/span><\/h4>\n

\"\"<\/p>\n

Tidak menjadi suatu masalah untuk memilih satu jenis huruf saat membuat karya seni Anda dan ada kalanya dengan melakukan hal tersebut dapat membantu Anda untuk menghasilkan hasil yang lebih kuat dan konsisten. <\/span>Abaikan pilihan \u201cselalu gunakan dua jenis huruf, kuantitas yang minimum, huruf yang berdempetan\u201d. Gunakan kombinasi bobot, ukuran dan warna, Anda pun tetap dapat memberikan hasil yang dapat diterima dengan sempurna.<\/span><\/p>\n

5. Gunakan \u201csuperfamilies<\/i>\u201d disaat Anda mengkombinasikan font <\/i>yang bagus tapi cepat.<\/span><\/h4>\n

\"\"<\/p>\n

Saat Anda ingin meningkatkan keterampilan dalam menggabungkan jenis huruf dan Anda dihadapkan dengan 1000-an jenis, pilihlah superfamilies. <\/i><\/span>Superfamilies<\/i> adalah kumpulan typeface<\/i> dengan tampilan berbagai jenis Serif<\/i> dan Sans Serif<\/i> dengan tujuan mereka dibuat adalah untuk memberikan harmonis visual<\/i> yang erat.<\/span><\/p>\n

6. Gunakan tes x-height<\/i> atau Il1 untuk menentukan minat baca terhadap typefaces<\/i> yang Anda pilih.<\/span><\/h4>\n

\"\"<\/p>\n

Pada dasarnya, x-height<\/i> adalah tinggi dan huruf kecil \u201cx\u201d relatif terhadap huruf besat (yaitu; T) dari jenis huruf yang sama. Jika font<\/i> Anda memiliki ukuran \u201cx-height<\/i>\u201d yang besar, terlebih saat digunakan di long-form<\/i> dari body text<\/i>. <\/span>Cara lain dalam menentukan hal yang dapat dibaca dari suatu jenis huruf dan untuk mempersempit hal-hal bila Anda memiliki beberapa jenis huruf yang tidak dapat Anda putuskan adalah dengan melakukan Il1 (penghargaan untuk Jessica Hische untuk tips ini).<\/span><\/p>\n

Disini Anda membandingkan 3 karakter dari jenis huruf tertentu, huruf besar \u2018i\u2019 (I), huruf kecil \u2018L\u2019 (l) dan angka satu (1) dapat kita lihat perbedaan tampilan bentuk huruf satu sama lain sehingga dapat menentukan hal yang dapat dibaca, terutama disaat bekerja dengan jenis huruf Sans Serif<\/i>. <\/span>Selalu menargetkan pada hal yang dapat dibaca dengan baik, baik melalui x-height<\/i>, Il1<\/i> atau bahkan keduanya disaat Anda memilih jenis huruf pada body text.<\/i><\/span><\/p>\n

7. Atur tinggi garis berdasarkan jenis huruf x-height<\/i>.<\/span><\/h4>\n

\"\"<\/p>\n

Jenis huruf dengan x-height <\/i>yang berbeda membutuhkan pengukuran tinggi garis yang berbeda untuk mencapai jenis pemisah yang tepat antar baris teks. Meskipun memungkinkan Anda memiliki dua jenis huruf dengan ukuran font<\/i> yang sama (contoh: 18px) x-height<\/i> atau tinggi x-nya dapat sangat berbeda dan hal ini berperan besar dalam memilih jenis tinggi garis untuk diterapkan. <\/span>Sebagai contoh Merriweather<\/i> adalah jenis huruf dengan x-height<\/i> yang besar, untuk itu memerlukan tinggi garis yang lebih besar, sedangkan seperti Mr Eaves Sans<\/i> dengan x-height<\/i> yang kecil memerlukan lebih sedikit tinggi garis untuk mencapai minat baca yang optimal serta dapat dibaca.<\/span><\/p>\n

Artikel merupakan terjemahan dari artikel asli yang berjudul \u201c7 tips to help improve your web Typography skills<\/a>\u201d oleh Marc Andrew<\/a> yang diterbitkan pada situs medium.com<\/a><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Pemahaman yang baik tentang typografi (lebih dari citra & warna menurut saya) sangat penting dalam mendesain Uls yang kuat. Mengapa demikian? Karena sebagian besar dari apa yang Anda lihat di web adalah berbasis konten, jadi dalam memiliki pemahaman tentang typografi dapat memungkinkan Anda untuk tetap mempertahankan perhatian pembaca, memberikan pengalaman pengguna yang jauh lebih baik […]<\/p>\n","protected":false},"author":10,"featured_media":11103,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-11102","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/comments?post=11102"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11102\/revisions"}],"predecessor-version":[{"id":11623,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11102\/revisions\/11623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media\/11103"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media?parent=11102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/categories?post=11102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/tags?post=11102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}