Okuma deneyiminizi güzelleştiren web tipografi örnekleri

Yazı tipi(font) seçimi her tasarım projesinin ayrılmaz bir parçasıdır.

Typekit gibi binlerce yazı tipi barındırma hizmeti veren, koleksiyon oluşturmanıza yardımcı olan ve kullandığınız programlar ile entegre çalışan siteler bulunuyor. Yazı tipi gibi yeni koleksiyon parçalarına sahip olmak için neredeyse hergün bu tarz siteleri ziyaret ediyoruz. Bir web tasarımcısı olarak, tipografi takıntınız varsa, bu yazıyı seveceğinizi düşünüyorum. :)

Aşağıdaki örneklerden de göreceğiniz gibi, iyi bir tipografinin, uygun yazı tipi seçimi ile başlayacağını söyleyebilirim.

Vesper Hotel

Yeni Zelanda’da yaşıyan yazı tipi tasarımcısı Kris Sowersby, Vesper Hotel‘in web sitesinde Proxima Nova ve Domaine Display, düz hatlara sahip ve süslü yazı tipleri ile güzel bir kombinasyon yaratmış. Domaine Display gibi daha az kullanılan bir yazı tipi ile Proxima Nova gibi bir yazı tipini eşleştirerek, son bir kaç yılın web fontları olsa da, tasarım farklı ve taze hissetmenize neden olabiliyor.

Dragone

Dragone web sitesi bana, adeta bir tabloya bakıyormuşum hissi veriyor. Playfair Display fontunu kullanmak da, bu hissiyatı oldukça artırıyor. Playfair Display, birçok tasarımcının kullandığı serif ve modern bir yazı tipidir. Başlıklar da regular ve bold kullanılırken, öne çıkan alt metinlerde ise italik kullanılmış. Futura ile sağlam bir temel atılmış.

Görsellerin üzerinde kullanılan büyük ve küçük punto yazı tiplerinin daha okunabilir olması, tasarımcıların görseller üzerindeki karartma, sulu boya tarzı ve yüksek kontrast kullanımlarından kaynaklanıyor. Zarif, okunabilir, rahat ayrıştırılabilir ve gösterişli bir web sitesidir.

Geleneksel ve birçok hikayesi olan Georgia’da benzer yüze sahip bir yazı tipidir.

Romain Balcerak

Başka bir yazı tipi de, üretken Kris Sowersby’dan geliyor: Tiempos Text. Burada Sentinel ile eşleştirilmiş Slab Serif yazı tipleri ise Hoefler & Co’dan. Apercu yazı tipi, Colophon Foundry’den tuhaf bir grotesk, karışımı atılmış.

Üç yazı karakterl kullanmak bazen biraz fazla olabilir, ama Romain Balcerak web sitesi tutarlı ve basit bir tasarım üzerine kurulu. Tiempos Text yazı tipi başlıklar için kullanılmış. Sentinel yazı tipi italik tarzda alt başlıklar için seçilmiş. Apercu, baştan başa body copy şeklinde kullanılmış.

Rails Assets

Adelle Sans ve Whitney birbirine benzer iki sans-serif yazı tipidir — her ikisi de bir hümanist bakış açısıyla grotesk’tir. İki benzer yazı karakterini birleştirilerek, kesinlikle alışılmışın dışında bir görünüm kazandırabiliriz. Tasarımcının “ikisi arasında seçim yapamadım ve her iki yazı karakterini de kullanmaya karar verdim” hissiyatı barındırdığını düşünüyorum.

Whitney ve Adelle Sans kullanımı, başlıklar için tutarlıdır ve bu tasarımda yazı karakterlerinin okunabilirliği zordur.

Dollar A Day

Çok tartışılacak bir duyuru yapacağım: Apercu, 2014’ten beri web sitelerinde trendy bir yazı tipidir. Ben hala Apercu yazı tipine birçok web sitesinde rastlıyorum.

Tahminimce Apercu yazı tipi “Ben Helvetica değilim!” diyor. Tasarımcılar web projelerinde okunabilirliği artırmak ve görünümü en basit hale indirmek için, büyük puntolarla sadece bu yazı tipini kullanabilir.

Her web sitesi aynı yazı tipini kullanır ve o tazelik kaybolur. Ama şu an Apercu hala heyecan verici.

New Venture Scouting

