Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Typography

Menemukan Spot Terbaik Mobile Typography

by
Read Time:7 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Zadip (you can also view the original English article)

Mari kita serius tentang mobile typography; kita semua tahu bahwa mobile besar, dan kita juga bisa sepakat bahwa typography super penting dalam desain. Tipografi adalah elemen desain dasar; secara pribadi, saya lebih suka untuk memulai dengan sebagai cara membuat desain apapun karena penopang untuk mengatur baik untuk sisa desain. Jadi mari kita bicara tentang bagaimana kita dapat membuat typography mobile kita yang terbaik yang dapat.

Layar Mobile adalah Restrictive

Ketika merancang untuk mobile, boleh dibilang musuh terbesar kita adalah ukuran fisik layar. Beberapa smartphone super kecil, seperti iPhone tua, tetapi masih banyak dipakai 4/4S. Menurut kesatuan, 15.9% dari orang-orang masih menggunakan model kuno ini. Di AS angka itu diterjemahkan menjadi hampir 24 juta orang. Ya, itu cukup banyak untuk sebuah layar yang kecil. Kemudian kami juga memiliki layar yang lebih besar seperti iPhone baru 6 Plus, Galaxy Catatan 4 atau Nexus 6. Batas dalam dirinya sendiri, adalah kenyataan bahwa ada berbagai besar dalam ukuran layar karena apa yang terlihat baik pada iPhone 4 tidak akan selalu terlihat baik pada iPhone 6 Plus.

Anda mungkin ingin melihat analytics Anda dan melihat apa perangkat terpopuler situs Anda, mulailah menyesuaikan dengan itu.  Namun, secara umum diterima bahwa pendekatan perangkat-agnostic akan melayani Anda lebih baik dalam jangka panjang.

Lihat pada gambar di atas untuk mengetahui bagaimana sama ukuran teks menuliskan pada masing-masing perangkat. Aku bahkan benar-benar tidak bisa cocok "Heading 1" pada iPhone 5S, menunjukkan bahwa responsif tipografi dimulai dengan ukuran layar dalam pikiran.

Hambatan yang Lebih Mungkin 

Beberapa hambatan lain saat merancang untuk ponsel cerdas meliputi pencahayaan di lingkungan pengguna, serta seberapa dekat mereka memegang ponsel ke wajah mereka.

Mari kita mulai dengan latte. Karena kami menggunakan telepon ditangan kita, kita cenderung untuk menahan mereka sepanjang lengan atau bahkan lebih dekat lagi ke wajah kita. Ini berarti bahwa jenis dapat lebih kecil pada telepon karena jarak antara layar dan mata kita lebih pendek daripada laptop atau desktop monitor.

Mempunyai kemampuan untuk mengurangi ukuran font juga berarti bahwa kami dapat menyertakan teks dalam jumlah yang sama ruang, memberi kita lebih menenangkan "tindakan". Pada gilirannya, ini membantu mengurangi ukuran layar yang lebih kecil, tapi hanya sedikit. Anda dapat melihat ini dalam tindakan dalam gambar di bawah.

Jenis yang lebih kecil untuk layar yang lebih kecil

Kontras

Orang menggunakan smartphone mereka sepanjang waktu, di mana-mana. Kereta bawah tanah, di Taman, di sofa atau tempat tidur mereka. App atau website Anda dapat digunakan di berbagai lingkungan dengan pencahayaan yang berbeda, yang berarti Anda juga perlu menyadari kontras. Membaca di Taman mungkin-bahkan dengan sinar matahari langsung – jika kontras teks cukup tinggi terhadap latar belakang. Dalam skenario ini, memiliki teks yang lebih besar juga membantu. Hal ini kurang diperlukan untuk fokus pada kontras jika pembacaan sedang dilakukan di kereta bawah tanah, mana pencahayaan tidak boleh lebih , atau pada malam hari di tempat tidur.

Gizmodo menerbitkan sebuah artikel yang rinci tentang perangkat yang mobile (termasuk smartphone dan tablet) mendominasi di luar ruangan. Mereka tampil membandingan warna mereka dalam kaitannya dengan berbagai pilihan sinar matahari. Ternyata Samsung Galaxy S mengungguli iPhone 4 di sinar matahari langsung, yang merupakan terburuk dari yang terburuk pencahayaan di luar ruangan. Check out artikel lengkap jika Anda sedang mencari rincian lebih lanjut tentang ini.

Maksud saya sederhana, ada begitu banyak bagian yang bergerak ketika datang untuk merancang untuk dibaca pada perangkat mobile. Mengenal pengguna sehingga Anda dapat menentukan apa yang terbaik dari pengalaman mereka seperti apa, mulai dengan jenis telepon mereka dan berakhir dengan lingkungan mereka.

Body teks dan Headlines

Ada banyak tutorial di luar sana yang membantu Anda menentukan pixel tertentu teks Anda harus didasarkan pada rasio emas atau hanya eyeballing yang terlihat baik. Mengetahui yang baik typography skala untuk desktop mudah. Hal ini sebenarnya cukup mudah untuk melakukannya untuk perangkat mobile juga. Typecast memiliki artikel indah merinci bagaimana Anda bisa pergi tentang menemukan pengukuran untuk tipografi ponsel dan komputer Anda: lebih Modern skala untuk tipografi Web. Artikel dengan jelas menjelaskan mengapa typography kebutuhan untuk menjadi responsif. Tapi aku ingin mendapatkan lebih rinci daripada hanya menyatakan "Orang-orang cenderung untuk membaca berbeda pada ponsel" - itu jauh lebih dari itu!

