it-swarm.asia

Bagaimana Anda memilih font untuk ruang yang sangat terbatas, mis. Akan cocok dengan teks yang paling READABLE di ruang terkecil?

Saya sering memiliki ruang yang sangat terbatas saat membuat laporan dan dasbor untuk pengguna. Saya biasanya menggunakan Arial, atau Arial Narrow, tetapi UI bukan bidang keahlian saya, jadi saya ingin tahu, bagaimana Anda menentukan font yang optimal untuk menyesuaikan teks yang paling mudah dibaca di ruang terkecil?

Berikut ini sebuah contoh: Ingatlah ini hanyalah sebuah contoh, karena ada banyak kali ruang terbatas, seperti ketika Anda perlu memeras satu juta kolom ke dalam laporan, dll.

Chart with limited space

114
richard

Itu sangat tergantung pada banyak faktor seperti apa frekuensi karakter tertent yang Anda harapkan dan font apa yang tersedia untuk Anda.

Saya melakukan yang belum sempurna dengan membuat program yang mengulangi semua font yang tersedia yang saya instal pada kotak Windows saya pada saat itu dan mencetak garis yang berisi setiap karakter ascii yang dapat dicetak ke layar di masing-masing font ini. Saya mengulangi tes juga dengan ukuran font yang berbeda.

Hasil yang saya ingat adalah bahwa Segoe UI dan Tahoma adalah yang terbaik sehubungan dengan pemanfaatan ruang dan keterbacaan untuk keperluan UI pada ukuran 10pt dan 9pt. Dalam jangka pendek kami memilih Tahoma karena Segoe UI tidak tersedia secara bebas untuk sistem operasi di bawah Windows Vista. Jika Anda tidak perlu mendukung Windows XP atau lebih tua OS Windows atau OS non Windows lainnya maka saya pasti akan pergi dengan Segoe UI kalau tidak saya akan pergi dengan Tahoma jika tersedia dan jika semua lain gagal coba Verdana. Lihat daftar ini untuk barisan font Windows yang tersedia serta informasi tentang penggunaan terbaik masing-masing.

Perlu diingat juga bahwa mulai dengan Windows Vista Saya percaya, Microsoft sekarang merekomendasikan untuk menggunakan font 9pt daripada font 10pt untuk elemen UI karena font Sego UI menampilkan jauh lebih jelas daripada font lain dengan resolusi rendah terutama pada display panel datar.

Bergantung pada platform apa yang Anda kembangkan, Anda mungkin juga ingin melihat memodifikasi metrik font jika memungkinkan. Dalam. NET dengan WPF saya ingat ada sedikit cara untuk memodifikasi bagaimana teks diberikan untuk memungkinkan kondensasi ruang antara karakter dan untuk membuat karakter individu lebih sempit. Menggunakan teknik jenis ini Anda dapat tetap menggunakan font apa pun yang Anda suka dan hanya Tweak rendering untuk mendapatkan hasil yang Anda butuhkan.

Berkenaan dengan contoh grafik khusus yang Anda berikan: untuk grafik khusus ini, saya sarankan untuk memutarnya sehingga teks yang paling mungkin dibaca adalah horizontal untuk bacaan yang lebih alami. Saya juga akan menempatkan nomor sehingga di dalam setiap batang grafik batang ketika itu akan cocok dengan warna yang menonjol terhadap warna latar belakang apa pun yang ada sehingga menambah ruang untuk hal-hal lain seperti label. Menyusun grafik batang sebagai baris akan membuatnya lebih mudah dibaca dan juga untuk mencetak pada beberapa halaman jika perlu. Jika tata letak baris tidak memungkinkan, maka membuat kunci terpisah untuk setiap item dalam grafik mungkin akan masuk akal dan dengan cara itu masing-masing bilah dapat ditempatkan lebih berdekatan bersama untuk menghemat ruang. Kunci akan memungkinkan setiap bilah diberi label seperti A, B, C ... atau 01, 02, 03 ... misalnya dan kunci (diletakkan di baris di tempat lain) akan memberikan informasi lebih rinci tentang masing-masing.

