Ücretsiz Fontlarla Web Tipografisi: Hiyerarşi, Performans, Lisans
Ücretsiz font bulmak uzun süredir sorun değil; Google Fonts tek başına binlerce aile barındırıyor ve neredeyse tamamı ticari işlerde kullanılabiliyor. Sorun seçimden sonra başlıyor. Kaç ağırlık yüklediğiniz, satır yüksekliğini nereye koyduğunuz, başlıkla gövde arasındaki farkın okuyucuya ne anlattığı: sayfanın okunaklılığını fontun adından çok bunlar belirliyor.
Hiyerarşi, punto farkı demek değil
Tipografik hiyerarşi, okuyucunun metni okumadan önce sayfanın yapısını görebilmesi demek. Göz bir bakışta ayırt eder: burası ana başlık, burası bölüm başlığı, burası gövde. Bu ayrımı yapan araçlar boyut, ağırlık ve boşluk.
En sık yapılan hata hiyerarşiyi yalnızca puntoyla kurmaya çalışmak. 16 piksellik gövdenin üstüne 18 piksellik bir bölüm başlığı koyduğunuzda hiyerarşi çıkmaz, kararsızlık çıkar. Fark bakışta okunmalı: gövde 16 ise bölüm başlığı 24 ile 28 bandında, ana başlık 36 ve üstünde durur. Ağırlık da aynı mantıkla çalışır. Regular (400) ile Medium (500) arasındaki fark çoğu ekranda fark edilmez, Regular ile Bold (700) arasındaki fark edilir.
Başlığın üstündeki boşluk altındakinden belirgin şekilde fazla olsun. Aksi halde başlık, ait olduğu bölümden çok bir önceki paragrafa yapışık görünür.
İki aile yeter
Klasik yöntem bir tırnaklı (serif) fontu bir tırnaksız (sans-serif) fontla eşleştirmek. Karakteri olan başlığa, sakin olan gövdeye gider. Denenmiş eşleşmeler: Montserrat ile Merriweather, Playfair Display ile Open Sans, Oswald ile Lora. Üçü de Google Fonts'ta ve açık lisanslı.
İkiden fazla aile koymam. Üçüncü aile pratikte ilk ikisinden birinin işini tekrar eder ve sayfanın kimliğini dağıtır; ihtiyaç duyulan şey genelde yeni bir font değil, elinizdekinin farklı bir ağırlığı ya da italiği.
Her ağırlık ayrı bir dosya
Font seçimi tasarım kararı gibi görünür, faturası ağ tarafında kesilir. Statik font kullanıyorsanız her ağırlık ve her stil ayrı bir dosyadır. İki aile, aile başına üç ağırlık, bir de bunların italikleri: on iki istek. Hepsi metnin ekrana gelmesini geciktirir.
Buradan çok tekrarlanan iki tavsiyenin birbirini kestiği yer görünür hale geliyor. "Zengin ağırlık seti sunan aileleri tercih edin" ile "yalnızca ihtiyacınız olan ağırlıkları yükleyin" aynı anda uygulanamaz. İkincisini seçin: kullanılmayan ağırlık tasarımda hiçbir işe yaramaz, ama her sayfa açılışında bedelini ödetir. Ağırlık çeşitliliği gerçekten gerekiyorsa değişken (variable) fontlar hesabı tersine çevirir, çünkü tüm aralığı tek dosyada taşırlar; Inter, Roboto Flex ve Source Sans 3 bu biçimde sunuluyor.
İki küçük ayar da işi rahatlatır. font-display: swap tanımlayın, font inerken tarayıcı metni sistem fontuyla gösterir ve okuyucu boş alana bakmaz. Fontları üçüncü taraf sunucudan çağırmak yerine kendi alan adınızdan servis edin: fazladan bağlantı kurulmaz, üstelik ziyaretçinin IP adresi başka bir sunucuya gitmediği için kişisel veri tarafı da temiz kalır.
Okunabilirlik ayarları
Satır yüksekliği gövde metninde font boyutunun 1.5 ile 1.7 katı arasında iyi çalışır (16 piksel için 24-27 piksel). Başlıkta bu oran düşer: 36 piksellik bir başlıkta 1.6 kat satırları birbirinden koparır, 1.1 ile 1.2 arası yeterli.
Harf aralığına çoğu zaman dokunmaya gerek yok. İstisnası büyük harfle dizilmiş kısa metinler, yani buton, etiket ve menü başlıkları; orada 0.02em ile 0.05em arası bir açma harflerin birbirine yapışmasını engeller.
Kontrast tarafında ölçüt net. WCAG AA, gövde metni için 4.5:1 istiyor. Açık gri metin tasarım ekranında şık görünür ve neredeyse her zaman bu eşiğin altında kalır. Beyaz zeminde #333 civarı bir koyu gri hem eşiği geçer hem saf siyahın sertliğini almaz.
Lisansı indirmeden önce okuyun
Google Fonts'taki fontlar SIL Open Font License altında, ticari kullanımda soru işareti yok. FontSquirrel lisansı doğrulanmış @font-face paketleri verdiği için fontu kendi sunucunuza taşırken pratik.
DaFont ve benzeri arşivlerde durum karışık: aynı sitede hem açık lisanslı hem "yalnızca kişisel kullanım" fontları yan yana duruyor. İndirdiğiniz klasördeki lisans metnini açmadan ticari bir işe koymayın. Müşteri sitesinde yıllarca duran tek bir font, sonradan gelen bir uyarı mektubuna dönüşebiliyor.
Kaynaklar