Tipografi Nedir, Yazı Web'de Neye Göre Görünüyor?

Haberci

SEO UZMANI
Yönetici
Katılım
21 May 2023
Mesajlar
711
Tepki
17
Puan
18
916




Aynı yazı, bir ekranda dengeli ve okunaklı görünürken diğerinde sıkışık ve yorucu olabiliyor. Değişen şey metin değil; hangi yazı tipinin bulunduğu, satırların ne kadar aralıklandığı ve tarayıcının listedeki hangi seçeneğe düştüğü.

Bu yazı tipografinin web tarafında ne anlama geldiğini, yazı tipi listesinin nasıl çalıştığını, hangi özelliklerin metnin görünümünü belirlediğini ve standardın bu alanda neyi tanımladığını MDN ile W3C belgelerine bakarak topluyor.

Web'de tipografi neyi kapsıyor?​


MDN'in metin biçimlendirme dersi, metni biçimlendiren özellikleri iki kümeye ayırıyor. Birincisi yazı tipi biçimleri: hangi yazı tipinin uygulandığı, boyutu, kalın veya eğik olup olmadığı gibi özellikler.

İkincisi metin düzeni biçimleri: satırlar ve harfler arasındaki boşluk ile metnin içerik kutusunda nasıl hizalandığı gibi özellikler. Yani tipografi kararı yalnız "hangi font" sorusundan ibaret değil; boşluk ve hizalama da aynı bütünün parçası.

Metin nasıl yerleşiyor?​


Aynı ders yerleşimi de tarif ediyor: bir ögenin içindeki metin, o ögenin içerik kutusunun içine yerleşiyor. İçerik alanının sol üstünden başlıyor, sağdan sola yazılan dillerde ise sağ üstünden ve satır sonuna kadar akıyor.

Satır bittiğinde bir alta iniyor ve akış yeniden başlıyor; bu düzen içerik bitene kadar tekrarlanıyor. Ders, metnin satır sonuna gelmeden ya da elle satır sonu eklenmeden bölünmediğini de belirtiyor.

Yazı tipi listesi nasıl çalışıyor?​


MDN'in font-family başvurusu, bu özelliğin seçilen öge için bir veya daha fazla yazı tipi ailesi adından ve genel aile adlarından oluşan öncelikli bir liste belirttiğini söylüyor.

Belge listenin mantığını da açıklıyor: değerler virgülle ayrılıyor ve bu, seçeneklerin alternatif olduğunu gösteriyor. Tarayıcı, listedeki kurulu olan ya da indirilebilen ilk yazı tipini seçiyor.

  • İlk sıradaki: Tercih ettiğiniz yazı tipi.
  • Ara sıradakiler: Farklı sistemlerde bulunma ihtimali yüksek alternatifler.
  • Son sıradaki: Genel aile adı — hiçbiri yoksa devreye giren ağ.

Bu yüzden tek bir yazı tipi adı yazmak riskli. O tip kurulu değilse ve indirilemiyorsa tarayıcı kendi varsayılanına düşüyor ve tasarım kararınız devre dışı kalıyor.

Neleri ayarlıyorsunuz?​


Dersin öğrenme çıktıları listesi, alanın kapsamını da özetliyor: yazı tipi aileleri, yazı tipi yığınları ve güvenli yazı tipleri kavramları; rengin, kalınlığın, boyutun ve stilin ayarlanması; hizalama, dönüştürme ve süsleme; satır yüksekliğinin ayarlanması.

Ders, bunların dışında da birçok yazı tipi ve metin özelliği bulunduğunu ve bunların keşfedilmesini önerdiğini belirtiyor. Yani liste bir sınır değil, başlangıç.

Püf nokta' Alıntı:
Yazı tipi listesinin sonunda genel bir aile yoksa, son sözü tarayıcı söyler.

Standart tarafında ne var?​


W3C'nin CSS Yazı Tipleri Modülü Seviye 4 belgesi, mevcut CSS Fonts 3 belgesinde yapılan değişiklikleri tanımladığını ve ek özellikler getirdiğini söylüyor. Belgenin özetinde bu özellikler sayılıyor: yazı tipi özelliği denetimi, yazı tipi değişkenleri ve renkli yazı tipleri.

Belge ayrıca CSS'in yapılandırılmış belgelerin ekranda, kâğıtta ve başka ortamlarda nasıl işleneceğini tarif eden bir dil olduğunu hatırlatıyor. Yazının kâğıttaki karşılığı söz konusu olduğunda çözünürlük hesabı devreye giriyor; bunu DPI yazımızda ele almıştık.

Metnin bir kısmını ayrı biçimlendirmek​


MDN'in dersi burada sık karşılaşılan bir sınırı hatırlatıyor: bir ögenin içindeki metin tek bir bütün olarak etkileniyor. Metnin bir bölümünü ayrı biçimlendirmek istiyorsanız o bölümü uygun bir ögeyle sarmanız gerekiyor.

Ders alternatif olarak metne özgü sözde ögelerden söz ediyor: ilk harfi, ilk satırı ya da imleçle seçilmiş metni hedefleyenler. Yani "şu cümle farklı görünsün" isteği, biçimlendirmeden önce bir yapı kararı gerektiriyor.

Okunabilirlik yalnız yazı tipi değil​


Metnin okunup okunmadığını belirleyen ikinci etken, zeminle arasındaki karşıtlık. Bunun nasıl ölçüldüğünü renk kontrastı yazımızda anlatmıştık.

Tasarım dosyası başka bir makinede açıldığında yazı tipinin bulunamaması da klasik bir sorun; önlemenin yolunu eksik font yazımızda göstermiştik.

Sık Sorulan Sorular​


Tipografi nedir?
Web tarafında, yazının hangi tiple, hangi boyut ve kalınlıkta, hangi boşluk ve hizalamayla görüneceğini belirleyen kararlar bütünü.

Yazı tipi listesi neden birden çok ad içeriyor?
Değerler alternatif; tarayıcı listedeki kurulu olan veya indirilebilen ilk yazı tipini seçiyor.

Tek bir yazı tipi yazsam olmaz mı?
Olur ama o tip bulunamazsa tarayıcı kendi varsayılanına düşer; liste bu yüzden var.

Satır aralığı tipografiye dahil mi?
Dahil. MDN, satırlar ve harfler arasındaki boşluğu metin düzeni biçimleri başlığında sayıyor.

Standart neyi tanımlıyor?
W3C'nin ilgili modülü yazı tipi özelliği denetimi, yazı tipi değişkenleri ve renkli yazı tipleri gibi özellikleri kapsıyor.

Özetle​


Tipografi, yazının hangi tiple görüneceği kadar nasıl yerleşeceğiyle de ilgili. Tarayıcı listedeki ilk bulunabilir tipi seçtiği için yazı tipi yığını bir yedek plan işlevi görüyor; sonunda genel bir aile yoksa karar tarayıcıya kalıyor. Satır yüksekliği, hizalama ve harf aralığı da aynı bütünün parçası, standart tarafında ise değişken ve renkli yazı tipleri gibi başlıklar tanımlı.

Sitenizde kullandığınız yazı tipi listesinin sonunda genel bir aile adı duruyor mu?

Güncelleme: 1 Eylül 2026. MDN'in metin ve yazı tipi temelleri dersi, font-family başvurusu ve W3C'nin CSS Yazı Tipleri Modülü Seviye 4 taslağı kontrol edildi.



Dijital Dünyanıza Yön Veren Pusula
 

Ekli dosyalar

  • banner_05.jpg
    banner_05.jpg
    6 KB · Görüntüleme: 0
Geri
Üst