it-swarm.asia

Menggunakan dua font berbeda pada aplikasi seluler

Di aplikasi seluler saya, saya menggunakan dua font; MaaxRounded untuk h1-h6 dan Roboto untuk paragraf dan teks deskripsi.

Rekan kerja saya bertanya mengapa saya menggunakan dua font, dan pada awalnya saya tidak punya jawaban. Setelah memikirkannya, saya menjawab bahwa itu bagus untuk kontras dan hierarki yang lebih baik. Rekan kerja saya, bagaimanapun, bersikeras bahwa saya harus menggunakan hanya satu font.

Bagaimana menurut Anda memiliki dua font pada aplikasi seluler? Apakah lebih baik dari satu atau tidak?

Berikut beberapa contoh halaman yang saya buat:

fonts

16
Agera Thedo

Anda harus menghindari menggunakan dua font berbeda karena alasan berikut:

  • Anda membuat kontras yang tidak perlu, yang membuat kekacauan. Hirarki visual sudah ditentukan oleh perbedaan ukuran dan berat font.

  • Membaca dengan satu font lebih cepat daripada membaca dengan dua font yang berbeda, sebuah fenomena yang disebut penyetelan font :

Penyesuaian font (FT) terjadi ketika pengamat mengenali urutan huruf yang disajikan dalam font yang sama lebih cepat dari pada font yang berbeda. ... Dengan sejumlah tugas yang berbeda, Sanocki (1987a, 1987b, 1988, 1991) mempelajari pengenalan huruf dalam font biasa (semua huruf dalam font yang sama) atau string font non-Word campuran (font bergantian dari satu huruf selanjutnya). Pengenalan huruf berjalan lebih efisien dalam font biasa daripada di string font campuran, menunjukkan bahwa informasi font yang tidak relevan dengan tugas tetap dikodekan oleh pengamat. Kami akan menyebut fenomena ini di `font tuning '(FT).

13
DesignerAnalyst

Memiliki dua font, satu untuk header dan satu untuk teks tubuh, diterima secara umum. Jangan gunakan lebih dari dua font. Tiga adalah kerumunan.

Yang penting bagi Anda adalah untuk membuat hierarki visual. Anda dapat melakukan ini dengan memiliki kontras antara ukuran font, berat dan warna untuk header dan teks tubuh Anda. Jika Anda menemukan bahwa menggunakan satu font untuk keduanya tidak menciptakan kontras yang cukup, Anda dapat menggunakan font lain untuk header untuk membuat lebih banyak kontras.

Dalam hal ini saya pikir menggunakan Roboto untuk header dan tubuh baik-baik saja.

27
Nick Groeneveld

Ini pasti umum dengan kedua desain menggunakan kombinasi tipografi (biasanya 2; satu untuk header dan satu untuk tubuh), dan kadang-kadang hanya 1 jenis huruf. Saya tidak bisa mengatakan saya telah menemukan penelitian khusus yang menunjukkan apakah yang satu lebih baik dari yang lain, saya kira itu tergantung pada gaya yang Anda coba sampaikan (citra merek perusahaan mungkin memainkan peran penting di sana juga; kadang-kadang ada juga sudah ada pedoman merek/pedoman gaya yang perlu diikuti).

Namun ada beberapa tautan yang mungkin berguna:

7 Aturan Emas untuk Menggabungkan Font untuk Seluler

  1. Buat itu mudah dibaca
  2. Menetapkan Hirarki Visual
  3. Pertimbangkan Pemirsa
  4. Buat Kontras
  5. Gunakan Font dari Keluarga atau Desainer yang Sama
  6. Batasi Jumlah Font
  7. Jangan Lupa Mengujinya

Praktik Terbaik untuk Menggabungkan Jenis Huruf (Majalah Smashing) :

  • Cobalah mencocokkan jenis judul Sans-Serif dengan jenis tubuh Serif
  • Hindari klasifikasi serupa (jangan gunakan 2 slab tipografi atau 2 tipografi terkondensasi)
  • Tetapkan peran yang berbeda untuk setiap jenis huruf/font
  • Bobot font kontras
  • Buat berbagai warna tipografi
  • Jangan mencampuradukkan suasana hati
  • Kontras berbeda dengan netral (bukan dengan font khas lain)
  • Hindari kombinasi yang terlalu berbeda (mis. Sempit & diperluas)
  • Buat semuanya tetap sederhana (coba 2 tipografi saja)
  • Ukuran titik bervariasi

Ada juga sisi yang lebih praktis (dengan contoh kode untuk web) dari Donny Truong (secara khusus saya tautkan ke bagian dengan menggabungkan tipografi, tetapi seluruh buku direkomendasikan) .

6

Bagi saya (bukan perancang yang berdagang, tapi saya sudah melakukan beberapa) MaaxRounded tidak menambahkan apa-apa bila dibandingkan dengan versi all-Roboto (tapi bodinya terlihat sangat longgar di MaaxRounded). Dengan kontras dalam ukuran dan berat, menemukan perbedaan font antara header dan body - untuk mengutip contoh Anda sendiri - nitpixeling. Bandingkan "InVision" dalam judul dan tubuh contoh tengah. Bahkan pada ukuran yang Anda tunjukkan (lebih besar dari yang akan dilihat banyak pengguna) itu halus.

Jadi pengguna Anda mengunduh MaaxRounded tanpa manfaat UX, karena itu tidak menambah perbedaan pada perbedaan yang ada

4
Chris H

Anda sudah memiliki jawaban untuk menyatakan itu adalah keputusan desain yang benar-benar valid yang mungkin (atau mungkin tidak) sesuai untuk aplikasi Anda.

Biarkan saya mengambilnya dari sudut pandang yang berbeda dan menyoroti sesuatu yang lain yang juga harus Anda pertimbangkan untuk aplikasi seluler: waktu pengunduhan.

Jika Anda membutuhkan font untuk <h1>-<h6> maka ada kemungkinan Anda membutuhkan Normal, Normal + Miring , Berani, Tebal + Miring varian. Secara pribadi saya juga sering menggunakan varian Light tetapi mungkin bukan kasus Anda. Bahkan dengan asumsi Anda hanya memerlukan karakter bahasa Latin (bahkan Latin Extended) ini adalah unduhan 1 Mb (lebih atau kurang). Untuk aplikasi seluler (di mana kecepatan Internet tidak selalu baik dan/atau bervariasi di berbagai wilayah dan negara) maka itu mungkin menjadi masalah. Dengan cara ini Anda juga memaksa pengembang/desainer untuk menangani FOUT (yang untuk 1 Mb dengan koneksi kecepatan rendah mungkin lebih dari satu flash ).

Singkatnya: lakukanlah jika manfaatnya cukup baik tetapi pertimbangkan kelemahannya. Saya tidak bisa mengatakan apakah ini masalah atau tidak: apakah ini aplikasi LOB dengan basis pengguna yang stabil? Apakah ini situs web tempat sebagian besar pengunjung datang dari Google? Apakah ini sebuah aplikasi yang sebagian besar digunakan oleh para pelancong (kemudian dengan koneksi data roaming?) Agar benar-benar mobile (dan benar-benar pengguna ) ramah Anda mungkin perlu mengorbankan beberapa kebebasan berekspresi Anda.

3
Adriano Repetti

Jika Anda ingin membuat perbedaan antara header & teks badan maka Anda dapat mencoba dua font pada halaman atau dalam hal web "font-pairing" . Pilih font apa yang paling berfungsi. Semoga ini bisa menyelesaikan masalah. Beri tahu saya jika ada pertanyaan.

Untuk referensi: https://www.elegantthemes.com/blog/tips-tricks/font-pairing-principles

https://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706

1
NB4

Salah satu aturan utama desain utama mengatakan bahwa Anda dapat menggunakan dua font untuk desain yang sama: masing-masing harus dari keluarga yang berbeda untuk membuat kontras. Tapi waspadalah, hanya dua.