Slab serif Jubilat, önemli kahramanı Open Sans ile eşleştirilmiş ve harika görünüyor. Sıcak ve kıvrımlı yazı yüzü hatlarına bir bakın, ne kadar ön planda ve okunabilir. Görsellerin üzerine yazılması için tasarlanmış gibi… Başlıklar da adete ahenkle dans ediyor… Proxima Nova‘yı Navigasyon için ve Arial yazı tipini, body copy olarak kullandıklarını görüyoruz.

Body copy olarak kullandıkları Arial yazı tipi yerine, web sitesinde kullanılan Open Sans kullanılabilirdi. Navigasyon için ayrıca bir yazı tipi ailesi kullanmanın rasyonel bir nedeni yoksa, epey gereksiz bir eylem haline geliyor.

Bu web sitesinde sırasıyla Jubilat, Open Sans, Proxima Nova ve Arial yazı tiplerinin gelişigüzel bir karışım olduğunu görüyoruz. Bu da aslında tutarsızlığa neden oluyor. Bir projede, stil klavuzu (Style Guide) oluşturmak genellikle meydana gelen bu gibi sorunları önleyecektir.

United Strands

Montserrat, Google Fonts’un ücretsiz yazı tipleri arasındadır. United Strands, web sitesinde büyük bir cesaretle heryerde kullandığını görüyoruz. Kendine özgü bir karakteri var.

Montserrat’ın “G” harfi beni benden alıyor. Arka planı solid ve cesur renklerin üzerindeki duruşu ayrı tabii.

Monserrat’ın tek dezavantajı italik stillerinin olmamasıdır. “Tasarımcıların sınırlı stilleri, bir tek yazı tipi ile mükemmel bir iş yaptı.” dedirtiyor. Büyük harfle belirlenen metin öğelerine her zaman hoş bir dokunuş ile normalden biraz daha geniş harf aralığı verilir. Cömertce verilen boşluk ve cesur renk kullanımı ile güçlü bir kontrast oluşturuyor.

Norwegian Rain

Norvegian Rain web sitesinde, klasik Freight Text ile geometrik sans-serif Avenir birleştirilmiş. Avenir 2014 yılının başlarında yapılan bir araştırmaya göre önde gelen tasarımcılar arasında en favori yazı tipi olarak seçildi. “Avenir” kelimesi Fransızca “gelecek” demektir — yazı tasarımı efsanesi Adrian Frutiger Futura arkasındaki geometrik ilkeleri aldı ve Avenir’i oluşturmak için sıcak, organik bir dokunuş ekledi. Bu gerçekten, takdir edilenler arasında favori bir tipografi; hiç şaşırtıcı değil.

Bunun dışında, ince tipografi yapısı ile bu takdir edilmesi gereken ve büyük bir web sitesidir.

Pelican Books

Pelican Books, özellikle web tasarımcıları arasında son derece popüler yazı tipi ünvanına Brandon grotesque sahiptir. Bu aslında Brandon Text denilen Brandon Grotesque’e özel metin versiyonudur. Brandon Text daha yüksek bir x-yüksekliğe sahip ve body copy için optimize edilmiştir.

İlginçtir, bu web sitesi hala body copy için Brandon Text kullanıyor. Brandon Text, hala büyük boyutlarda harika görünüyor ama önceki yazı tiplerine göre daha tonlu ve muhafazakar, çünkü orijinal Brandon Grotesk gibi sevimli değil. Brondan Text etrafındaki en okunabilir serif yazı tipidir, bu nedenle “Online Oku” bölümünde metnin uzun geçişleri için mükemmel bir seçimdir. İnce kağıt dokusu ile birlikte, tipografi gerçekten bir kitap okuma deneyimi yaşatıyor.

“Zamanında kullanabileceğiniz yazı tipi koleksiyonunuz olsun” diyor ve bu güzel makaleyi sizlerin yorumuna bırakıyorum.

Teknik not: Ekran görüntüleri Mac sisteminde ve GoogleChrome tarayıcısında alınmıştır. Yazı renderları tarayıcıdan tarayıcıya değişir, bu yüzden sonuç farklı olabilir.

Makalenin derlenmesinde smashingmagazine.com’a katkıda bulunan by Jeremiah Shoaf’ın yazısından yararlanılmıştır.

Originally published at blog.designedbysherpa.com on July 16, 2015.