web-gelistirme-sc.com

Son derece sınırlı alan için bir yazı tipini nasıl seçersiniz, yani en küçük alana en okunabilir metne sığar?

Kullanıcılar için raporlar ve gösterge tabloları oluştururken genellikle çok sınırlı alanım var. Genellikle Arial veya Arial Dar'ı kullanıyorum, ancak kullanıcı arayüzü uzmanlık alanım değil, bu yüzden bilmek istiyorum, en küçük alana en okunabilir metni sığdırmak için en uygun yazı tipini nasıl belirlersiniz?

İşte bir örnek: Unutmayın, bu sadece bir örnektir, çünkü alanın sınırlı olduğu birçok zaman vardır, örneğin bir rapora bir milyon sütunu sıkıştırmanız gerektiğinde vb.

Chart with limited space

114
richard

Gerçekten beklediğiniz belirli karakterlerin sıklığı ve hangi yazı tiplerinin kullanılabilir olduğu gibi birçok faktöre bağlıdır.

O sırada Windows kutuma yüklediğim tüm yazı tiplerini yineleyen ve bu yazı tiplerinin her birinde ekrana yazdırılabilir ascii karakterleri içeren bir satır yazdırdı. Testi farklı yazı tipi boyutlarıyla da tekrarladım.

Hatırladığım kadarıyla, Segoe UI ve Tahoma , 10pt ve 9pt boyutlarında UI amaçları için alan kullanımı ve okunabilirlik açısından en iyisi idi. Kısa vadede, Segoe UI, Windows Vista'nın altındaki işletim sistemleri için ücretsiz olarak bulunmadığından Tahoma'ya yerleştik. Windows XP veya daha eski bir Windows işletim sistemini veya diğer bir Windows işletim sistemi olmayan işletim sistemini desteklemeniz gerekmiyorsa, kesinlikle Segoe UI ile giderdim, yoksa varsa ve eğer varsa Tahoma ile giderdim Kullanılabilir Windows yazı tiplerinin yanı sıra her birinin en iyi kullanımı hakkında bilgi için bkz. bu liste .

Ayrıca, Windows Vista'dan başlayarak, Microsoft'un artık UI öğeleri için 10pt yazı tipi yerine 9pt yazı tipi kullanılmasını önerdiğini unutmayın, çünkü Sego UI yazı tipi, özellikle düz panel ekranlarda düşük çözünürlüklerde diğer yazı tiplerinden çok daha net görüntülenir.

Hangi platform için geliştirdiğinize bağlı olarak, mümkünse yazı tipi metriklerini de değiştirmek isteyebilirsiniz. WPF ile .NET'te, metnin karakterler arasındaki boşluğu yoğunlaştırmak ve karakterleri daha dar hale getirmek için nasıl oluşturulduğunu değiştirmenin biraz yolu olduğunu hatırlıyorum. Bu tür bir tekniği kullanarak istediğiniz yazı tipine sadık kalabilirsiniz ve ihtiyacınız olan sonuçları elde etmek için oluşturduğu Tweak'i kullanabilirsiniz.

Verdiğiniz özel örnek grafiğinizle ilgili olarak: bu özel grafik için, okunması en muhtemel metnin daha doğal okuma için yatay olması için onu döndürmenizi öneririm. Sayıyı, arka plan rengi ne olursa olsun öne çıkan bir renge uyacak şekilde çubuk grafiğin her çubuğunun içine yerleştirecek şekilde yerleştiririm, böylece etiketler gibi diğer şeyler için alan artar. Çubuk grafiği satırlar halinde yerleştirmek, okumayı ve gerekirse birden fazla sayfaya yazdırmayı kolaylaştırır. Bir satır düzeni mümkün değilse, grafikteki her öğe için ayrı bir anahtar oluşturmak muhtemelen makul olacaktır ve bu şekilde yerden tasarruf etmek için her çubuk birbirine daha yakın yerleştirilebilir. Anahtar, örneğin, her bir çubuğun A, B, C ... veya 01, 02, 03 ... gibi etiketlenmesine izin verir ve anahtar (başka bir yerde sıralara yerleştirilir) her biri hakkında daha ayrıntılı bilgi verir.

