CSS Yazı Tipleri: font-family, font-size, font-weight ve @font-face

font-family: öncelik sıralı bir liste

font-family virgülle ayrılmış, öncelik sırasına dizilmiş bir yazı tipi listesi alır. Tarayıcı listede yüklü olan ya da @font-face ile indirilebilen ilk yazı tipini seçer. MDN önemli bir ayrıntının altını çizer: Seçim listedeki ilk mevcut yazı tipinde durmaz, karakter karakter yapılır. Mevcut yazı tipinde gereken bir karakterin glifi yoksa listedeki sonraki yazı tipleri denenir. Bu yüzden Türkçe karakterleri içermeyen bir yazı tipi seçtiğinizde "ş" ya da "ğ" gibi harfler sonraki yazı tipinden gelebilir ve metin karışık görünebilir.

Listede iki tür ad bulunur. Aile adı belirli bir yazı tipinin adıdır; ya tırnaklı bir dize ya da boşlukla ayrılmış tırnaksız tanımlayıcılardır. MDN, boşluk, rakam ya da tire dışında noktalama içeren adları tırnak içine almanın iyi bir alışkanlık olduğunu belirtir. Genel aile adları ise bir yedekleme mekanizmasıdır; anahtar kelimedir, tırnaksız yazılmalıdır ve listenin sonunda durmalıdır. Hiçbir yazı tipinin her cihazda bulunacağı garanti olmadığından listeye her zaman en az bir genel aile eklenmelidir.

body {
  font-family: "Gill Sans Extrabold", sans-serif;
  /* boşluklu ad tırnakta, genel aile en sonda ve tırnaksız */
}

code {
  font-family: ui-monospace, monospace;
}

.hatali {
  font-family: "sans-serif";
  /* tırnaklı yazıldığı için genel aile değil, "sans-serif" adlı bir yazı tipi aranır */
}

İki genel aile için MDN ayrıca uyarı yapar. system-ui arayüz öğelerini yerel uygulamalar gibi göstermek için tasarlanmıştır, uzun paragraflar için değil; bazı sistemlerde Latin harfleri kötü görüntüleyebilir ve kullanıcı tarafından özelleştirilemeyebilir. Uzun metinlerde sans-serif gibi bir aile önerilir. font-family tek başına monospace olarak yazılır ve font-size verilmezse tarayıcılar kullanıcının eş aralıklı yazı tipi boyutu tercihini kullanır; bu boyut çoğu zaman orantılı yazı tiplerinden küçüktür.

font-size: anahtar kelimeler, em ve rem

