Font Eşleştirme: Kontrast, Ölçek ve Yükleme Maliyeti
Font eşleştirme tavsiyelerinin çoğu üç cümleye iniyor: ikiden fazla font kullanma, kontrast kur, aynı ailenin farklı ağırlıklarını seç. Son ikisi çoğu zaman birbirini çürütür. Üçü de sayfanın yükleme maliyetini hiç konuşmaz, oysa font seçmek doğrudan indirilecek dosya seçmek demektir.
"En fazla iki font" kuralı ne demek istiyor
Bu kural bir yasa değil, disiplin için konmuş bir vekil ölçü. Sayfayı dağıtan şey font sayısı değil, birbiriyle yarışan görsel ses sayısı. Tek bir aileyi üç farklı ağırlıkta, üç farklı ölçekte, gelişigüzel kullanan bir sayfa; iyi seçilmiş iki aileyle kurulmuş bir sayfadan çok daha kaotik görünür.
Kuralın işe yarayan kısmı şurada: ikiden fazla aile seçen kişi genellikle neyi neden seçtiğini bilmiyordur. Sayıyı sınırlamak, kararı düşünmeye zorlar. Ama sayıya uyup ölçeği kurmazsanız hiçbir şey kazanmış olmazsınız.
Kontrast kurmakla aynı aileden seçmek aynı anda olmaz
Klasik öneri şudur: başlıkta Roboto Regular, gövdede Roboto Light. Bu öneri, bir üst paragrafta savunulan kontrast fikrini sessizce iptal eder. 400 ile 300 arasında tek basamak var; 16 piksellik bir ekranda okuyucu bu farkı ayırt etmez, hiyerarşi de kurulmaz. Aynı ailede kalacaksanız kontrastı ağırlıkta bir basamakla değil, mesafeyle aramanız gerekir: 700'e karşı 400, üstüne belirgin bir punto farkı.
Aynı önerinin "hafif başlık, kalın gövde" varyasyonu ise hiyerarşiyi tersine çevirir. Gövde metni sayfanın en kalabalık alanı; onu kalınlaştırdığınızda başlık öne çıkmaz, gri bir blokta kaybolur.
Bebas Neue ile Merriweather gibi bir çift bu yüzden iyi çalışır: aileler farklı, kontrast doğal olarak gelir. Ama Bebas Neue yalnızca büyük harfli bir display yazı tipi, alt başlıklarda bile zorlanır. Gövdeye yaklaştırmayın.
Hiyerarşiyi ölçek kurar
Punto değerlerini tek tek gözle seçmek yerine bir oran belirleyin. Gövde 16 piksel, oran 1,25 ise: 20, 25, 31. Dört basamaklık bu skala çoğu içerik sayfasına yeter, üstelik tekrar tekrar aynı kararı vermenizi engeller.
Satır yüksekliği bu hesabın görünmeyen yarısı. Gövdede 1,5 civarı bir değer çoğu serif ve sans-serif için rahat okunur; başlıklarda punto büyüdükçe bu oranı 1,2'ye kadar indirmeniz gerekir, yoksa iki satırlık başlık dağılır.
Her ağırlığın bir bedeli var
Tipografi kararı bir noktada dosya listesine dönüşür. İki aile seçtiniz, her birinden normal, kalın ve italik istiyorsunuz: altı ayrı dosya. Latin alt kümesine indirilmiş bir woff2 bile onlarca kilobayt tutar, üstelik hepsi ilk boyamayı bekleten kaynaklar.
Değişken fontlar (variable fonts) bu tabloyu değiştirdi: tek dosya, ağırlık ekseni boyunca 300'den 700'e kadar her değer. Ben yeni bir projede tipografiyi genelde tek bir değişken aileyle kurar, ikinci aileyi ancak başlıklar gerçekten ayrı bir ses istiyorsa eklerim.
Yükleme davranışını da kararın parçası sayın. font-display: swap metni beklemeden gösterir ama font gelince satırlar kayar; gövde fontunu preload ile öne almak bu kaymayı küçültür. Yedek yığındaki sistem fontuyla asıl fontun metrikleri birbirine yakınsa kayma neredeyse görünmez olur, uzaksa sayfa her yenilemede zıplar. Fontları yalnızca tasarım dosyasında değil, gerçek sayfada ve yavaş bir bağlantıda deneyin.
Lisans
Google Fonts hem ücretsiz hem de web kullanımına açık, bu yüzden çoğu proje için sürtünmesiz. Döküm evlerinden alınan fontlarda masaüstü lisansı ile web lisansı ayrıdır ve web lisansları çoğu zaman aylık gösterim sayısına bağlanır. Sözleşmeyi projeye başlarken okuyun; tipografiyi kurduktan sonra font değiştirmek, ölçeği ve satır yüksekliklerini baştan ayarlamak demek.