Unutmayın, bir grafik veya diyagram temel olarak hızlı görsel bilgi almak için faydalıdır. Kullanıcı/okuyucu için çok fazla bir yük haline gelirse, muhtemelen basitleştirmek, grafiğin bazı ayrıntılarını birleştirmek veya daha tablo halinde daha fazla ham veri sağlamak.

Arial, Segoe UI ve Tahoma yazı tiplerini çeşitli boyutlarda gösteren basit bir liste. Her yazı tipinin kapladığı göreli boşluğun farklı nokta boyutlarında farklı olduğuna dikkat edin. enter image description here

Güncelleme: Aşağıda, daha önce bahsedilen yazı tiplerinin her birinde büyük ve küçük harfler de dahil olmak üzere ortak karakterlerin daha eksiksiz bir listesini gösteren başka bir karşılaştırma ekledim. Verdana ve MS Sans Serif eklenmesi (Windows 2000'den önceki Windows'ta varsayılan UI yazı tipi). Ne yazık ki ve bobsoap'ın Verdana'yı kullanma önerisine yanıt olarak, Verdana'nın 9 puntodaki diğer yazı tiplerine kıyasla en kötü olduğu açıktır, ancak bunun diğer nokta boyutları için geçerli olmayabileceğini unutmayın. Ayrıca boyut her zaman en önemli ayrıntı olmak zorunda değildir, bazen bir yazı tipinin küçük boyutlarda okunabilmesi, başka bir yazı tipine göre daha kompakt olup olmamasından daha önemlidir.

enter image description here

94
jpierson

Yanlış yapıyorsun.

Genellikle "başka bir yol" vardır. Bu sorunun cevapları harika, ama dürüst olmak gerekirse, tüm farklı seçeneklere bakmalısınız. Mümkün olduğunca az alana metin sıkıştırmak her zaman, önceki bir tasarım seçeneğini tıklattığınız anlamına gelir.

  • Belki de onları yatay çubuklar olarak çevirmiş olmanız ve size daha fazla çalışma alanı sağlamanız gerekirdi.
  • Belki bir çubuk grafikle gitmemelisiniz, ya da en başta grafiklerle gitmemelisiniz.
  • Belki de sorun gerçek verilerdir ve bu verileri daha da bölmeniz gerekebilir!
  • Yan çubuk veya gösterge/dizin yardımcı olabilir
  • Fareyle üzerine gelme, çevrimiçi sürüm için çalışabilir

Çok fazla seçenek var, doğru olanı kullandığınızdan emin olun. Tek bir küçük alana mümkün olduğunca fazla bilgi sıkmak her zaman yanlış gitme yoludur. Bilginin nefes alabilmesi, okunabilmesi, taranabilir ve tanınabilir olması için alana ihtiyacı vardır.

Evet, bu genellikle daha fazla alan kullanmak anlamına gelir. Ama bu kötü bir şey değil. Verileri tüketen kişinin, iyi yapılandırılmış bilgilerle dolu birkaç sayfayı hızlı bir şekilde taraması, bu çubuğun tek sayfalık raporda ne anlama geldiğini anlamaktan daha az çaba sarf edecektir. Eski yönetim kurulu üyesini düşünün, gazeteyi yanındaki kişiye geçirirken okuma gözlüklerini cebe koyun: "Bunu okuyamıyorum - ne diyor?"

Sertlik ve hafif dil yanak başlığı için özür dilerim, ancak en iyi cevabı görüyorum ve sadece "farklı bir yaklaşıma ihtiyaç duyuyor" kısmının daha fazla ayrıntıya ihtiyaç duyduğunu hissediyorum.

. Edit:

Bu çok tartışmalı bir cevap olduğundan ve orijinal soru ile oldukça çelişkili olduğundan, bunu göndermenin ardındaki mantığı ayrıntılı bir şekilde açıklamam gerektiğini hissediyorum.

Öncelikle: Bu bir UX sorusu değil, grafik tasarım veya tipografi sorusu.

Bu soruda varsayımlar var, en büyüğü bu UX sorununa "doğru çözüm" küçük metin. Ama değil. Küçük metinler okunamaz hale gelir, bu da tabletler ve diğer mobil cihazlar tarafından daha da kötüleşir. Ya kullanıcınızın görme yeteneği kötü ise? Daha eski ve daha düşük çözünürlüklü bir monitörde gösterilirse ne olur? Güneş'ten veya bir ışıktan parlama olursa ne olur? Küçük metnin okunamaz olmasının birçok nedeni.