Ingat, bagan atau diagram terutama berguna untuk mendapatkan informasi visual yang cepat. Jika terlalu banyak menjadi beban bagi pengguna/pembaca, Anda sebaiknya menyederhanakannya, mengkonsolidasikan beberapa detail grafik, atau hanya menyediakan lebih banyak data mentah dalam bentuk yang lebih tabular.

Berikut adalah daftar sederhana yang menunjukkan font Arial, Segoe UI, dan Tahoma dengan berbagai ukuran. Perhatikan bahwa ruang relatif yang digunakan oleh masing-masing font berbeda pada ukuran titik yang berbeda. enter image description here

Pembaruan: Saya telah menambahkan perbandingan lain di bawah ini yang menunjukkan daftar karakter umum yang lebih lengkap termasuk huruf kapital dan huruf kecil di setiap font yang disebutkan sebelumnya dengan penambahan Verdana dan MS Sans Serif (font UI default di Windows sebelum Windows 2000). Sayangnya dan sebagai tanggapan atas rekomendasi bobsoap untuk menggunakan Verdana, cukup jelas bahwa Verdana adalah yang terburuk dibandingkan dengan font lain di 9pt meskipun perlu diingat bahwa ini mungkin tidak berlaku untuk ukuran titik lainnya. Juga ukuran tidak selalu selalu merupakan detail yang paling penting, kadang-kadang lebih penting bahwa font dapat dibaca pada ukuran kecil daripada apakah itu lebih kompak dibandingkan dengan font lain.

enter image description here

94
jpierson

Kamu melakukannya dengan salah.

Secara umum, ada "cara lain". Jawaban atas pertanyaan ini sangat bagus, tetapi jujur, Anda harus melihat semua opsi yang berbeda. Memeras teks sebanyak mungkin dalam ruang sesedikit mungkin selal berarti Anda telah merusak pilihan desain sebelumnya.

  • Mungkin Anda harus membaliknya menjadi bilah horizontal, memberi Anda ruang lebih untuk bekerja.
  • Mungkin Anda seharusnya tidak pergi dengan grafik batang, atau seharusnya tidak pergi dengan grafik di tempat pertama.
  • Mungkin masalahnya adalah data aktual, dan Anda mungkin harus membaginya lebih jauh!
  • Bilah samping atau legenda/indeks dapat membantu
  • Arahkan mungkin berfungsi untuk versi online

Ada begitu banyak opsi, pastikan Anda menggunakan yang benar. Meremas sebanyak mungkin informasi ke dalam satu area kecil adalah selalu cara yang salah. Informasi membutuhkan ruang untuk bernafas, dapat dibaca, dapat dipindai dan dikenali.

Ya, ini umumnya berarti menggunakan ruang yang jauh lebih banyak. Tapi itu bukan hal yang buruk. Dibutuhkan lebih sedikit usaha bagi orang yang mengkonsumsi data untuk dengan cepat memindai beberapa halaman yang diisi dengan informasi yang terstruktur dengan baik, daripada mencari tahu apa arti satu bar pada laporan satu halaman itu. Pikirkan anggota dewan lama, mengantongi kacamata baca sambil menyerahkan kertas kepada orang di sebelahnya: "Saya tidak bisa membaca ini - apa isinya?"

Permintaan maaf untuk kekasaran dan judul yang sedikit diucapkan, tetapi saya melihat jawaban teratas dan hanya merasa bahwa bagian "perlu pendekatan yang berbeda" membutuhkan lebih banyak elaborasi.

. edit:

Karena ini adalah jawaban yang sangat diperdebatkan, dan cukup bertentangan dengan pertanyaan awal, saya merasa saya harus menguraikan alasan di balik mempostingnya.

Pertama: ini bukan pertanyaan UX, ini desain grafis atau pertanyaan tipografi.

Ada asumsi dalam pertanyaan ini, yang terbesar adalah bahwa "solusi yang tepat" untuk masalah UX ini adalah teks kecil. Tapi ternyata tidak. Teks kecil menjadi tidak dapat dibaca, masalah diperparah oleh tablet dan perangkat seluler lainnya. Bagaimana jika pengguna Anda memiliki penglihatan yang buruk? Bagaimana jika itu ditampilkan pada monitor yang lebih tua, resolusi lebih rendah? Bagaimana jika ada silau dari Matahari atau cahaya? Banyak alasan mengapa teks berukuran kecil tidak dapat dibaca.

