Tipografi

Renk kararları verildi ama metnin kendisine dokunulmadı. Ölçüm istasyonu sayfasında bir başlık, bir künye paragrafı, bir ölçüm çizelgesi ve bir açıklama notu var; hepsi aynı yazı tipiyle, aynı boyutta ve aynı satır aralığıyla duruyor.

Bu ders tipografinin üç ekseni üzerinde durur: hangi yazı tipiyle, hangi boyutta, hangi satır aralığıyla. Üçünün de hesaplanabilir bir yanı vardır ve kararlar tek tek değil, ölçek olarak verilir.

Yazı Tipi Ailesi Bir Listedir

font-family bir ad değil, virgülle ayrılmış bir öncelik listesi alır. Liste soldan sağa denenir ve bulunan ilk aile kullanılır.

body { font-family: "Inter", system-ui, sans-serif; }

Çözümleme karakter düzeyinde yapılır: listedeki ilk aile bir karakteri içermiyorsa, o karakter için sonraki aileye bakılır. Bir belgede aynı satırdaki iki karakter iki farklı aileden gelebilir. Türkçe metinlerde bu, noktalı harflerin listedeki farklı bir aileden alınmasına ve satırın karışık görünmesine yol açabilir.

Listenin sonunda her zaman bir genel aile (generic family) bulunur: serif, sans-serif, monospace, cursive, system-ui, ui-monospace. Bunlar belirli bir yazı tipini değil, bir sınıfı adlandırır; hangi dosyanın kullanılacağını ortam belirler. Genel aile yazılmadığında ve listedeki hiçbir ad bulunamadığında tarayıcının varsayılan yazı tipi kullanılır — bu, kontrolün büsbütün bırakılması demektir.

Ad içinde boşluk varsa tırnak içine alınır. Genel aileler anahtar sözcüktür ve tırnaklanmaz; tırnaklanırsa bir aile adı gibi aranır ve bulunamaz.

Ağırlık ve Stil Ayrı Eksenlerdir

font-weight 100 ile 900 arasında bir sayı ya da normal (400) ile bold (700) anahtar sözcüklerini alır. Bir ailede bildirilen ağırlığa karşılık gelen bir dosya yoksa gerçekleştirim en yakınını seçer; bulunamayan bir ağırlığı hesapla üretmesi de mümkündür ve sonuç, gerçek bir kalın kesimden farklı görünür.

font-style üç değer alır: normal, italic, oblique. İlk ikisi arasında bir ayrım vardır — italic ailenin ayrı çizilmiş eğik kesimini ister, oblique düz kesimin eğilmesini kabul eder. Ailede eğik kesim yoksa italic de eğilerek üretilir.

Bu iki eksenin belgeyle ilişkisi ayrıca kurulmalıdır. Web’in Temelleri ve HTML kursunda strong ve em ögelerinin anlam bildirdiği, b ve i ögelerinin ise yalnızca görünüm bildirdiği kurulmuştu. Bir metni kalın göstermek için strong yazmak, o metne “önemli” anlamı yükler. Yalnızca görsel bir vurgu isteniyorsa karar biçemde verilir.

Satır Yüksekliği Birimsiz Yazılır

line-height bir sayı, bir uzunluk ya da bir yüzde alabilir. Üçü de aynı ilk sonucu verir ama kalıtım davranışları ayrılır.

// tipografi.mjs — birimli ve birimsiz line-height farki; modular olcek
console.log("--- line-height: birimli deger kalitilir, hesaplanmis olarak ---");
const agac = [
  { ad: "body",  fontSize: 16 },
  { ad: "main",  fontSize: 16 },
  { ad: "h1",    fontSize: 32 },
  { ad: "small", fontSize: 12 },
];

for (const bicim of ["1.5", "24px", "150%"]) {
  console.log(`\nbody { line-height: ${bicim} }`);
  const govde = agac[0];
  for (const o of agac) {
    let satir;
    if (bicim.endsWith("px"))      satir = parseFloat(bicim);            // hesaplanmis: sabit px
    else if (bicim.endsWith("%"))  satir = govde.fontSize * parseFloat(bicim) / 100; // body'de cozulur
    else                           satir = o.fontSize * parseFloat(bicim);  // her ogede yeniden
    console.log(`  ${o.ad.padEnd(6)} font-size=${String(o.fontSize).padStart(2)}px -> line-height=${satir}px  (oran ${(satir / o.fontSize).toFixed(2)})`);
  }
}

