Web Tipografisini İyileştirmenin 5 Yolu
Tip, web'in en çok kullanılan elemanlarından biridir. Bunu düşün. YouTube veya Flickr değilseniz, site içeriğinizin metin içeriğiniz için gelme olasılığı vardır - çevreleyen süslü ambalajlar değil. Peki, web tasarımcıları neden hala ikincil bir eleman gibi metni ele alıyor?
İyi tipografi, sayfaya sipariş verir ve okunabilirliği artırır . İnsanların bilgiyi daha hızlı işlemesini sağlar.
Daha fazla taranabilir, okunabilir site, mutlu ziyaretçiler demektir. Mutlu ziyaretçiler sık sık geri dönüyor, ürünleri satın alıyor, yorum bırakıyor ve siteyi arkadaşlarıyla paylaşıyor. Neden düşünmeye değer olduğunu görüyor musun?
Tipografinin internette ne kadar ileri gittiğine ve ne kadar ileri gitmesi gerektiğine sonsuza kadar kalabildim. Web ve baskı tasarımı arasında sık sık çıktım. InDesign'dan TextMate'e gittiğinizde , web türünün sınırlamaları kristal netliğindedir .
Ancak web türünün yapamayacağı konusunda bolca şey söylendi. Bu başka bir rant olmayacak. Bunun yerine, Web üzerinde bolca bulunan tipografik gözbebekleri için 5 kolay düzeltmeye odaklanalım.
1. A Stil Sayfasını Sıfırla
Aptalca, ancak doğru: İki tarayıcı da aynı sunum varsayılanlarını kullanmaz. Dolgu, kenar boşlukları, başlıklar ve girintilerdeki farklar çok yaygındır. Sayfa düzeninizin tarayıcılarda daha tutarlı olmasını istiyorsanız, bir CSS Sıfırlama stil sayfasıyla başlamak için ödeme yapar.
İki tane tavsiye ederim:
Yahoo'nun CSS Sıfırlama Stil Sayfası
Eric Meyer'in CSS Sıfırlama Stil Sayfası
2. Ölçünüzü İzle
Tedbir, tek bir satırın uzunluğunu ifade eder. Daha uzun bir çizgi = daha uzun bir Tedbir. Çalışmalar, en iyi okunabilirlik için, ana gövde kopyalarınız gibi çalışan metin sütunlarının boşluklar dahil olmak üzere 45 - 75 karakter arasında (30-50 ems) bir yerde olması gerektiğini göstermiştir. Bu, sıvı tasarımlarının (sütunların tarayıcı genişliğine uyacak şekilde genişlediği ve daralacağı) nedenlerin daha zor olduğu nedenlerinden biridir.
Ek olarak, lideriniz Tedbirinizin uzunluğu ile artmalıdır . Lider, metin satırları arasındaki beyaz boşluk miktarıdır ve CSS çizgi yüksekliği özelliği ile kontrol edilir. Ekstra uzun bir Ölçüm kullanmanız gerekiyorsa, liderinizin açıldığından emin olun.
Aynı şekilde, kısa bir Ölçüye sahip bir kenar çubuğu gibi küçük bir sütununuz varsa, öncünüzün daha sıkı olması gerekir. Çoğu tarayıcıya atanan varsayılan değeri buluyorum biraz fazla sıkı. Çoğu vücut içeriği için yaklaşık 1.4em'lik bir çizgi yüksekliği iyi çalışır.
3. Arasındaki Alana Eğil
Sadece metninizle ilgili değil - çevreleyen alan hakkında. Çok az alan metni okumayı zorlaştırır, ancak çok fazla yapar. Anahtar, gözü bir elemandan diğerine yönlendiren basit bir denge bulmaktır.
Yeni tasarımcıların yaptığı yaygın hatalardan biri, alanın her santimini doldurmaktır. Beyaz boşluk, içeriğinizin etrafındaki boş veya "negatif" alana karşılık gelir ve bu çok önemlidir. Dwell veya Good gibi iyi tasarlanmış bir dergiye bir göz atın ve her sayfanın basımcısının paraya mal olmasına rağmen, metnin etrafında bol miktarda beyaz alan bıraktığını göreceksiniz. Sayfa dengede olacak ve gözünüz mekândan mekana etkili bir şekilde geçecek.
Hat yüksekliğini ayarlamanın yanı sıra (# 1'de belirtildiği gibi), dolgularınızı ve kenar boşluklarınızı artırmayı deneyin. Çılgın bir görsel hile yapmaya çalışmadığınız sürece, metninizde her zaman iyi bir miktar beyaz boşluk olmalıdır. Diğer öğelere, özellikle de görüntülere karşı durmasına izin vermeyin. İçeriğinizin parçalanmasına izin verin (başlıklar, paragraflar, kenar çubukları vb.).
Mark Boulton hakkında çok bilgilendirici bir makale yazdı Beyaz boşluk Apart A Listesi için bir göz atın.
4. Yazı Tipini Çıldırmayın
Herhangi bir tasarımcı için iyi bir kuraldır: ikiden fazla yazı kullanmayın tasarımında yüzler . İki yazı tipi yüzü çok şık görünebilir. Bir Liste Apart zarif ve parlak bir görünüm oluşturmak için Gürcistan ve Verdana'nın varyasyonlarını kullanır. Ancak arayüzünüze yazı tipi yüzleri eklemeye devam etmek gereksiz bir karışıklık yaratır. Benzer şekilde, bir sayfada veya bir paragrafta çok fazla yazı tipi boyutu, renk veya işlem kullanmaktan kaçının veya amaçlandığı şekilde vurgu eklemek yerine birbirleriyle rekabet eder.
olmasına rağmen yazı tipi yığınları ve teknolojiler gibi sIFR'yi ve Typeface.js Varsayılan olarak istediğiniz herhangi bir yazı tipini belirtmenize izin verin, vücut kopyasına izin vermek için günaha karşı koymayın. Dekoratif yazı tipleri okunabilirliği etkiledikleri için en iyi manşetlere tutulur . Bunu bir düşünün - En son ne zaman tamamen Comic Sans'taki bir kağıt romanını seçtin?
Yazı tipi yığınları oluştururken, eşleştirmelerinizin boyutuna dikkat edin. Benzer görünen bazı yazı tipleri çok farklı boyutlarda işlenir. Verdana ve Arial bunun harika bir örneğidir. Typetester çekirdek web yazı tiplerini karşılaştırmak ve başarılı bir yığın oluşturmak için harika bir araçtır. Başka bir kullanışlı araç Yazı Tipi Yığını Oluşturucu Kullanıcıların her bir varyasyonunun yüzde kaçını göreceğini gösterir.
Kullanmaya karar verdiğiniz yazı tiplerine bakılmaksızın, ufacık küçük olmadıklarından emin olun. Onun zor olduğunu biliyorum… minik metinler havalı görünüyor. Ama fakir, şaşkın kullanıcılar hakkında düşün! Gövde metnini 10 veya 12 pikselin üzerinde tutun. Ufacık küçüklerde ısrar ederseniz, en azından başka şekilde daha büyük yapamayan IE 6.0 kullanıcıları için göreceli boyutlandırma kullanın. okumak Wilson Mader'in makalesi Tartışmaya büyük önem veren yazı tipi boyutlarında.
5) Detayları İhmal Etmeyin
Müşteri içeriği sağladı. Siteye eklemek sadece kopyalama ve yapıştırma meselesidir, değil mi? Yanlış, yanlış, yanlış. Bu bir tuzak web tasarımcıları çok sık düşüyor.
Başlık etiketlerini özenle ekleyen, her paragrafı biçimlendiren ve madde işaretli listeleri dikkatle düzenleyenler bile bazı önemli tipografik ayrıntıları unutuyorlar. Pek çoğu (benim dahil) resmi tipografi eğitimini kaçırdı, bu yüzden bizi tamamen suçlayamazsın. Ama şeytan ayrıntılarda. Bu temelleri benimsediğimiz zaman:
Akıllı teklifleri kullan
Akıllı teklifler ve aptal sözler arasındaki fark nedir? Akıllı tırnaklar ( kitap veya kıvırcık olarak da bilinir) kavislidir ve hem açılış hem de kapanış stiline sahiptir. Aptal ( düz ) tırnaklar genellikle düz yukarı ve aşağı doğrudur. Bir kesme işareti yazımsal olarak sadece tek bir alıntıdır ve aynı sorun geçerlidir. Aptal bir alıntı (ayrıca asal denir) sadece ölçümler arasında kullanılmalıdır. Örneğin, 6'4 ″ çift ve tek asal fiyatlar kullanır.
Ne yazık ki klavyelerimiz varsayılan fiyat teklifleridir. Microsoft Word ve diğer metin editörleri sadece yazarken bizim için onları düzeltir. HTML sayfalarına akıllı teklifler eklemek, web geliştiricisinden daha fazla çalışma gerektirir çünkü açılış ve kapanış teklif sembolleri oluşturmak için işaretlemeyi kullanmanız gerekir. Em ve en-dashes, elips, marka ve telif hakkı sembolleri ile aynı sorunu görüyorum. Kodlayıcılar, bunları tire, çoklu periyot, büyük bir TM ve rezil (C) ile değiştirerek kolay bir şekilde çıkar. Doğru sembolleri kullanmak görsel olarak bir fark yaratır. Doğru yapın ve editörlerin her yerde gülümsemesini sağlayın.
Akıllı teklifler nasıl yapılır:
#8216; = tek tırnak açma
’ = tek teklifin kapatılması
“ = çift tırnak açma
” = çift tırnak kapanış
Biliyorum - kimse bütün günü alıntı yapmak istemiyor. Neyse ki, araçlar gibi Çok bilmiş ve Textism Akıllı teklifleri ve benzerlerini içeren metinleri otomatik olarak biçimlendirerek sizin için çok fazla ayak işi yapabilir.
okumak “EM ve EN ile Sorun” A Listesinden konuyla ilgili daha fazla ayrıntı ve en yaygın özel karakterleri kodlayan UTF-8 karakterleri.
Bir uyarı - CMS metin editörlerinin birçoğu (bu sitenin kullandığı gibi), ekstra eklentiler olmadan akıllı teklifleri uygulamanıza izin vermez. Acı ama gerçek.
Bir süre sonra iki boşluk bırakmayı bırakın. Lütfen! Bu gerekli ve aslında oldukça can sıkıcı değil.
Bağlantılarınızda, kenarlık altını kullanın: metin dekorasyon yerine 1px katı: alt çizgi . Alt çizgiler, özellikle daha küçük yazı tipi boyutlarını kullanırken, okunmasını zorlaştıran alt karakterlerden (g, j, p, q, y) geçebilir.
Ve tipografi ile ilgisi yokken, hızlı bir yazım denetimi yapmak hiç kimseyi öldürmedi . Yaptığınız her şey kopyalanıp yapıştırılmış olsa bile, canlı bir siteye giren bir yazım hatası, ilgili herkese kötü bir şekilde yansıyor.
Bu 5 düzeltmeye dikkat edin ve site tasarımlarınızın geliştirildiğinden emin olun. Bunların sadece bir başlangıç noktası olduğunu unutmayın. İyi tipografi, her şey gibi öğrenilmiş bir beceridir ve çalışma ve uygulama gerektirir . Her zaman doğru olan sitelere göz kulak olun ve ne yaptığını not edin. İlhama mı ihtiyacınız var? Harika web tipografi örnekleri ve ilham verici bulduğunuz örnekler için aşağıdaki sitelere göz atın.
İlham Türü:
Sadece Mindy Wagner tarafından WDD için yazılmış.
Tipografinizi geliştirmenin bu basit yolları hakkında ne düşünüyorsunuz? Bunları web sitelerinize uyguluyor musunuz? Sizden haber almak isteriz!