Dengan demikian, jawaban ini ada di sini untuk membantu orang berikutnya yang memiliki masalah ini untuk berhati-hati agar tidak membuat kesalahan yang sama.

... setelah mengatakan itu - Saya benar-benar menghargai bahwa orang yang mengajukan pertanyaan sama sekali tidak memiliki sumber daya untuk apa pun kecuali perubahan font :) Kita semua pernah ke sana, dan kita semua akan berada di sana lagi!

TLDR: Saya memperlakukan pertanyaan ini seperti cara Henry Ford memperlakukan panggilan untuk kuda yang lebih cepat. (Penafian: Saya bukan Henry Ford)

44
Dirk v B

Coda

Terkadang font yang lebih kecil adalah cara yang baik keluar dari tempat yang sempit. Dalam kasus khusus ini, setidaknya untuk bagian dari masalah yang ditunjukkan, ada solusi yang lebih baik yang keduanya lebih jelas, dan mengambil setengah ruang, seperti:

Lastname, Firstname

Saya menggunakan font yang cukup besar, 18pt Tahoma (buka gambar di tab baru untuk melihat ukuran penuh), bahwa ruang huruf negatif OK.

24
James Crook

Menganggap Anda mengacu pada penggunaan di layar pada tampilan konvensional (~ 96 DPI) yang bertentangan dengan sesuatu seperti tampilan Retina, dan Anda memiliki sistem dengan sub-pixel anti-aliasing, yang Anda cari adalah font dengan pixel hebat mengisyaratkan . Petunjuk adalah seni mengambil kurva vektor yang dirancang untuk penggunaan cetak dan menyesuaikan bentuk mereka untuk ukuran titik yang berbeda, biasanya untuk membuat bagian-bagian utama dari jenis huruf sejajar dengan grid pixel. Itu masalah membuat kompromi antara bagaimana font harus terlihat (karakternya jika Anda suka) dengan grid pixel yang kaku dan tak kenal ampun. Kompromi-kompromi itu semakin parah, semakin kecil Anda, karena kisi-kisi piksel menyediakan piksel yang lebih sedikit untuk diisi.

Banyak font telah dirancang secara eksplisit untuk digunakan pada layar komputer (umumnya disebut font layar ). Serangkaian tipografi Matthew Carter; Verdana , Tahoma , Georgia et al adalah contoh yang bagus; mereka dirancang sejak awal dengan grid pixel dalam pikiran. Itu membuat mereka secara inheren baik untuk digunakan pada ukuran yang lebih kecil (tetapi umumnya membuat mereka terlihat agak canggung saat dicetak).

Secara umum, pada ukuran titik kecil (mengingat ukuran titik merujuk ke tinggi), saya akan merekomendasikan Verdana karena memiliki a sangat tinggi x-height yang menyediakan lebar terbuka penghitung. Itu akan membuatnya lebih luas daripada font lain, yang bukan yang Anda cari (berdasarkan contoh Anda).

Font seperti Segoe UI , Tahoma dan MS Sans Serif semuanya dirancang sebagai font layar serbaguna (menjadi tipografi default untuk Windows Vista/7, Windows XP dan versi Windows sebelumnya masing-masing) , jadi itu adalah pilihan all-around yang baik (dengan Segoe UI menjadi satu-satunya yang dirancang dengan sub-pixel yang mengisyaratkan dan menjadi pilihan paling modern).

Ada dua faktor yang juga harus dipertimbangkan ketika memilih font; jika Anda menjalankan jenis secara vertikal, antialiasing sub-piksel secara alami berbeda, dan umumnya petunjuk piksel mulai tampak sedikit lebih buruk (karena perancang tipe tidak mungkin menguji wajah mereka secara vertikal). Jika Anda menjalankan font secara diagonal atau tidak pada pixel grid, pixel hinting semua akan dibuang keluar jendela.

Untuk penjelasan yang sangat terperinci tentang petunjuk piksel, rasterisasi, dan semua itu, tidak ada referensi yang lebih baik daripada situs luar biasa ini .