console.log("\n--- modular olcek: taban 16px, oran 1.25 ---");
const taban = 16, oran = 1.25;
const adimlar = [-2, -1, 0, 1, 2, 3, 4];
for (const n of adimlar) {
  const px = taban * Math.pow(oran, n);
  console.log(`adim ${String(n).padStart(2)}: ${px.toFixed(2)}px = ${(px / taban).toFixed(4)}rem`);
}

console.log("\n--- satir uzunlugu ---");
const ORT_KARAKTER = 0.5; // ortalama karakter genisligi, em cinsinden (ornek deger)
for (const fs of [16, 18, 20]) {
  for (const en of [480, 640, 800]) {
    const karakter = en / (fs * ORT_KARAKTER);
    const uygun = karakter >= 45 && karakter <= 75 ? "uygun" : "uygun degil";
    console.log(`font-size=${fs}px, kutu=${en}px -> ~${karakter.toFixed(0)} karakter/satir  ${uygun}`);
  }
}

--- line-height: birimli deger kalitilir, hesaplanmis olarak ---

body { line-height: 1.5 }
  body   font-size=16px -> line-height=24px  (oran 1.50)
  main   font-size=16px -> line-height=24px  (oran 1.50)
  h1     font-size=32px -> line-height=48px  (oran 1.50)
  small  font-size=12px -> line-height=18px  (oran 1.50)

body { line-height: 24px }
  body   font-size=16px -> line-height=24px  (oran 1.50)
  main   font-size=16px -> line-height=24px  (oran 1.50)
  h1     font-size=32px -> line-height=24px  (oran 0.75)
  small  font-size=12px -> line-height=24px  (oran 2.00)

body { line-height: 150% }
  body   font-size=16px -> line-height=24px  (oran 1.50)
  main   font-size=16px -> line-height=24px  (oran 1.50)
  h1     font-size=32px -> line-height=24px  (oran 0.75)
  small  font-size=12px -> line-height=24px  (oran 2.00)

--- modular olcek: taban 16px, oran 1.25 ---
adim -2: 10.24px = 0.6400rem
adim -1: 12.80px = 0.8000rem
adim  0: 16.00px = 1.0000rem
adim  1: 20.00px = 1.2500rem
adim  2: 25.00px = 1.5625rem
adim  3: 31.25px = 1.9531rem
adim  4: 39.06px = 2.4414rem

--- satir uzunlugu ---
font-size=16px, kutu=480px -> ~60 karakter/satir  uygun
font-size=16px, kutu=640px -> ~80 karakter/satir  uygun degil
font-size=16px, kutu=800px -> ~100 karakter/satir  uygun degil
font-size=18px, kutu=480px -> ~53 karakter/satir  uygun
font-size=18px, kutu=640px -> ~71 karakter/satir  uygun
font-size=18px, kutu=800px -> ~89 karakter/satir  uygun degil
font-size=20px, kutu=480px -> ~48 karakter/satir  uygun
font-size=20px, kutu=640px -> ~64 karakter/satir  uygun
font-size=20px, kutu=800px -> ~80 karakter/satir  uygun degil

Üç bloğun karşılaştırılması kuralı veriyor.

Birimsiz 1.5 yazıldığında oran kalıtılır: her öge kendi yazı boyutunu 1,5 ile çarpar. 32 piksellik başlık 48, 12 piksellik küçük metin 18 birimlik satır yüksekliği aldı; oran her yerde 1,50 kaldı.

24px ve 150% yazıldığında ise hesaplanmış değer kalıtılır. Kalıtım ve varsayılan değerler dersinde kurulan kural burada sonucunu veriyor: body ögesinde 150% çözülür ve 24 pikselde sabitlenir; alt ögeler o sabiti devralır. 32 piksellik başlığın satır yüksekliği 24 birim oldu — oran 0,75, yani satır yazıdan kısa. Başlığın satırları üst üste biner.

Uygulanabilir kural şudur: line-height birimsiz yazılır. Birimli yazım yalnızca tek bir ögede, kalıtımın istenmediği durumda kullanılır.

Modüler Ölçek

Yazı boyutları tek tek seçilmez; bir tabandan ve bir orandan türetilir. Modüler ölçek (modular scale), ardışık boyutların sabit bir oranla çarpılmasıyla üretilen dizidir:

$$b_n = b_0 \cdot r^n$$

Çıktının ikinci bloğu 16 piksel taban ve 1,25 oranla yedi basamak üretiyor. Sonuçlar rem cinsine çevrilmiş hâlde de veriliyor; bu, ölçeğin biçem dosyasına nasıl yazılacağını doğrudan gösterir:

:root {
  --olcek-1: 0.64rem;
  --olcek-2: 0.8rem;
  --olcek-3: 1rem;
  --olcek-4: 1.25rem;
  --olcek-5: 1.5625rem;
  --olcek-6: 1.9531rem;
  --olcek-7: 2.4414rem;
}

Ölçeğin değeri, tutarlılığı zorunlu kılmasındadır: bir başlığa “biraz daha büyük” bir boyut verilemez; ölçekteki bir sonraki basamak seçilir. Oran büyüdükçe basamaklar arasındaki fark açılır ve hiyerarşi belirginleşir; küçüldükçe ölçek sıkışır ve düzeyler birbirine yaklaşır.

Satır Uzunluğu

Çıktının üçüncü bloğu, boyut ile kutu genişliği arasındaki ilişkiyi hesaplıyor. Okunabilir satır uzunluğu için yerleşik ölçüt satır başına 45–75 karakterdir; hesap bu aralığa göre değerlendiriliyor.

Tablo bir ödünleşimi gösteriyor. 640 birimlik bir kutuda 16 piksellik metin satır başına yaklaşık 80 karakter veriyor — aralığın dışında. Aynı kutuda 18 piksellik metin 71 karakter veriyor ve aralığa giriyor. Yazı boyutunu büyütmek satırı kısaltır, çünkü aynı genişliğe daha az karakter sığar.

Bu, kutu boyutlandırma dersinde yazılan max-width: 70ch bildiriminin gerekçesidir: ch birimi karakter genişliğine bağlı olduğu için, yazı boyutu değiştiğinde kutu genişliği de onunla birlikte değişir ve satır uzunluğu aralıkta kalır. Hesaptaki 0,5 em ortalama karakter genişliği örnek bir değerdir; gerçek oran yazı tipine göre değişir.

/* istasyon.css — 18. adım: tipografi ölçeği */
:root {
  --yazi-govde: 1rem;
  --yazi-kucuk: 0.8rem;
  --yazi-h3: 1.25rem;
  --yazi-h2: 1.5625rem;
  --yazi-h1: 2.4414rem;
}

body {
  font-family: system-ui, sans-serif;
  font-size: var(--yazi-govde);
  line-height: 1.5;
}

h1 { font-size: var(--yazi-h1); line-height: 1.15; }
h2 { font-size: var(--yazi-h2); line-height: 1.2; }
h3 { font-size: var(--yazi-h3); line-height: 1.3; }

.kaynak-notu { font-size: var(--yazi-kucuk); }

.olcum-cizelgesi td.deger {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

Başlıklara gövde metninden küçük satır yüksekliği oranı verilmesi bir tipografi kuralıdır: büyük punto satırlar zaten uzaktır, aynı oran korunursa aralık gereğinden açık görünür.

Son kural ölçüm çizelgesine özgüdür. tabular-nums rakamların eşit genişlikte çizilmesini ister; böylece alt alta gelen sayıların basamakları hizalanır. Yazı tipi bu özelliği taşımıyorsa bildirim etkisiz kalır ve rakamlar orantılı genişlikte kalır — sayısal bir çizelgede okumayı güçleştiren bir durumdur.

Özet

• font-family bir öncelik listesidir ve karakter düzeyinde çözülür; listenin sonunda genel bir aile bulunmazsa kontrol büsbütün ortama bırakılmış olur.
• font-weight ve font-style ayrı eksenlerdir; ailede karşılığı olmayan bir ağırlık ya da eğim hesapla üretilir ve gerçek kesimden farklı görünür.
• line-height birimsiz yazıldığında oran kalıtılır ve her öge kendi boyutuyla çarpar; birimli ya da yüzdeli yazımda hesaplanmış değer kalıtılır ve büyük punto ögelerde satırlar üst üste biner.
• Yazı boyutları tek tek seçilmez; bir taban ve bir orandan modüler ölçek olarak türetilir ve bir hiyerarşi düzeyi ölçekteki bir basamağa karşılık gelir.
• Satır uzunluğu 45–75 karakter aralığında tutulur; yazı boyutunu büyütmek aynı kutuda satırı kısaltır, bu yüzden boyut ve kutu genişliği birlikte kararlaştırılır.

Sonraki Adım

Bu ders yazı tipini bir adla çağırdı ama adın karşılığı olan dosyanın nereden geldiğini sormadı. Bir yazı tipi belgeye nasıl bağlanır, dosya inerken metin ne olur ve bu bekleme sayfanın okunmasını nasıl etkiler? Sonraki ders yazı tipi yüklemesini ve yükleme sırasındaki görüntüleme davranışını ele alır.