Arial ve Helvetica Kullanmayı Bırakın



Arial ve Helvetica çoğu tarayıcı ve çoğu websitesi için varsayılan font kümeleridir. İşte bu kötü, hem de çok kötü. Arial ve Helvetica web’de ve paragraf metinlerinde rezalet duruyor,  (özellikle web için üretilen bir çok diğer fontla karşılaştırıldıklarında) okunaksızlar. Helvetica uygun karakter aralığı olmadan çirkin görünüyor ve  Arial da  o Helvetica olacak yazı karakterinin çirkin bir piçi! Bazı insanların onları kullanmak için sebepleri var fakat çoğu kullanım aklısızca, sırf herkes kullanıyor diye kullanıyorlar. Şimdi bu varsayılanların marifetini ve kabahatini açmama izin verin.

HELVETICA

Helvetica için filmler yapıldı, şarkılar söylendi. Ve bunların tümü hak edilmiş! Helvetica yapılagelen en iyi yazı karakterlerinden biridir ve geçerliliğini hala ilk günkü gibi korumaktadır. Ama web için çok kötü bir seçimdir. Özellikle metin yığınlarından oluşan paragraflar için. Helvetica en iyi biçimde öne çıkmak için neredeyse daima özel bir harf aralaması (kerning) yapmayı gerektirir ki bu webde yazdığınız her sözcükte yapamayacağınız bir şeydir.


























İşte Helvetica ve Lucida Grande (Benim en sevdiğim yazı karakteridir) arasında bir 
karşılaştırma. Okumaya devam ettikçe farkı göreceksiniz.

Helvetica harikadır. Baskı dünyası, marka kimlikleri ve hatta başlıklar için muhteşemdir. Bu açıdan hakkını veriyorum. Aslında oluşturduğum marka kimliklerinin çoğu Helvetica dizisi içindedir. Ama lütfen bize bir iyilik yapın ve webde bunu kullanmayın. Helvetica Neue web için yeniden geliştirildi. Eski Helvetica’ya göre çok daha iyi ancak yine web için üretilen öteki yazı karakterleri kadar hoş değil. Ve Windows’ta geçerlilik sorunlarına sahip.

ARİAL

Arial, tasarımcılar arasında adı çıkmış, Helvetica çakması bir yazı karakteridir. Helvetica’nın gerçekten çok ucuz bir kopyasıdır. Çirkindir.







Lucida Grande, Helvetica ve Arial karşılaştırması.

Arial’ı geliştirmeye çalışan tasarımcılar ve siteler bulunmaktadır. Ancak aynı miktarda çaba göstererek ondan çok daha verimli olacak diğer yazı tiplerini yaratmak mümkündür.

Bazı sevilen siteler Arial ve Helvetica’yı güzelce kullanabiliyorlar:

Github Helvetica kullanıyor; ama birçok Windows makinesinde varsayılan olarak Arial vardır ve hoş bir şekilde işi kıvırabilmektedirler.







Bazı kısımlar haricinde farklı bir yazı karakteri ile çok daha iyi olabilir: 









O ZAMAN NEDEN İNSANLAR BUNLARI KULLANIYORLAR?

* Yaygın nedeni cehalet. İnsanlar, tipografi şöyle dursun tasarımı umursamıyor/bilmiyorlar.
*İkinci nedeni ki en mantıklı olanı, kullanılabilirlik. Arial neredeyse her yerde geçerlidir. (Mac ve Windows cihazların %99’unda)

*Çoklu işletim sistemlerine uyumluluk özelliği. Arial, Helvetica temel alınarak oluşturuldu. X yükseklikleri ve diğer ölçümler açısından çok benzerler. O yüzden yapacak en güvenli şeydirler. Farklı x-yükseklikleri sayfa düzeninizi bozabilir. Ne kadar kötü oldukları önemli olmayan standartlar ile çalışmak kolaydır.

*İnsanlar beğeniyor. Justin Bieber asla bir Tony Bennett ile kıyaslanamaz. Popüler beğeninin mahiyeti ne olursa olsuno asla teknik anlamda o kadar iyi değildir. Arial çok kötüdür ve Helvetica güç bela webde işe yarar.

Eğer Internet Explorer 6/7/8 desteğini bırakıyorsanız, Arial’ı terk etmeniz durumunda göz ardı edeceğinizden çok daha büyük bir pazarı görmezden geliyorsunuz. Helvetica üzerine bahse girerseniz, zaten geçerlilik sorunları ile ilgili tehlike altındasınızdır.


SEÇENEKLER: DAHA ÇOK WEB-GÜVENLİ FONTLAR İLE TANIŞIN

Ne yazık ki, Windows, Mac Os işletim sistemine göre daha popüler. O yüzden font uyumluluk düzenini Windows yürütüyor. Ama neyse ki iyi iş çıkardı. Teknik olarak, bu fontlar web için ve inanılmaz okunaklılık için yapıldı. İşte bazı örnekler:



VERDANA

1996’da piyasaya sürüldü. Mac’lerin %99.10’unda; Windows’ların %99.84’ünde ve Linux Makinelerin de %67.91’inde geçerlidir. Microsoft Office, Windows ve Internet Explorer ile birlikte paket halinde sürüldü. Aslında 10.4’ten sonraki tüm Mac Osx sürümlerinde vardı. Çoğu iPad kitap/okuma uygulaması Verdana kullanır. Popüler Hacker News sitesi Verdana kullanır, ya Arial kullansalardı?


















TAHOMA

Köken olarak Windows 95 ile paketli çıktı. (Tanrım! O günleri anımsadınız mı?) Microsoft Office’in son sürümlerinin ve Mac OSX Leopard sürümlerinin bir parçasıydı. Mac’lerin %91.71’inde ve Windows’ların %99.67’sinde geçerlidir.