Jika ada minat, saya akan menambahkan satu atau dua paragraf tentang pilihan cetak untuk jenis yang sangat kecil, tetapi tidak banyak yang bisa saya tambahkan di luar artikel yang luar biasa bagus ini .

15
Kit Grose

Penting untuk menentukan dimensi apa yang ingin Anda optimalkan. Apakah Anda ingin mengurangi ukuran secara horizontal (garis pendek) atau juga secara vertikal? Jika Anda ingin mengoptimalkan lebar horizontal, Anda harus mencari jenis huruf yang kental. Arial Narrow dan Helvetica Condensed adalah dua opsi yang jelas, tetapi saya tidak menemukan itu sangat mudah dibaca dan mereka terlihat murah.

Untuk sans-serif yang mirip dengan Arial/Helvetica, tetapi lebih sempit, lihat:

Myriad Pro, Open Sans, Segoe UI, Tahoma, Frutiger, Bell Gothic, Lato, Antique Olive, dan font baru Adobe Source Sans Pro.

Dalam perbandingan yang saya lakukan dengan angka, saya menemukan Myriad Pro, Source Sans Pro, Segoe UI, dan Tahoma menjadi yang terbaik untuk keterbacaan dengan lebar minimum 9px-11px. Perhatikan bahwa font ini menangani ukuran yang sangat berbeda, sehingga seringkali offset ukuran perlu dimasukkan untuk melakukan perbandingan yang adil.

Lato juga bisa bekerja dengan baik. Asana menggunakan Proxima Nova, yang sangat terbuka dan mudah dibaca pada ukuran kecil, tetapi tidak terlihat bagus dalam ukuran yang lebih besar saat mereka menggunakannya.

Inilah perbandingan yang saya lakukan dengan semuanya pada 10px. Akan lebih baik untuk bermain-main seperti ini sendiri, karena mengubah ukuran font sering memiliki efek non-linear pada ukuran kecil ini.

font comparison at 10px

Yang lain menyebutkan Verdana. Verdana sangat mudah dibaca pada ukuran kecil, tetapi tidak mengoptimalkan lebar sama sekali. Yang mengatakan, jenis huruf lebar yang dapat dibaca pada ukuran kecil mengoptimalkan tinggi daripada lebar, dan mungkin ini yang Anda cari, tetapi di web di mana menggulir secara vertikal lebih alami daripada menggulir secara horizontal, ini biasanya tidak terjadi .

Preferensi pribadi saya adalah untuk Arial di layar dan jika saya mencari tampilan yang kurang netral atau jika saya perlu mengoptimalkan lebar, saya mungkin melihat Source Sans Pro atau Segoe UI.

9
terrace

Saya selalu mencintai Segoe UI tetapi baru-baru ini harus mengakui bahwa Arial sebenarnya lebih mudah dibaca (terkesiap) dalam banyak kasus. Jika Anda tidak percaya saya membandingkan 12px Arial dengan 12px Segoe UI dalam kotak penuh data numerik. Arial tampaknya bersinar. Bahkan teks sampel yang ditunjukkan dalam jawaban asli dengan jelas menunjukkan Arial sebagai lebih mudah dibaca. Ini jelek tapi lebih mudah dibaca. Banyak dari ini hanyalah perbedaan ukuran yang halus.

Selanjutnya ... Ketika Anda mengambil Segoe ke 13px dan lebih, angka benar-benar mulai terlihat aneh. Pada akhirnya sebagian besar aplikasi didorong oleh data. Buat kisi penuh data. Beralih di antara keduanya dan tanyakan beberapa orang yang lebih mudah dibaca ??? Hmmm..

Jika Anda membaca teks langsung (tidak ada angka) di 11px, maka saya pikir Segoe lebih mudah dibaca. Tapi, siapa pun yang memutuskan Segoe UI adalah font yang lebih mudah dibaca daripada arial ... Saya ingin melihat dari mana mereka mendapatkan data ini. Saya telah bertanya kepada beberapa orang dan semua orang berpikir Arial lebih mudah dibaca untuk data pada 12px (9pt) (termasuk saya).