font-size yazı tipinin boyutunu belirler ve em, ex gibi yazı tipine göreli birimlerin değerini de değiştirir. Değer xx-small ile xxx-large arasında mutlak bir anahtar kelime (kullanıcının varsayılan boyutu medium'dır), ebeveyne göre larger veya smaller, pozitif bir uzunluk ya da ebeveynin yazı tipi boyutuna göre bir yüzde olabilir. MDN, piksel değerlerinin bazı tarayıcılarda kullanıcının yazı boyutunu değiştirmesini engelleyebileceği için erişilebilir olmadığını not eder ve kullanıcının varsayılan boyutuna göreli değerleri önerir.

font-size içinde em ebeveynin hesaplanmış yazı boyutunun çarpanıdır ve bu yüzden iç içe öğelerde katlanarak büyür. MDN'nin örneğinde varsayılan boyut 16 piksel kabul edilir ve iç içe iki span öğesine 1.6em verilir:

html {
  font-size: 100%;
  /* tarayıcı varsayılanı: genellikle 16px */
}

span {
  font-size: 1.6em;
}
/* dış span: 16 x 1,6 = 25,6px
   iç span:  25,6 x 1,6 = 40,96px (katlanma)

   aynı kural 1.6rem ile yazılsaydı:
   iki span da 16 x 1,6 = 25,6px olurdu */

rem bu katlanmayı önlemek için icat edilmiştir; ebeveyne değil kök html öğesinin yazı boyutuna göredir. Piksel değerinden em karşılığı bulmak için MDN'nin formülü şudur: istenen piksel / ebeveynin piksel cinsinden yazı boyutu. Ebeveyn 16 pikselse 12 piksel için 12 / 16 = 0.75em, 22 piksel için 22 / 16 = 1.375em yazarsınız. Akışkan yazı boyutu için clamp() kullanan örnekler calc(), min(), max() ve clamp() yazısında bulunuyor.

font-weight ve yedek kalınlık algoritması

font-weight kalınlığı belirler. normal 400'e, bold 700'e eşittir; sayısal değerler 1 ile 1000 arasında herhangi bir sayı olabilir. 100'ün katları yaygın kalınlık adlarına karşılık gelir: 100 Thin, 300 Light, 400 Normal, 500 Medium, 600 Semi Bold, 700 Bold, 900 Black. Ara değerler özellikle değişken yazı tipleri için anlamlıdır.

Değişken olmayan bir yazı tipinde istenen kalınlık yoksa tarayıcı MDN'de tarif edilen bir yedek algoritmasıyla en yakın kalınlığı seçer. Kurallar hedef değere göre değişir: Hedef 400 ile 500 arasındaysa önce hedeften 500'e kadar artan sırada, bulunamazsa hedefin altındaki kalınlıklara azalan sırada, o da yoksa 500'ün üstündekilere artan sırada bakılır. Hedef 400'den küçükse önce aşağı, sonra yukarı; 500'den büyükse önce yukarı, sonra aşağı aranır. Bu algoritma yalnızca çizimi etkiler; hesaplanmış değer yazdığınız değer olarak kalır.

/* yazı tipi ailesinde yalnızca 300 ve 700 kalınlıkları var */

.a { font-weight: 600; }
/* hedef 500'den büyük: önce yukarıya bakılır, 700 bulunur: 700 çizilir */

.b { font-weight: 450; }
/* hedef 400-500 arasında: 450-500 arasında yok,
   aşağıya bakılır, 300 bulunur: 300 çizilir */

.c { font-weight: 200; }
/* hedef 400'den küçük: aşağıda yok, yukarıya bakılır: 300 çizilir */

bolder ve lighter ebeveyne göre bir adım kalın ya da ince değer verir. MDN'ye göre bu göreli hesapta yalnızca dört kalınlık dikkate alınır: 100, 400, 700 ve 900. Ailede başka kalınlıklar olsa bile bu hesap için yok sayılır. İkinci örnekteki sonuç sık şaşırtır: 450 yazan bir geliştirici biraz daha kalın bir metin beklerken, ailede 500 civarında bir kalınlık olmadığı için daha ince 300 kalınlığını görebilir.

line-height: neden birimsiz sayı?

line-height satır kutusunun yüksekliğini belirler ve dört biçimde yazılır: normal, birimsiz bir <number>, bir <length> veya bir <percentage>. normal tarayıcıya bağlıdır; MDN masaüstü tarayıcıların yazı tipi ailesine göre yaklaşık 1,2 kullandığını belirtir. Birimsiz sayıda kullanılan değer, sayının öğenin kendi yazı boyutuyla çarpımıdır ve hesaplanmış değer sayının kendisidir. Yüzde ve em değerlerinde ise hesaplanmış değer bir uzunluktur.

Bu farkın önemi kalıtımda ortaya çıkar. Birimsiz sayı alt öğelere sayı olarak geçer ve her öğe kendi yazı boyutuyla yeniden çarpar. Uzunluk ya da yüzde ise ebeveynde bir kez piksele çevrilir ve alt öğelere o sabit uzunluk olarak geçer. MDN bu yüzden birimsiz sayıyı çoğu durumda tercih edilen yol olarak gösterir.

.kutu-sayi {
  font-size: 16px;
  line-height: 1.5;
}
.kutu-sayi h2 {
  font-size: 32px;
  /* satır yüksekliği: 32 x 1,5 = 48px */
}

.kutu-em {
  font-size: 16px;
  line-height: 1.5em;
  /* hesaplanmış değer burada 16 x 1,5 = 24px olur */
}
.kutu-em h2 {
  font-size: 32px;
  /* 24px kalıtımla gelir: 32px'lik metne 24px satır, satırlar üst üste biner */
}

MDN erişilebilirlik için ana paragraf metninde line-height değerinin en az 1,5 olmasını önerir; bu düşük görme ya da disleksi gibi durumlar yaşayan okurlara yardımcı olur. Birimsiz değer kullanmak, sayfa yakınlaştırıldığında satır yüksekliğinin yazıyla orantılı büyümesini de sağlar.

font kısayolu ve kuralları

font kısayolu yazı tipi özelliklerini tek bildirimde toplar ama sıkı kuralları vardır. font-size ve font-family zorunludur. font-style, font-variant ve font-weight boyuttan önce gelmelidir. line-height yalnızca boyuttan hemen sonra, araya / konarak yazılabilir. font-family her zaman son değerdir. Yazılmayan bileşenler başlangıç değerine döner; kısayol ayrıca font-variation-settings, font-feature-settings ve font-size-adjust gibi kendisinin ayarlayamadığı bir dizi özelliği de sıfırlar.

p {
  font: italic 600 1rem/1.5 "Source Serif", Georgia, serif;
  /* stil | kalınlık | boyut/satır yüksekliği | aile listesi */
}

.eksik {
  font: bold Georgia, serif;
  /* geçersiz: boyut yok, bildirim yok sayılır */
}

.sira-hatasi {
  font: 1rem bold Georgia, serif;
  /* geçersiz: kalınlık boyuttan önce gelmeli */
}

font ayrıca caption, menu, message-box gibi tek bir sistem yazı tipi anahtar kelimesi de alabilir; bu durumda değer yalnızca o anahtar kelimeden oluşmalıdır ve aile, boyut, kalınlık gibi bütün ayarlar sistemin o öğe için kullandığı değerlere döner.

@font-face ile web yazı tipi yüklemek

@font-face kuralı, uzak bir sunucudan ya da kullanıcının bilgisayarından yüklenecek bir yazı tipi tanımlar. Kuralın geçerli olması için iki tanımlayıcı zorunludur: font-family yazı tipine sayfada kullanacağınız adı verir, src dosyaları gösterir. Ardından bu adı normal bir font-family bildiriminde kullanırsınız.

@font-face {
  font-family: "Kurumsal";
  src:
    local("Kurumsal Regular"),
    url("/fonts/kurumsal.woff2") format("woff2"),
    url("/fonts/kurumsal.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Kurumsal", sans-serif;
}

src listesinin sırası önemlidir. Tarayıcı kaynakları yazıldığı sırayla dener; bu yüzden kullanıcının bilgisayarındaki kopyayı arayan local() genellikle url()'den önce yazılır. format() ipucu tarayıcıya dosya biçimini söyler; desteklemediği bir biçimse dosyayı hiç indirmeyebilir ve bant genişliği kazanırsınız. İpucu yoksa tarayıcı dosyayı indirip biçimini kendisi algılar. format() veya tech() içeren daha özel kaynaklar, bunları içermeyen genel kaynaklardan önce yazılmalıdır; aksi hâlde genel kaynak önce denenir ve kullanılır.

MDN'nin notlarından ikisi sık karşılaşılan sorunların nedenidir. Birincisi, web yazı tipleri aynı alan adı kısıtına tabidir: Dosyalar sayfayla aynı alan adında olmalıdır ya da sunucu HTTP erişim denetimleriyle (CORS) izin vermelidir. Yazı tipiniz başka bir alan adından yüklenmiyorsa ilk bakılacak yer burasıdır. İkincisi, @font-face bir seçicinin içine yazılamaz; kuralın üst düzeyde ya da @media, @supports gibi koşullu bir grup kuralının içinde durması gerekir. Ayrıca MDN, local() ile yüklü yazı tiplerinin cihaz parmak izi çıkarmak için kullanılabileceğini, bu yüzden tarayıcıların kullanıcının sonradan yüklediği yazı tiplerini yok sayabileceğini belirtir.

font-display, unicode-range ve diğer tanımlayıcılar

font-display, indirilen yazı tipinin hazır olup olmamasına göre metnin nasıl gösterileceğini belirler. MDN zaman çizelgesini üç döneme ayırır: engelleme döneminde yazı tipi yüklenmemişse metin görünmez bir yedek yazı tipiyle çizilir; takas döneminde görünür bir yedek yazı tipiyle çizilir ve yazı tipi gelince değiştirilir; başarısızlık döneminde yükleme başarısız sayılır ve normal yedekleme uygulanır. Değerler bu dönemlerin süresini ayarlar.

unicode-range yazı tipinden hangi karakter aralığının kullanılacağını belirtir. MDN'ye göre sayfa bu aralıktaki hiçbir karakteri kullanmıyorsa yazı tipi hiç indirilmez; en az bir karakter kullanılıyorsa yazı tipinin tamamı indirilir. font-weight, font-style ve font-stretch tanımlayıcıları ise bu dosyanın hangi kalınlık, stil ve genişlik için kullanılacağını söyler; değişken yazı tiplerinde iki değerle bir aralık verilebilir, örneğin font-weight: 100 400. Yazı tipi yüklemenin sayfa hızı ve düzen kaymasıyla ilişkisini Core Web Vitals rehberinde bulabilirsiniz.

WOFF ve WOFF2

WOFF (Web Open Font Format), TrueType ve OpenType'ın kullandığı tablo tabanlı yapının sıkıştırılmış bir sürümünü kullanan, ayrıca lisans bilgisi gibi meta veriler taşıyabilen bir web yazı tipi biçimidir. MDN üç faydasını sayar: veriler sıkıştırıldığı için daha az bant genişliği kullanılır, bazı yazı tipi üreticileri yalnızca WOFF biçimine web lisansı verir ve biçim farklı tarayıcı üreticileri arasında birlikte çalışabilirlik hedefler. İki sürümü vardır; esas farkları sıkıştırma algoritmasıdır ve @font-face içinde "woff" ve "woff2" biçim adlarıyla belirtilirler. MDN, WOFF2'nin eski biçimlere göre daha verimli sıkıştırdığını ve web için genellikle en iyi seçim olduğunu belirtir.

Bu MIME türleri, yazı tipi dosyalarını barındırdığınız sunucunun yapılandırmasında dosya uzantılarını doğru türe eşlemek istediğinizde başvuracağınız değerlerdir. Yeni bir projede çoğu durumda tek bir WOFF2 dosyası yeterlidir; eski biçimleri yalnızca bunlara ihtiyaç duyan tarayıcıları desteklemeniz gerekiyorsa src listesine yedek olarak ekleyin.

Değişken yazı tipleri

MDN'nin rehberine göre değişken yazı tipleri, bir yazı tipi ailesinin birçok varyasyonunu tek dosyada toplar. Geleneksel yöntemde normal, italik, kalın ve kalın italik için en az dört ayrı dosya gerekirken değişken yazı tipinde tek dosya bütün kalınlık, genişlik ve stil aralığına erişim verir. Dosya tek bir statik yazı tipinden büyüktür ama çoğu durumda o dört dosyanın toplamından küçük ya da ona yakındır.

Değişkenliğin temeli varyasyon eksenleridir. Beş eksen kayıtlıdır: kalınlık (wght), genişlik (wdth), eğim (slnt), italik (ital) ve optik boyut (opsz). Bunlar mevcut CSS özellikleriyle eşleştirilmiştir; örneğin kalınlık ekseni font-weight ile kontrol edilir. Tasarımcının tanımladığı özel eksenler için düşük düzeyli font-variation-settings özelliği kullanılır. MDN iki kuralı vurgular: Eksen adları büyük küçük harfe duyarlıdır, kayıtlı eksenler küçük harfle, özel eksenler büyük harfle yazılır. font-variation-settings ile bir değeri değiştirmek istediğinizde hepsini yeniden yazmanız gerekir; bunu kolaylaştırmak için tek tek değerleri CSS değişkenlerinde tutabilirsiniz. Mümkün olan her yerde ilgili standart özelliği kullanmanız önerilir.

@font-face {
  font-family: "DegiskenSans";
  src: url("/fonts/degisken.woff2") format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: normal;
  /* bu dosya 125 ile 950 arasındaki kalınlıkları kapsar */
}

h1 {
  font-family: "DegiskenSans", sans-serif;
  font-weight: 375;
  /* değişken yazı tipinde ara değer doğrudan kullanılabilir */
}

.ozel-eksen {
  font-variation-settings: "wght" 375, "GRAD" 88;
  /* wght kayıtlı (küçük harf), GRAD özel eksen (büyük harf) */
}

MDN, her tarayıcının biçim sözdizimini tam uygulamadığını, ancak değişken yazı tiplerini destekleyen tarayıcıların biçimi woff2-variations yerine yalnızca woff2 olarak yazsanız da yazı tipini göstereceğini not eder. Eski tarayıcılar için bir yedek isterseniz değişken yazı tipini @supports (font-variation-settings: "wdth" 115) gibi bir özellik sorgusunun içine alabilirsiniz; ayrıntılar @supports yazısında.

Sık yapılan hatalar

• Genel aileyi tırnaklamak: "serif" genel aile değil, o adda bir yazı tipi olarak aranır.
• Listeyi genel aileyle bitirmemek: Hiçbir yazı tipi bulunamazsa tarayıcı varsayılanına düşersiniz.
• İç içe em ile katlanma: 1.6em her seviyede yeniden çarpılır; sabit ölçek için rem kullanın.
• line-height için em ya da yüzde kullanmak: Sabit uzunluk olarak kalıtılır, büyük başlıklarda satırlar üst üste binebilir.
• font kısayolunda boyutu ya da aileyi unutmak: Bildirimin tamamı geçersiz olur.
• Kısayolun sıfırladıklarını unutmak: font sonradan yazılırsa daha önce ayarlanan font-variation-settings gibi değerleri sıfırlar.
• @font-face'i seçici içine yazmak: Çalışmaz; kuralı üst düzeye taşıyın.
• Başka alan adından yüklenen yazı tipi: CORS izni yoksa yüklenmez.

Sık Sorulan Sorular

Google Fonts gibi bir servis yerine yazı tipini kendi sunucumda barındırabilir miyim?

Lisansı izin veriyorsa evet. Dosyayı (tercihen WOFF2) sitenizle aynı alan adına koyup @font-face ile tanımlarsınız. Aynı alan adında olduğu için CORS ayarı gerekmez. Statik dosyaları barındırma seçenekleri için statik site hostingi yazısına göz atabilirsiniz.

font-weight: 500 yazdım ama fark göremiyorum, neden?

Büyük ihtimalle yazı tipi ailesinde 500 kalınlığı yoktur ve yedek algoritması 400 ile 500 arasındaki hedefte önce hedefin üstünde 500'e kadar, sonra aşağıya bakar. Ailede yalnızca 400 ve 700 varsa 500 için 400 seçilir ve metin normal görünür. Ya ailenin ilgili kalınlıkta bir dosyasını yükleyin ya da değişken bir yazı tipi kullanın.

line-height için en iyi değer nedir?

Tek doğru değer yoktur; ama MDN iki somut öneri verir: Birimsiz bir sayı kullanın ve ana paragraf metninde bu değer en az 1,5 olsun. Başlıklarda daha düşük değerler okunaklı olabilir; birimsiz yazdığınız sürece her öğe kendi boyutuna göre hesaplar.

font-display: swap ne zaman kullanılır?

swap engelleme dönemini çok kısa, takas dönemini sonsuz yapar; metin hemen yedek yazı tipiyle görünür ve web yazı tipi geldiğinde değiştirilir. Metnin hiç görünmez kalmaması önemliyse uygundur. Yazı tipi gelmezse sayfanın yedekle kalmasını kabul ediyorsanız optional da bir seçenektir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · CSS birimleri: px, em, rem · Metin kaydırma ve white-space · clamp() ile akışkan boyut · @supports · Core Web Vitals