Web tasarımında tipografi bir web sitesinin tonunu, temasını ve mesajını aktarmada önemli bir rol oynamaktadır.Örneğin bir sitenin odağını modernliğe ya da gelenekçiliğe yöneltmek için sırasıyla sans serif ya da serif yazıtipi kullanmayı tercih edebilirsiniz. Sadece yazıtipinin rengini, satır yüksekliğini, stilini ve boyutunu değiştirerek, içeriğin farklı bölümlerine ilgiyi çekebilir, diğer alanların önemini azaltabilirsiniz. Yazıtiplerinin verimli bir şekilde kullanımı tasarımı sadece çekici kılmakla kalmaz, ayrıca içeriğin okunulabilirliğini ve kullanılabilirliğini de arttırır.Bu kolleksiyonda tipografiyi işlevsel ve verimli bir şekilde kullanan 20 adet web sitesini bulacaksınız.
1. Jason Santa Maria
Jason Santa Maria‘nın kişisel sitesindeki tipografi seçimi ve stilleme, sitenin minimalist tasarımında önemli bir rol oynamaktadır. Büyük boyutlu makale başlıkları ilginizi derhal onlara çekiyor. Sitenin altlık başlıkları gibi çeşitli yerlerinde sIFR kullanılmış. Bu sayede herhangi bir görsel ya da metin kullanılmadan web-safe yazıtiplerinin kullanılması mümkün hale getirilmiş.2. Elysium Burns
Elysium Burns büyük boyutlu, kalın, sans serif yazıtipleri ile geleneksel sans serif yazıtiplerini br arada kullanarak etkileyici bir tasarım oluşturmayı başarmış. Makalelerin başlıkları ve site üstlükleri için ise CSS görsel arkaplanları kullanılmış.
3. GOOD
GOOD temiz ve mükemmelce boşluklandırılmış yazıtiplerini güzel ve okunabilir bir tasarım oluşturmak için kullanmış.
4. Web Design Ledger
Web geliştiricisi ve tasarımcısı Henry Jones serif ve sans serif yazıtiplerinin birleşiminden ortaya özgün bir tasarım çıkarmış. Web Design Ledger‘in tasarımı okurların son yorumlarını büyük boyutlu ve vurgulandırılmış bir yazitipi ile belirterek onları sadece tasarımın işlevsel bir elementi olarak kullanmakla kalmamış, ayrıca yaratıcı bir çalışma da ortaya çıkmış.5. Future of Web Apps
Future of Web Apps web sitesi parlak renkli büyük ve koyu yazıtiplerinin bir karışımını kullanmış. Sitenin ana gezintisi için kullanılan yazıtipinde koyu, negatif harf aralığı ve kısa satır yüksekliği tercih edilmiş ve sonuçta kompakt ve özgün metin tabanlı bir gezinti menüsü ortaya çıkmış.
6. VigetInspire
WidgetInspire blogu bir dizi mükemmel yazıtipi kullanımını içeriyor. İçerik metni için yüksek satır yüksekliği okunulabilirlikten ödün vermeden küçük boyutlu yazıtipinin kullanımının önünü açmış.
7. Diaroogle.com
Diaroogle.com web tasarımında hem serif hem de sans serif yazıtiplerinin bir arada kullanılmasına rağmen sıkı ve birbirini tamamlayan bir çalışma ortaya sunan mükemmel bir örnek. Arama girdi kutusu hattatlığa ait yazıtipi kullanarak onun gözü rahatsız etmeden daha belirgin olmasını sağlamış.
8. The Morning News
Minimalist tasarımlarda tipografi, özellikle tasarımın temasında ve anahattında önemli bir rol oynar. The Morning News temiz ve doğru şekilde boşluklandırılmış yazıtiplerini uygun renklerle birlikte kullanarak temiz ve keskin bir atmosfer oluşturmuş.
9. Ordered List
Ordered List kalın ve büyük boyutları ve renkleri, görece karanlık arkaplanla uyumlu bir şekilde kullanmış. Başlıklar için arkaplan görselleri kullanarak kullanılan yazıtipinin web-safe yazıtipi olma zorunluluğu giderilirken, sitenin erişilebilirliği ve arşivlenebilirliği korunmuş.
10. Words Are Pictures
Words Are Pictures (Kelimeler Resimlerdir), sitenin adına sadık kalarak ana tasarım elementi olarak tipografiyi kullanma yoluna gitmiş. Serif yazıtiplerinin sade bir şekilde stillenmesi ile klasik görünüm ve his korunmuş.
11. Meagan Fisher
Meagan Fisher bir dizi serif yazıtipini ve stili kendi web sitesinde kullanmış. Sitenin sol üst köşesindeki askı etiketi üzerinde kullanılan özgün yazıtipinin dikkat çekiciliği ile birlikte ziyaretçiye o an nerede olduğunu hemen belirtiliyor.
12. The New Yorker
The New Yorker kendilerine ait olan derginin marka yazıtipini web üzerine taşıyarak hem basılı hem de dijital ortamlarda markanın karakterini korumayı başarmış. Serif yazıtiplerinin kullanılması okuyucuya The New Yorker’in hem geleneksel hem de uzun süredir yayımda olan bir dergi olduğu hissini uyandırmasını başarıyor.
13. Black Estate Vineyard
Bir web sitesini “yeraltı” sınıfına sokmadan karanlık arkaplan kullanmak zor bir iştir. Ancak Black Estate Vineyard kendi markalarının rengi olan siyah rengini arkaplanlarında kullanırken, büyük ve kalın serif yazıtiplerini kullanarak sitelerindeki sofistike havayı korumayı başarmış. Yüksek kontrasta sahip bir rengi (beyaz) önplan rengi olarak kullanmak her zaman okunulabilirlik için iyidir.
14. Ad Fed MN
Ad Fed MN sans serif ve serif yazıtiplerini tasarım üzerinde başarılı bir şekilde harmanlamayı başarmış. Tasarımın sağ üst köşesindeki parlak ve sade gezinti menüsü çekici ve kompakt bir gezinti menüsünün kullanılmasını sağlamış. Yanbar üzerinde kullanılan görsel konumlandırma (image replacement) başlıkları sayesinde erişilebilirlik ve arşivlenebilirlik korunurken web-safe yazıtipleri kullanma zorunluluğu da ortadan kaldırılmış.15. What A Lovely Name
What a Lovely Name ziyaretçilerinin bebekleri için anahtar kelimeler (“etiketler”) bazında isim seçmelerine yardımcı olan bir web uygulaması. Anahtar kelimeler bir etiket bulutu üzerinde dizilmiş durumda ve popüler olanlar, diğerlerine kıyasla daha koyu ve büyük boyutlu olarak belirtilmiş.16. Rustin Jessen
Rustin Jessen‘in sitesinin minimalist olmasının bir nedeni var: Okuyucunun dikkatini kendisine ait olan mükemmel sanat çalışmalarına çekmek.
17. The Darling Tree
The Darling Tree‘nin farklı yazıtipi stillerini ve boyutlarını verimli bir şekilde kullanması tasarıma büyük katkı sağlamış.
18. I Love Typography
I Love Typography (Tipografiyi Seviyorum) adındaki bir siteden de oldukça özenle seçilmiş yazıtipi seçimi ve kullanımından başkasını beklemek doğru olmazdı zaten.
19. A List Apart
A List Apart‘ın minimalist tasarımı, özellikle tipografinin işlevsel ve çekici uygulaması üzerine odaklanmış. İçeriğin metni üzerindeki yeterli satır yüksekliği makalelerinin okunulabilirliğini arttırdığı gibi başlıklarda kullanılan farklı renkler aynı konu altındaki makaleler arasında da bir ilişkinin oluşturulmasını sağlamış.
20. Collective Idea
Sitenin sağ üst kısmında kullanılan sıradaki etinlikler bölümünün güzel görünümü, sitenin tipografiye verdiği özeni başarılı bir şekilde yansıtıyor.Tartışalım…
Web Tasarımında Tipografiye yönelik paylaşmak istediğiniz ilginç birşey var mı? Mükemmel bir tipografiye sahip ancak burada paylaşımı yapılmamış bir web sitesi biliyor musunuz? Lütfen fikirlerinizi yorumlarınızla paylaşmayı unutmayın.
Kaynak: Six RevisionsTipografi İle İlgili Yazdığım Diğer Yazılar
* Onlarsız Yapamayacağınız 20 Tipografi Uygulaması* İçinizdeki Tasarımcı İçin Kullanmanız Gereken 17 Ücretsiz Yazıtipi