Bu nedenle, bu cevap, bu sorunu olan bir sonraki kişiye aynı hatayı yapmamaya dikkat etmesine yardımcı olmak için buradadır.

... bunu söyledikten sonra - Soruyu soran kişinin bir yazı tipi değişikliği dışında hiçbir şeye sahip olmadığını kesinlikle takdir ediyorum :) Hepimiz oradaydık ve hepimiz tekrar orada olacağız!

TLDR: Bu soruyu Henry Ford'un daha hızlı atlar için yapılan muameleye nasıl davrandığını ele aldım. (Feragatname: Ben Henry Ford değilim)

44
Dirk v B

Koda

Bazen daha küçük bir yazı tipi dar bir noktadan çıkmanın iyi bir yoludur. Bu özel durumda, en azından gösterilen sorunun bir kısmı için, hem daha net olan hem de alanın yarısını alan daha iyi bir çözüm var, şöyle:

Lastname, Firstname

Ben yeterince büyük bir yazı tipi, 18pt Tahoma (tam boyut görüntülemek için yeni sekmesinde görüntü açmak), negatif mektup boşluk Tamam olduğunu kullanıyorum.

24
James Crook

Retina ekran gibi bir şeyin aksine geleneksel bir ekranda (~ 96 DPI) ekran kullanımından bahsettiğinizi ve alt piksel kenar yumuşatmasına sahip bir sisteminiz olduğunu varsayalım, aradığınız şey bir yazı tipi müthiş piksel ipucu ile . İpucu, genellikle yazı tipinin büyük bölümlerini piksel ızgarasına hizalamak için baskı kullanımı için tasarlanmış vektör eğrilerini alma ve şekillerini farklı nokta boyutları için özelleştirme sanatıdır. Bu, yazı tipinin katı ve affetmez piksel ızgarasıyla nasıl görünmesi gerektiği (arasında isterseniz karakteri) arasında uzlaşma sağlama meselesidir. Piksel ızgarası doldurmak için art arda daha az piksel sağladığından, bu uzlaşmalar gittikçe küçüldükçe giderek daha şiddetlenir.

Birçok yazı tipi, bilgisayar ekranlarında kullanılmak üzere özel olarak tasarlanmıştır (genellikle ekran yazı tipleri ). Matthew Carter'ın yazı tipi kümesi; Verdana , Tahoma , Gürcistan et al harika örneklerdir; piksel ızgarası göz önünde bulundurularak baştan tasarlandılar. Bu onları daha küçük boyutlarda kullanmak için doğal olarak iyi yapar (ancak genellikle baskıda biraz garip görünmelerini sağlar).

Genel olarak, küçük nokta boyutlarında (hatırlama noktası boyutları yükseklik), Verdana'yı öneririm çünkü a çok yüksek x-height sağlayan geniş açık sayaçlar. Bu, diğer yazı tiplerinden daha geniş hale getirecektir, aradığınız şey bu değildir (örneklerinize göre).

Segoe UI , Tahoma ve MS Sans Serif hepsi çok yönlü ekran yazı tipleri olarak tasarlanmıştır (Windows Vista/7, Windows XP ve önceki Windows sürümleri için varsayılan yazı tipleri)) , bu yüzden her yönüyle iyi seçimlerdir (Segoe UI, alt piksel ipucu düşünülerek tasarlanmış ve en modern seçim olan tek seçenektir).

Bir yazı tipi seçerken de dikkate alınması gereken iki faktör vardır; türü dikey olarak çalıştırıyorsanız, alt piksel kenar yumuşatma doğal olarak farklıdır ve genellikle piksel ipucu biraz daha kötü görünmeye başlar (tür tasarımcılarının yüzlerini dikey olarak test etmesi muhtemel değildir). Yazı tiplerini piksel ızgarasında çapraz olarak veya başka bir şekilde çalıştırmıyorsanız, tüm ipucu veren piksel pencereden dışarı atılır.

Piksel ipucu, rasterleştirme ve bunların hepsi hakkında çok ayrıntılı bir açıklama için bu muhteşem site 'den daha iyi bir referans yoktur.