Kalian tahu, mobile adalah media yang paling tidak tetap kami sudah menangani sebagai desainer. Seperti yang saya sebutkan sebelumnya, orang membaca pada ponsel mereka di mana-mana, di setiap perubahan lingkungan. Terbaik mengoptimalkan pengalaman membaca mereka, kita perlu memahami psikologi apa yang sebenarnya membuat untuk pengalaman membaca yang baik.

Perhatian utama Anda: Body Teks

Saya ingin berpikir bahwa merancang terbaik pengalaman membaca untuk mobile dimulai dengan body teks sempurna. Font apapun yang Anda pilih perlu untuk memastikan hal itu cukup fleksibel untuk menahan ukuran layar yang berbeda dalam ukuran font yang sama dan masih terlihat bagus. Jika Anda memilih Helvetica Neue untuk keluarga font Anda Anda harus memastikan akan terlihat baik pada iPhone 4s di 16px maupun di Nokia dan telepon galaksi.

Juga mempertimbangkan berat font ketika Anda memilih font, seperti beberapa telepon akan menampilkan teks biasa, tebal atau cahaya berbeda kepada orang lain.

Perhatian utama Anda yang lain: judul

Itu benar, judul sama sama pentingnya! Anda memiliki lebih kreatif kebebasan dengan judul seperti mereka dapat mengorbankan beberapa pembacaan untuk dampak, tetapi pertimbangkan skala mereka terlalu. Judul, seperti yang ditunjukkan pada gambar pertama dengan ukuran layar ponsel, ini jauh lebih cenderung menjadi terbaca karena menjadi berukuran besar pada layar kecil. Pos besar yang juga membuang-buang ruang, karena Anda bisa mencegah pengguna dari mendapatkan ke daging dari konten.

Pentingnya vertikal irama

Satu hal yang perlu diingat ketika menyempurnakan teks tubuh Anda adalah vertikal irama. Vertikal irama adalah istilah yang merujuk kepada vertical penjarangan dan keselarasan tipografi dan elemen lainnya pada halaman. Irama istilah menandakan pola berulang. Baik vertikal irama memastikan pengalaman membaca mudah karena memungkinkan untuk tata letak seimbang yang mudah memandu pembaca mata.

Diambil dari http://modulargrid.org

Apakah dasar longgar atau ketat, konsistensi adalah apa paling penting. Tetapi penting untuk menyadari bahwa baseline pada perangkat mobile dapat mencerminkan ukuran layar kecil. Jangan takut untuk memperketat hal, terutama jika Anda telah berkurang ukuran font, tapi mengetahui ritme vertikal yang nyaman untuk memastikan bahwa membaca halus untuk pembaca Anda.

Jika Anda memerlukan bantuan untuk memulai dengan mencari tahu pengukuran terbaik untuk Anda-vertikal irama, Andre Morton memiliki generator vertikal irama di blog-nya.

Mencakup dasar-dasar tipografi Anda

Ada beberapa aturan praktis saya ingin berbagi dengan Anda ketika datang untuk merancang tipografi pada umumnya, tetapi yang berlaku terutama untuk tipografi responsif dan mobile.

Jangan mengubah highlight

Anda tidak pernah harus menyesuaikan highlight untuk situs web atau aplikasi apapun. Ini merupakan proses yang sulit dan  Kualitas font akan memiliki highlight juga tahu, dan jika Anda telah memilih font tidak memiliki baik highlight, membuangnya.

Memastikan sebuah kain yang jelas

Ketika tidak ada kain yang jelas di sisi kanan atau kiri teks Anda maka itu mungkin juga dibenarkan (dan teks tidak boleh dibenarkan di web). Kain yang jelek akan menyebabkan lubang dan celah istirahat di ruang putih; lebih mudah untuk membaca dan memindai teks ketika ada kain yang jelas.  Bagaimana mematahkan teks Anda pada ukuran layar yang berbeda? Memperbaiki bisa sangat sederhana penyesuaian yang baik mengambil beberapa piksel dari teks Anda berisi elemen, atau menambah sedikit itu.

Mengoptimalkan link Inline

Tidak ada yang lebih menipu sebagai mencoba untuk memasuki area kecil pada telepon dan tidak mampu karena terlalu kecil – atau lebih buruk lagi, menekan pada sesuatu yang lain sebagai gantinya. Mungkin saran terbaik di sini adalah memiliki beberapa dari mereka mungkin!  Ketika ada hanya satu link inline lebih mudah memanfaatkan itu, karena tidak ada lagi sengaja membuka. Selanjutnya, pastikan link jelas. Ini dapat dilakukan dengan berbagai cara seperti membuat tautan tebal, atau bersandar pada pola garis bawah standar Kadang-kadang hanya mengubah warna tidak akan cukup jika kontrasnya terlalu rendah (ingat bagaimana kita berbicara tentang warna layar dan masalah pencahayaan?) 

Terakhir, pastikan bahwa tautan sebaris memiliki lebih banyak area sentuhan daripada yang dirasakan.  Ini dapat dicapai dengan menerapkan display: inline-block; untuk mengaitkan elemen, tetapi pastikan bantalan apa pun atau padding ekstra line-height yang Anda terapkan tidak mengubah teks utama. 

Penyelesaian

Merancang tipografi untuk ponsel memiliki banyak bagian yang harus Anda ketahui.  Saya harap postingan ini memberi Anda wawasan tentang cara meningkatkan desain untuk seluler.  Beri tahu kami kiat dan trik Anda sendiri di komentar! 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.