Tipografi Terimleri: Kavramlar ve Ekrandaki Karşılıkları

Tipografi terimlerinin çoğu matbaadan geliyor ve ekrana eksik aktarıldı. Bir tasarımcı "kerning" dediğinde CSS'te o ayarın doğrudan karşılığı yok; "leading" dediğinde tarayıcı biraz farklı bir şey hesaplıyor. Aşağıdaki sözlük terimleri tanımlarken ekranda hangi özelliğe denk düştüklerini, denk düşmüyorsa ne kullanacağını da söylüyor.

Font ile typeface aynı şey değil, CSS ikisini birbirine karıştırıyor

Klasik ayrım şöyle: typeface (yazı karakteri) harflerin tasarımıdır, Arial'in kendisidir. Font ise o tasarımın belirli bir kesitidir: Arial Bold 12 punto. Metal dizgide bu ayrım fizikseldi, çünkü her boyut ve her kalınlık ayrı bir harf kasasıydı; 12 puntoluk kalın Arial elle tutulur bir kutuydu.

Ekranda o kutu ortadan kalktı, ayrım da büyük ölçüde anlamını yitirdi. CSS'te aileyi font-family ile seçersin, ama o özelliğin aldığı değer aslında bir typeface adıdır; boyut ve kalınlık font-size ile font-weight'a dağılmıştır. Yani standardın kendisi terimi gündelik anlamıyla kullanıyor. Gündelik işte "font" demeye devam et, ayrımı bir tip tasarımcısıyla konuşurken hatırla.

Punto yanıltır, x-yüksekliği yanıltmaz

Punto harfin yüksekliğini ölçmez. Harfin içine yerleştirildiği kutunun yüksekliğini ölçer, o kutuda harfin ne kadar yer kapladığı tasarımcının kararıdır. Sonuç: 16 piksele ayarlanmış iki farklı yazı karakteri gözle bakıldığında farklı boyda görünür.

Fark x-yüksekliğinden gelir, yani küçük "x" harfinin tabandan tepesine olan mesafeden. Verdana'nın x-yüksekliği kutusuna oranla belirgin şekilde büyüktür, Times New Roman'ın küçüktür; ikisini aynı piksel değerinde yan yana koyduğunda Verdana daha iri durur. Cap height ise büyük harflerin yüksekliğidir ve başlıkların hizasını değerlendirirken ona bakarsın.

Pratik sonuç şu: bir arayüzde yazı karakterini değiştirirken eski piksel değerini olduğu gibi taşıma. Gövde metni 16 pikselde iyi okunuyorduysa bu 16 sayısının değil, o karakterin x-yüksekliğinin başarısıdır. Peki ya aynı ailede kalıp sadece ağırlık değiştiriyorsan? O zaman sorun yok, x-yüksekliği ailenin tamamında sabittir.

Harf anatomisi: hangi terim gerçekten işe yarıyor

Baseline, harflerin oturduğu hayali çizgi. Günlük işte en çok kullandığın anatomi terimi bu, çünkü hizalamanın referansı o: align-items: baseline yazdığında farklı boyutta iki metni tepelerinden değil bu çizgiden hizalarsın, ikon ile etiketin yan yana doğru durması buna bağlı.

Ascender gövdenin üstüne çıkan kısımdır (b, k, l), descender altına inen kısım (g, y, p). Satır aralığını fazla sıktığında bir satırın descender'ı bir alttaki satırın ascender'ına değer; "metin nedense boğuk görünüyor" şikayetinin teknik karşılığı genelde budur. Aperture, c veya e gibi harflerin tam kapanmayan açıklığıdır. Küçük punto ve düşük kontrast koşullarında okunabilirliği belirleyen şey büyük ölçüde bu açıklığın genişliğidir, çünkü daraldıkça c harfi o'ya, e harfi de lekeye benzer.

Boşluk tek bir ayar değil: kerning, tracking, leading

Üçü sık sık birbirinin yerine kullanılıyor, oysa üçü ayrı şeyler ve ekranda üçünün karşılığı da ayrı.

Kerning belirli harf çiftleri arasındaki boşluğun düzeltilmesidir. "AV" ikilisinin doğal boşluğu fazla geniş durur, bu yüzden yazı karakterinin içinde o çift için bir düzeltme tanımlıdır. Dikkat edilecek nokta: bu düzeltme fontun kendi tablosunda yaşar, CSS'te tek tek çiftleri ayarlayamazsın. Elindeki kontrol font-kerning ile tabloyu açıp kapatmaktan ibarettir. Bir logotype'ta veya büyük punto bir başlıkta tek bir çift bozuk duruyorsa çözüm o çifti kendi etiketine alıp orada boşluk vermektir; bütün satıra letter-spacing uygulamak sorunu çözmez, sadece dağıtır.

