Konu Başlıkları
Yükleniyor...

Tipografi Anatomisi: Harfin Parçaları ve Pratikteki Karşılıkları

Harf Anatomisi Terimleri ve Ekranda Ne İşe Yararlar

Harf anatomisi terimleri ilk bakışta jargon listesi gibi durur. Oysa çoğu, ekranda gözünüzün zaten gördüğü bir şeyi açıklar: bir fontun neden beklediğinizden küçük göründüğünü, iki harfin neden birbirine karıştığını. Terimleri bilmek font seçimini tahminden çıkarıp sebebe bağlar.

Harfin oturduğu görünmez çizgiler

Bir yazı karakterinin iskeletini dört ölçü anlatır. Baseline, harflerin üzerine oturduğu taban çizgisi. x-height, küçük “x” harfinin boyu, yani gövdenin kendisi. Cap height, büyük harflerin tepesiyle baseline arası. Ascender ve descender ise gövdenin üstüne taşan (“b”, “d”) ve altına inen (“p”, “y”) uzantılar.

Bu ölçüler arasındaki oran fontun karakterini büyük ölçüde belirler. Aynı punto değeri verilmiş iki font, x-height’ları farklıysa gözde farklı boyutta görünür. Göz puntoyu ölçmez, gövdeyi ölçer; ascender ile descender ona boşluk gibi gelir. “16 piksel yeterli mi” sorusunun fonttan bağımsız bir cevabı bu yüzden yok.

Okunaklılığı iç boşluklar belirler

Counter, harfin içinde kalan kapalı boşluktur: “o”nun ortası, “p”nin gövdesi. Aperture ise dışa açılan aralık, “c”nin ağzı ya da “e”nin ucu. Terim listelerinin çoğu aperture’ı counter’ın tamamlanmamış hali diye geçiştirir. Oysa ikisi aynı işi yapmıyor: counter harfin ağırlığını ve dokusunu taşır, aperture harfin başka bir harfe benzeyip benzemediğini belirler.

Aperture kapandıkça “c” küçük boyutta “o”ya, “S” de “5”e yaklaşır. Arayüz için font seçerken bakılacak ilk yer burası. Peki ya markanın fontu bu tarife uymuyorsa? O zaman fontu her yerde kullanmak yerine boyuta göre ayırırsınız: başlıklarda marka fontu, 13-14 piksel civarındaki etiketlerde ve tablo metinlerinde açık aperture’lı ikinci bir aile. Karma kullanım tutarsız görünebilir, okunmayan bir etiketten yine de daha tutarlıdır.

Gövde, kavis ve uçlar

Kalan terimler harfin çizgilerini adlandırır. Stem ana dikey çizgi, bowl “b” ve “o”daki yuvarlak gövde, shoulder “n” ve “h”de gövdeden çıkan kavis, terminal bir çizginin bittiği uç, serif ise bu uçlardaki küçük çıkıntı. “i” üzerindeki noktanın adı tittle, “e”nin kapalı iç boşluğunun adı eye.

Ligatür ise birbirine değen harflerin tek karaktere dönüşmesi. Metin fontlarında standart ligatürler açık gelir ve öyle kalması işe yarar, çünkü “fi” ikilisinde noktayla f’in kancası çakışır (dekoratif ligatür setlerini çoğu arayüzde abartılı buluyorum).

Font değiştirmek aynı zamanda bir düzen kararıdır

Terimlerin en somut karşılığı font değiştirirken ortaya çıkar. İki aile arasında x-height farkı varsa aynı punto ve aynı satır aralığındaki metin farklı sayıda satıra yayılır. Kart yüksekliği değişir, butondaki yazı taşar, tablo sütunu kayar. Tasarımda tek bir açılır menüden yapılan değişiklik, uygulamada onlarca bileşenin ölçüsünü oynatır.

Aynı sorun web fontu yüklenirken de yaşanır. Tarayıcı önce yedek fontu çizer, asıl font geldiğinde metrikler değişir ve sayfa zıplar. CSS tarafında bunun doğrudan karşılığı var: yedek font için ayrı bir @font-face tanımlayıp size-adjust, ascent-override ve descent-override ile metrikleri asıl fonta yaklaştırırsınız.

@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; }

Buradaki yüzdeler örnek. Gerçek değerler iki fontun x-height ve ascender ölçülerinden hesaplanır, göz kararı konmaz. Harfler yine farklı görünür ama satır kırılmaları ve blok yükseklikleri sabit kalır. Anatomi terimlerinin işi burada bitiyor: harfin parçalarını adlandırmak, sonunda hangi sayıyı neye göre ayarlayacağınızı bilmek demek.

Kaynaklar