Ada banyak intracacies dengan font dalam hal warna font juga. Segoe terlihat lebih baik sedikit lebih ringan ... (# 333333 atau # 212121) biasanya baik. Arial tampaknya terlalu sulit untuk dibaca pada warna-warna ini dan biasanya paling bagus untuk warna hitam pekat. Segoe UI memiliki terlalu banyak kontras dan cenderung terlihat sibuk dengan warna hitam pekat.

Saya menemukan arial lebih mudah dibaca daripada Tahoma secara pribadi. Jika Anda hanya berbicara tentang keterbacaan langsung. Tahoma mungkin terlihat lebih baik di antarmuka windows, tetapi itu adalah hal yang estetis.

Spasi, warna font, dan ukuran font mengubah segalanya. Jangan biarkan orang lain memberi tahu Anda Segoe UI adalah font yang lebih baik. Lebih baik untuk kasus-kasus tertentu, tetapi tidak semua. Ini tentunya menarik.

6
KingOfHypocrites

Different fonts in different sizes

Arial Narrow dan Tahoma tampaknya menjadi yang terbaik.

4
Fubz

Dalam pengalaman saya, Avenir Next Condensed sangat jernih, sementara masih menyita sedikit ruang. Dibandingkan dengan Arial Narrow, ini membutuhkan lebih sedikit ruang dan lebih mudah dibaca.

Visual comparison of Arial Narrow and Avenir Next Condensed

2
McHobbes

Saya mengalami masalah di mana optimasi ruang font merupakan faktor penting dengan beberapa perangkat lunak yang saya gunakan pada Mac (Soundminer, pada OS X Mavericks 10.9.5, tapi saya membayangkan ini bisa menjadi info yang berguna untuk perangkat lunak Mac lainnya, dan versi OS X yang akan datang. demikian juga). Program mencantumkan metadata file dengan baris ketinggian tetap, dan memungkinkan pengguna untuk memilih tinggi baris dan ukuran font. Word Wrap adalah sebuah pilihan, tetapi tinggi baris tidak akan disesuaikan agar sesuai secara otomatis dengan isi setiap sel.

Setelah melalui semua beberapa ratus font pada sistem, salah satu yang paling sesuai dengan data karakter dalam jumlah ruang paling sedikit, sementara masih dapat dibaca adalah (mengejutkan) Apple Symbols. Dengan ukuran font yang ditetapkan pada 12 dan tinggi baris 22, saya dapat dengan nyaman memuat dua baris teks, dan lebih banyak karakter daripada font lainnya (ukuran yang sama, atau lebih kecil) sambil tetap mempertahankan keterbacaan yang mudah dari posisi hingga 3. 'atau lebih dari tampilan.

Semoga ini terbukti bermanfaat bagi orang lain di luar sana dengan masalah yang sama (atau serupa).

2
EarHax

Sebagian besar jawaban di sini harus digunakan hanya sebagai saran kemungkinan font untuk digunakan. Setelah mudah dibaca, ini masalah selera. (Dalam komentar yang mengatakan Verdana jelas merupakan pilihan terburuk, saya paling menyukainya.) Saya sering mencoba 8 atau 10 font berbeda dan kemudian memutuskan mana yang paling cocok untuk saya. Pilihan juga tergantung pada konteks. Saya yakin semua orang akan menggunakan font yang berbeda untuk kartu nama untuk toko pakaian dan pabrik baja. Semua BS tentang serif dan sans serif adalah buang-buang waktu. Gunakan saja apa yang terlihat bagus, apa pun itu.

Saya setuju bahwa tujuannya tidak boleh menjejalkan sebanyak mungkin informasi ke dalam teks. Kebanyakan orang tidak akan membaca semuanya atau bahkan banyak. Mereka akan mencari poin-poin penting, dan jika itu menarik, mereka mungkin membaca bagian yang tersisa atau, lebih baik lagi, meminta lebih banyak informasi.

1
c.j.

Arial Narrow. Lucu, tidak ada yang menyebutkannya (Sepintas sepintas lalu melalui jawabannya). Saya telah menggunakannya untuk efek yang baik di semua aplikasi MS. Neeraj.

1
Neeraj

Saya menemukan Verdana ideal untuk ukuran font kecil (tidak terlalu banyak untuk font yang lebih besar). Atau, jika Anda bisa, Anda bisa menggunakan font piksel.

0
bobsoap