Tracking, yani CSS'teki letter-spacing, metnin tamamına eşit boşluk ekler. Yeri var: tamamı büyük harfle yazılmış etiketler ve çok küçük puntolar hafif açıldığında belirgin şekilde rahatlar.

Leading matbaada satırların arasına konan kurşun şeritten gelir, yani satıra eklenen boşluktu. line-height ise eklenen boşluğu değil satırın toplam yüksekliğini tanımlar. 16 piksel yazıya line-height: 1.5 verdiğinde satır kutusu 24 piksel olur, fazlalık ikiye bölünür ve yarısı satırın üstüne yarısı altına dağıtılır. Bu yüzden ilk satırın üstünde de beklemediğin bir boşluk oluşur; başlık ile paragraf arasındaki mesafe margin değerinle uyuşmuyorsa hesaba bu yarım payı katmadığın içindir.

Serif ekranda gerçekten okunmuyor mu

"Ekranda sans-serif kullan" tavsiyesi bir dönemin gerçeğiydi. Piksel yoğunluğu düşük ekranlarda serif uçları temiz basılamıyor, küçük puntoda bulanıklaşıyordu. Bugünkü ekran yoğunluklarında o fark ciddi şekilde daralmış durumda ve uzun metinde serif tercih eden yayınların sayısı bunu gösteriyor.

Yargı olarak: gövde metnini serif mi sans mı diye seçme, x-yüksekliğine ve aperture genişliğine bakarak seç. 11-12 piksel civarına inen arayüz etiketlerinde ve eski ekranlarda sans-serif hâlâ daha güvenli. 16 piksel ve üstü uzun metinde serif bir karakterin dezavantajı yok, hatta satır içinde harfleri birbirinden ayırt etmeyi kolaylaştırdığı için avantajı olabilir.

Ağırlık, stil ve bunların dosya maliyeti

Bir ailede ince, normal, orta, kalın gibi ağırlıklar bulunur. Görsel hiyerarşiyi kurmanın en temiz yolu genelde bu ağırlıklardır, çünkü renk veya boyut değiştirmeden vurgu üretirler.

Ama şuna dikkat et: statik bir ailede her ağırlık ayrı bir dosya demektir ve italikleri de sayarsan üç ağırlık altı isteğe dönüşür. Değişken font (variable font) tek dosyada aradaki bütün değerleri taşır, o yüzden ikiden fazla ağırlığa ihtiyacın varsa doğrudan değişken sürümü al. Google Fonts üzerinde çoğu popüler ailenin değişken sürümü mevcut ve seçim ekranında hangi ağırlıkları yüklediğini gösteriyor.

İtalikte de bir tuzak var. Gerçek italik ayrıca çizilmiş bir harf setidir, a ve g harflerinin biçimi değişir. Ailede italik yoksa tarayıcı düz harfleri eğerek taklidini üretir; bu taklit özellikle serif karakterlerde göze batar, çünkü eğim harfin kendi kalınlık dengesini bozar.

Small caps, ligatür ve eşit genişlik

Small caps, küçük harflerin yerine geçen küçültülmüş büyük harflerdir. Kritik ayrıntı: gerçek small caps ayrıca tasarlanmıştır ve kalınlığı normal harflerle uyumludur. Büyük harfleri küçülterek elde ettiğin taklitte çizgiler incelir ve metin gri bir şerit gibi durur. font-variant-caps: small-caps yazdığında karakterin gerçek small caps seti varsa onu kullanır, yoksa tarayıcı taklidi üretir; yani özelliği yazmak tek başına sonucu garanti etmiyor, karakterin o seti taşıdığını kontrol etmen gerekiyor.

Ligatür, yan yana geldiğinde çakışan harflerin tek bir biçimde birleştirilmesidir; f ile i bunun klasik örneği. OpenType'ın liga özelliği ekranda görünen biçimi değiştirir ama metnin altındaki karakterler f ve i olarak kalır, dolayısıyla arama ve kopyalama bozulmaz. Bozulan durum, metinde ligatürün tek bir hazır karakter olarak gömülü olmasıdır; bu daha çok PDF çıktılarında karşına çıkar ve o dosyada "fi" aradığında sonuç bulamamanın sebebi tam olarak budur.

Monospace karakterlerde her harfin ilerleme genişliği eşittir. Kod için doğru tercih, çünkü girinti ve hizalama anlam taşır. Tabloda sayıları hizalamak için monospace'e geçmene ise gerek yok: çoğu oransal karakterde eşit genişlikli rakam seti bulunur ve font-variant-numeric: tabular-nums ile onu açarsın, metnin karakteri de bozulmaz.