TREBUCHET MS
Bu nefis yazıyüzü esas olarak Windows 2000 ve Internet Explorer 4 ile piyasaya sürüldü. Sonradan Mac OSX ve İos’un bir parçası oluverdi. Mac’lerin %97.12’sinde ve Windows’ların %99.67’sinde geçerlidir.

DAHA FAZLA AYARLAR
Hedef parçanızda Microsoft Ofis yüklüyse, o zaman daha geniş açıda uyumlu yazı karakterleriniz vardır. Sego UI, Calibri gibi.

Tipografiye dair bir iki şey biliyorsanız o zaman  benzer x- yüksekliklerine sahip daha özel OS tabanlı yazı karakterleri kullanabilirsiniz. Örn: Lucida Grande, Lucida Sans, Sans-Serif.

TIRNAKLILAR
Yüksek pixel yoğunluklu ekranların doğması ile tırnaklılar koltuğuna geri oturdu; ama buradaki durum biraz farklı. Arial’in içindeki çirkinlikle aynı düzeyde bir yazı karakteri – Times New Roman. Sadece Georgia Kullanın. Yapılmış en güzel ve okunaklı yazı karakterlerinden birisidir. %97.48 Mac’lerde ve %99.4 oranında Windows’larda bulunmaktadır. Cidden, Georgia müthiştir!

B PLANI?
Peki bu yazı karakterleri için B planı olarak ne kullanıyorsunuz? Hiç bir şey. Çünkü tırnaklılar ve tırnaksızlar her durumda işi kurtaran fontlar diye.

YERLEŞİK FONT EĞİLİMLERİ
Css3 ve yazıyüzlerinin doğumuyla birlikte çoğu insan daha iyi yazı karakterlerine doğru bir atılım yaptı. O yüzden devam etmek ve ihtiyacınıza en iyi karşılık verecek yazı tipini seçmek harika bir fikir. Dış dünyada artık nefis yazı karakterleri var: Open Sans, Proxima Nova, MuseoSans, Source Sans Pro, Ubuntu, Lato, Droid Sans, Droid Serif etc.

OKUNAKLILIK ÜZERİNE DAHA FAZLA İPUÇLARI

BEYAZIN ÜZERİNE SİYAH KULLANMAYIN

Çoğu web sitenin saf beyaz arkaplan üzerine kondurulmuş (HEX #FFFFFF) saf siyahı (HEX #000000) bulunuyor. Ama böylesi yüksek karşıtlık gözler için çok zordur. Programcılar ekranlarındaki metinlere (kodlara) bakmaya zibil gibi zaman harcıyorlar ve çoğunluğu düşük karşıtlıklı temaları yeğliyorlar. Gözler için rahatlatıcı olması gibi iyi bir sebep için. Eğer saatler boyu web genelinde çalışmak durumunda kaldıysanız gözleriniz yüksek zıtlığa sahip web tarafından acıtılacaktır.

Karşıtlığı biraz olsun düşürerek göz yorgunluğunu törpüleyebilirsiniz:
1-Beyaz bir arkaplan üzerinde siyah metniniz olduğunu varsayalım. Tam siyah kullanmayın (#000000) - #222222 ile #555555 renk kodları arasındaki renkleri kullanın.

2-Yapabiliyorsanız saf beyaz kullanmayın (#ffffff). Kırık beyaz yapın: #FAFAFA, #F9F9F9, #F8F8F8 gibi. Daha iyi görünür. Ama sıklıkla bunu becermek zordur o yüzden bunu seçenek olarak görün.








Wikipedia yazıtakımı üzerine Lucida Grande ile bir fark. Farkı görmek için bakmaya devam ediniz.

Webin çoğu metinlerden ibarettir. Bizler her şeyi geliştirmeye uğraşırken temelleri de unutmamak gerekmektedir. Özellikle yayıncılıkta fire vermeyen okunaklılığa sahip, bilgece kurgulanmış tipografiyle yapılan büyük isimlerin fazla olması harikadır.

SATIR YÜKSEKLİĞİ

Satır yüksekliği tipografinizi ciddi biçimde etkiler. Bunu altın oranda ya da 1.5em ile 1.6em arasında tutmak iyidir. Ayrıca Pearsonified’ın “Golden Typography Calculator” isimli yere erişerek  kulanabilirisiz.

DAHA FAZLA ÖRNEK:

İşte size web sitelerindeki tipografiyi ve arayüz tasarımını geliştirmek adına için birkaç dakika daha fazla ayırmış tutulan web siteleri.




Yukardaki içeriği sevdim ancak tipografi berbat. Allah aşkına siz yayıncılık sektöründesiniz! Ama yalnız değiller ki, çoğu yayıncının web sitesinde güzel görünmeyen tipografi yapıları var. Neyse, ben renk karşıtlığını yumuşattım (siyahtan koyu griye çekerek), tazı tipini Lucida Grande’ye kaydırdım ve satır yüksekliğini 1.6em’e çektim.

QUORA




Quora’yı ziyaret etmememin tek nedeni kötü tipografisi. Evet, işte o kadar takıntılıyım!

kaynak: https://www.64notes.com/design/stop-helvetica-arial/

Yorumlar

Bu blogdaki popüler yayınlar

Tasarımcılar için Renk Kuramı 3.Bölüm - Kendi Renk şemanızı nasıl oluşturursunuz?

Renk Kuramını Anlamanın Temelleri

Grafik Tasarımın Temel İlkeleri ve Bilinmesi Gerekenler