Herhangi bir ilgi varsa, çok küçük tür için yazdırma seçenekleri hakkında bir veya iki paragraf ekleyeceğim, ancak ötesinde ekleyebileceğim çok şey yok bu inanılmaz iyi makale .

15
Kit Grose

Hangi boyutu optimize etmeye çalıştığınızı belirtmeniz önemlidir. Boyutu yatay olarak mı (daha kısa çizgiler) mi yoksa dikey olarak mı azaltmak istiyorsunuz? Yatay genişliği optimize etmek istiyorsanız, yoğunlaştırılmış bir yazı tipi aramalısınız. Arial Narrow ve Helvetica Condensed iki belirgin seçenektir, ancak onları çok okunabilir bulmuyorum ve ucuz görünüyorlar.

Arial/Helvetica'ya benzer, ancak daha dar sans-serif'ler için şunlara göz atın:

Sayısız Pro, Open Sans, Segoe UI, Tahoma, Frutiger, Bell Gothic, Lato, Antique Olive ve Adobe'nin yeni yazı tipi Source Sans Pro.

Sayılarla yaptığım bir karşılaştırmada, Myriad Pro, Source Sans Pro, Segoe UI ve Tahoma'yı 9px-11px'te minimum genişlikte okunabilirlik için en iyi buldum. Bu yazı tiplerinin boyutları çok farklı ele aldığını unutmayın, bu nedenle adil bir karşılaştırma yapmak için genellikle bir boyut ofsetinin dahil edilmesi gerekir.

Lato da iyi çalışabilir. Asana, küçük boyutlarda çok açık ve okunabilir olan, ancak kullandıkları için daha büyük boyutlarda harika görünmeyen Proxima Nova'yı kullanıyor.

İşte 10px'de her şeyle yaptığım karşılaştırma. Bununla birlikte, kendiniz böyle oynamak en iyisidir, çünkü yazı tipi boyutunu değiştirmek genellikle bu küçük boyutlarda doğrusal olmayan bir etkiye sahiptir.

font comparison at 10px

Diğerleri Verdana'dan bahsetti. Verdana küçük boyutlarda çok okunabilir, ancak genişliği hiç optimize etmez. Bununla birlikte, küçük boyutlarda okunabilen geniş yazı tipi, genişlik yerine yükseklik için optimize eder ve belki de aradığınız şey budur, ancak dikey olarak kaydırmanın yatay olarak kaydırmaktan daha doğal olduğu web'de bu genellikle böyle değildir .

Kişisel tercihim ekranda Arial için ve daha az nötr bir görünüm arıyorsanız veya genişlik için optimize etmem gerekirse Kaynak Sans Pro veya Segoe UI'ye bakabilirim.

9
terrace

Segoe UI'yi her zaman sevdim, ancak son zamanlarda Arial'ın birçok durumda daha okunabilir (soluk) olduğunu itiraf etmek zorunda kaldım. Bana inanmıyorsanız, sayısal verilerle dolu bir tablodaki 12px Arial ile 12px Segoe UI'yi karşılaştırın. Arial parlıyor gibi görünüyor. Orijinal cevapta gösterilen örnek metin bile Arial'ı okumayı daha kolay gösterir. Çirkin ama daha okunabilir. Bunların çoğu sadece küçük boyut farkıdır.

Dahası ... Segoe'u 13 piksel ve ötesine taşıdığınızda, rakamlar gerçekten tuhaf görünmeye başlar. Sonuçta çoğu uygulama veriler tarafından yönlendirilir. Verilerle dolu bir ızgara oluşturun. İkisi arasında geçiş yapın ve okunması daha kolay olan birkaç kişiye sorun ??? Hmmm ..

11px'de düz metin (sayı yok) okuyorsanız, Segoe'nun okunması daha kolay olduğunu düşünüyorum. Ancak, Segoe UI'nin yazı tipi okumak için arial'dan daha kolay olduğuna kim karar verdi ... Bu verileri nereden aldıklarını görmek istiyorum. Birkaç kişiye sordum ve herkes Arial'ın 12 piksel (9pt) (kendim dahil) veriler için daha okunabilir olduğunu düşünüyor.

