Tipografi Nedir?

Okunabilir satır uzunluğu

Göz, uzun bir satırın sonundan bir sonraki satırın başına dönerken yerini kaybeder; çok kısa satırlar ise okumayı sürekli böler. Tipografi kaynaklarında gövde metni için en sık önerilen aralık, satır başına yaklaşık 45–75 karakterdir. WCAG 2.2'nin AAA düzeyindeki 1.4.8 kriteri de satır genişliğinin 80 karakteri (Çince, Japonca, Korece için 40) aşmayacak biçimde ayarlanabilmesini ister.

CSS'te bunu sağlamanın en basit yolu, metin kolonunun genişliğini ch birimiyle sınırlamaktır. 1ch, kullanılan fontta "0" karakterinin genişliğidir; bu yüzden 65ch ortalama metinde kabaca 65–75 karaktere denk gelir:

.makale {
  max-width: 65ch;
  margin-inline: auto;
}

Geniş ekranlarda metni tüm sayfaya yaymak yerine kolonu dar tutup boşluğu kenarlara bırakmak, okunabilirliği bozmadan düzeni ferah gösterir.

Tip ölçeği ve satır aralığı

Başlık ve metin boyutlarını tek tek seçmek yerine bir tip ölçeği kullanmak tutarlılık sağlar: taban boyut belirlenir, her üst kademe sabit bir oranla büyür (örneğin 1,25). Bu kademeler design token olarak tanımlanırsa tasarım dosyası ile kod aynı değerleri paylaşır.

:root {
  --metin: 1rem;                                  /* tarayıcı varsayılanı genellikle 16px */
  --h3: 1.25rem;
  --h2: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
  --h1: clamp(1.9rem, 1.4rem + 2.2vw, 2.45rem);
}
body { font-size: var(--metin); line-height: 1.6; }
h1, h2, h3 { line-height: 1.2; }

clamp() başlıkların ekran genişliğiyle birlikte, belirlenen alt ve üst sınırlar içinde akıcı biçimde büyümesini sağlar. Gövde metninde 1,5 civarı satır yüksekliği yaygın bir başlangıçtır; büyük başlıklarda daha sıkı bir değer daha dengeli görünür. Boyut farkları, sayfanın görsel hiyerarşisinin temel taşıdır.

Kullanıcının ayarlarına saygı

Bazı kullanıcılar tarayıcının varsayılan yazı boyutunu büyütür. Boyutlar px yerine rem ile verildiğinde bu tercih tüm ölçeğe yansır. WCAG 2.2'nin AA düzeyindeki iki kriteri burada doğrudan devreye girer: 1.4.4, metnin %200'e kadar büyütülebilmesini; 1.4.12 ise kullanıcı satır yüksekliğini font boyutunun 1,5 katına, paragraf sonrası boşluğu 2 katına, harf aralığını 0,12 katına ve kelime aralığını 0,16 katına çıkardığında içerik ya da işlev kaybı olmamasını ister. Sabit yükseklikli kutular ve taşmayı gizleyen kartlar, bu testte en sık bozulan yerlerdir. Metnin zemine karşı okunabilirliği ise renk kontrastı konusudur.

Web fontları ve performans

Özel bir yazı tipi kullanmak, tarayıcının ek dosyalar indirmesi demektir. Her ağırlık ve stil (normal, kalın, italik) çoğunlukla ayrı bir dosyadır; yalnızca gerçekten kullanılanları yüklemek veya tek dosyada birden çok ağırlık taşıyan değişken fontları tercih etmek yükü azaltır. Font geç gelirse metin ya bir süre görünmez kalır ya da yedek fontla görünüp sonradan değişir; bu değişim satır kırılımlarını kaydırıp CLS değerini artırabilir. Yükleme stratejileri ve font-display ayrıntıları web fontu maddesinde anlatılıyor.

Türkçe metinde dikkat edilecekler

• Karakter kapsamı: Dosya boyutunu küçültmek için fontu yalnızca temel Latin karakterleriyle alt kümelemek (subsetting), ğ, ş, ı, İ gibi harflerin yedek fonttan gelmesine yol açar. Sonuç, aynı kelimede iki farklı yazı tipidir. Latin Extended kapsamı kontrol edilmelidir.
• Büyük harf dönüşümü: CSS'teki text-transform: uppercase dile duyarlıdır. Sayfada lang="tr" tanımlı değilse "istanbul" ifadesi "ISTANBUL" olarak görünür; doğru dil etiketiyle "İSTANBUL" olur.
• Uzun kelimeler: Türkçenin eklemeli yapısı, dar mobil kolonlarda taşan kelimeler üretebilir. Başlıklarda overflow-wrap: break-word ve doğru dil etiketiyle hyphens: auto bu riski azaltır.