Tipografi: Yazı Tipi Sınıfları ve Web'de Font Seçimi

Tipografi harf seçiminden ibaret değil. Punto, satır aralığı, harf aralığı ve metnin sayfadaki yerleşimi de aynı işin parçası. İyi kurulmuş bir metin bloğu okuyucuyu içeri alır, kötü kurulmuşu ilk paragrafta kaybeder. Aşağıda yazı tipi sınıfları, sürekli karışan terimler ve web'de font yüklerken ödediğiniz gerçek bedel var.

Yazı tipi sınıfları

Font seçimini kolaylaştıran ilk şey, elinizdekinin hangi aileye ait olduğunu bilmek. Dört ana grup işinizi görür.

Serif

Harf uçlarındaki küçük ayaklara serif deniyor. Old-Style, Transitional, Modern ve Slab diye ayrılırlar; eskiye gittikçe serifler eğimli ve yumuşak, moderne geldikçe dik ve keskin olur. Basılı kitapta ve gazetede hâlâ varsayılan tercih.

Ekranda "serif mi sans serif mi daha okunur" tartışmasına girmem. Aynı puntoda iki fontun x-yüksekliği arasındaki fark, serif olup olmamasından çok daha belirleyici. Georgia ile Times New Roman'ı 16 piksele koyup yan yana bakın, ikisi de serif ama biri gözle görülür şekilde iri durur.

Sans serif

Ayakları olmayanlar. Helvetica, Futura, Inter gibi. Düşük çözünürlüklü ekranlarda ince serif detayları bulanıklaştığı için arayüz metninde yaygınlaştılar. Kendi içinde Grotesk, Neo-grotesk, Humanist ve Geometrik alt gruplarına ayrılır; geometrik olanlar (Futura, Poppins) uzun metinde yorucudur, çünkü çoğu harf birbirinin döndürülmüş hali gibi görünür.

Monospace, script ve display

Monospace'te her karakter aynı genişlikte, o yüzden kod ve tablo hizalaması için biçilmiş kaftan. Script el yazısını taklit eder, davetiye ve logo dışında yeri yok. Display fontlar başlık için tasarlanmıştır; 12 punto gövde metninde kullanıldığında dağılırlar.

Typeface, font, aile: aynı şeyin üç adı değil

Bu üçünü Türkçe kaynakların çoğu birbirine karıştırıyor, hatta ikisine birden "yazı tipi ailesi" diyip aradaki farkı kendi eliyle siliyor. Ayrım aslında metal baskıdan kalma ve basit:

• Typeface: tasarımın kendisi. "Georgia".
• Font: o tasarımın belirli bir varyantı. "Georgia Bold Italic". Metal dizgide 12 punto Georgia Bold ile 14 punto Georgia Bold ayrı iki fonttu, çünkü ayrı iki kasa harf demekti.
• Aile: typeface'in bütün varyantlarının toplamı.

Günlük konuşmada font ile typeface'i eş anlamlı kullanmak kimseyi yaralamaz. Ama CSS yazarken ayrım işlevsel hale gelir: font-family typeface'i seçer, font-weight ve font-style o ailenin içinden fontu çeker. Tarayıcıda o ağırlığın dosyası yoksa sentetik kalın üretir ve sonuç, tasarımcının çizdiği kalın varyanttan farklı çıkar.

Web'de her ağırlık ayrı bir dosyadır

Süperfamilyalar ve geniş ağırlık yelpazeleri kulağa özgürlük gibi geliyor, faturası indirmede kesiliyor. Klasik statik fontlarda dört ağırlık istiyorsanız ve her birinin italiği de lazımsa, sekiz ayrı dosya indirirsiniz. Tipik bir latin WOFF2 dosyası 15-30 KB civarındadır, yani sekiz dosya kolayca çeyrek megabaytı bulur ve bunların hepsi metin çizilmeden önce beklenen kaynaklardır.

Pratikte yapılacaklar kısa:

• Gerçekten kullandığınız ağırlıkları yükleyin. Tasarımda 300 ve 500 yoksa embed kodundan silin.
• font-display: swap ekleyin ki font inene kadar metin görünmez kalmasın.
• Değişken font (variable font) tek dosyada bütün ağırlık aralığını taşır. Üç ağırlıktan fazlasını kullanıyorsanız neredeyse her zaman daha ucuza gelir.
• Sık kullandığınız fontu kendi sunucunuzdan servis edin. Üçüncü parti alan adına yapılan DNS ve TLS el sıkışması, dosyanın kendisinden uzun sürebilir.

Türkçe için latin-ext

Google Fonts embed kodunu kopyalarken sıkça atlanan nokta bu. Varsayılan alt küme genelde latin gelir ve içinde ğ, ş, İ yoktur. Tarayıcı bu harfleri yedek fonttan çizer, sayfada bir kelimenin ortasında farklı yazı tipiyle duran harfler görürsünüz. Embed adresindeki subset parametresine latin-ext eklemek ya da fontu seçerken karakter desteğini kontrol etmek yeter. Font ararken Google Fonts arayüzünde bir kelimeyi Türkçe yazıp önizlemek en hızlı testtir.

Seçim yaparken

İki typeface yeter: biri başlık, biri gövde. Emin değilseniz tek ailenin iki ağırlığıyla da hiyerarşi kurabilirsiniz, kontrast fonttan değil punto ve boşluktan gelir. Gövde metnini web'de 16 pikselin altına indirmeyin, satır uzunluğunu 60-75 karakter bandında tutun; bu ölçü matbaadan beri değişmedi çünkü gözün satır sonundan bir sonraki satır başına dönme mesafesiyle ilgili.

Marka kimliği için font seçiyorsanız, önce o fontun lisansını okuyun. Ücretsiz görünen birçok display font yalnızca kişisel kullanıma açıktır ve logoya girdiği anda ticari lisans gerektirir.