Yazı tipi rengiyle ilgili olarak yazı tipleriyle ilgili çok sayıda intrakaklık vardır. Segoe biraz daha hafif görünüyor ... (# 333333 veya # 212121) genellikle iyidir. Arial, bu renklerde okumak çok zor görünüyor ve genellikle en iyisi katı siyah. Segoe UI'nin çok fazla kontrastı var ve düz siyahla meşgul görünüyor.

Kişisel olarak Tahoma'dan daha okunabilir olduğunu düşünüyorum. Sadece düz okunabilirlikten bahsediyorsanız. Tahoma bir pencere arayüzünde daha iyi görünebilir, ancak bu estetik bir şeydir.

Aralık, yazı tipi rengi ve yazı tipi boyutu her şeyi değiştirir. Kimsenin Segoe kullanıcı arayüzünün daha iyi bir yazı tipi olduğunu söylemesine izin vermeyin. Bazı durumlar için daha iyidir, ancak hepsi değil. Yine de kesinlikle çekici.

6
KingOfHypocrites

Different fonts in different sizes

Arial Narrow ve Tahoma en iyisi gibi görünüyor.

4
Fubz

Deneyimlerime göre, Avenir Next Condensed hala çok az yer kaplarken çok net. Arial Dar ile karşılaştırıldığında, daha az yer kaplar ve okunması daha kolaydır.

Visual comparison of Arial Narrow and Avenir Next Condensed

2
McHobbes

Mac'te kullandığım bazı yazılımlarda (Soundminer, OS X Mavericks 10.9.5'te yazı tipi alanı optimizasyonunun önemli bir faktör olduğu bir sorunla karşılaştım, ancak bunun diğer Mac yazılımları ve OS X'in gelecekteki sürümleri için yararlı bilgiler olabileceğini hayal ediyorum. de). Program, sabit yükseklik satırlarına sahip dosya meta verilerini listeler ve kullanıcının satır yüksekliğini ve yazı tipi boyutunu seçmesini sağlar. Sözcük Kaydırma bir seçenektir, ancak satır yüksekliği her hücrenin içeriğine otomatik olarak sığacak şekilde ayarlanmaz.

Sistemdeki birkaç yüz yazı tipinin tamamından geçtikten sonra, okunaklı olsa da en az yer kaplayan en karakter verisine uyan (şaşırtıcı bir şekilde) Apple Sembolleri idi. Yazı tipi boyutu 12 olarak ayarlanmış ve satır yüksekliği 22 olacak şekilde, 3'e kadar bir konumdan kolay okunabilirliği korurken, diğer tüm yazı tiplerinden (aynı boyutta veya daha küçük) iki satır metin ve daha fazla karaktere rahatça sığabilirim. 'veya benzeri.

Umarım bu aynı (veya benzeri) sorunu olan başka biri için yararlı olacaktır.

2
EarHax

Buradaki cevapların çoğu yalnızca olası yazı tiplerinin önerileri olarak kullanılmalıdır. Okunabilirlikten sonra, bir zevk meselesi. (Verdana'nın açıkça en kötü seçim olduğunu söyleyen yorumda, en çok hoşuma gitti.) Sık sık 8 veya 10 farklı yazı tipi deniyorum ve sonra hangisinin bana en iyi geldiğine karar veriyorum. Seçim aynı zamanda bağlama da bağlıdır. Eminim herkes bir iç çamaşırı dükkanı ve çelik fabrikası için kartvizitler için farklı yazı tipleri kullanırdı. Serif ve sans serif hakkındaki tüm BS zaman kaybıdır. Hangisi olursa olsun, iyi görünenleri kullanın.

Hedefin metne sığabilecek kadar çok bilgi toplamak olmamasını kabul ediyorum. Çoğu insan hepsini okumaz, hatta çoğunu okumaz. Kilit noktaları arayacaklar ve eğer ilgileniyorlarsa, kalan kısımları okuyabilirler ya da daha iyisi daha fazla bilgi için çağrıda bulunabilirler.

1
c.j.

Arial Dar. Komik, kimse ondan bahsetmedi (cevap yoluyla cursory bakışta). Tüm MS uygulamalarında iyi bir etki için kullandım. Neeraj.

1
Neeraj

Verdana'yı küçük yazı tipi boyutları için ideal buluyorum (büyük olanlar için çok fazla değil). Veya, mümkünse bir piksel yazı tipi kullanabilirsiniz.

0
bobsoap