--- title: Tipografi source: 'https://academia.sh/tr/kurslar/css-temelleri/tipografi' course: 'CSS ile Görsel Sunum' language: tr updated: '2026-08-17T18:09:20+00:00' license: 'CC BY-SA 4.0' --- # Tipografi Yazı tipi ailesi listesinin çözülmesi, ağırlık ve stil eksenleri, modüler boyut ölçeği ve satır yüksekliğinin birimsiz yazılmasının hesaplanabilir gerekçesi. 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. ```css 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. ```js // 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: ```css :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. ```css /* 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.