CSS Dilinde Yazı Tiplerini (Fonts) Yönetimi

Cascading Style Sheets (CSS), web sayfalarının görsel sunumunu kontrol eden temel bir dildir. Bu kapsamda, bir web sayfasının okunabilirliğini ve estetiğini doğrudan etkileyen yazı tiplerinin (fonts) yönetimi kritik bir rol oynar. CSS, geliştiricilere yazı tiplerini tanımlama, boyutlandırma, ağırlıklandırma ve stillendirme konusunda geniş bir kontrol mekanizması sunar. Bu makale, CSS dilinde yazı tipi özelliklerinin kullanımı, sözdizimi ve pratik uygulamaları üzerine odaklanmaktadır.

Sözdizimi

CSS'te yazı tipi özelliklerini tanımlamak için birden fazla bireysel özellik kullanılabileceği gibi, tüm bu özellikleri tek bir deklarasyonda birleştiren bir kısayol (shorthand) özelliği olan font da mevcuttur. Bireysel özellikler şunlardır:

• font-family: Yazı tipinin adını veya genel bir ailesini belirtir.

• font-size: Yazı tipinin boyutunu ayarlar.

• font-weight: Yazı tipinin kalınlığını (ağırlığını) belirler.

• font-style: Yazı tipinin stilini (normal, italik, eğik) belirler.

• line-height: Satır yüksekliğini ayarlar.

• font-variant: Yazı tipinin küçük harf varyantlarını (örneğin, küçük büyük harfler) etkinleştirir.

• font-stretch: Yazı tipinin genişliğini ayarlar (yalnızca belirli yazı tiplerinde desteklenir).

Kısayol font özelliği ise aşağıdaki sırayla değerleri kabul eder:

font:    / ;

Detaylı Açıklama

Her bir yazı tipi özelliğinin işlevi ve kabul ettiği değerler aşağıda detaylandırılmıştır:

• font-family

  
  

  Bu özellik, elementin içeriği için tercih edilen yazı tipini veya yazı tipi ailesini belirtir. Birden fazla yazı tipi belirterek bir yedekleme (fallback) zinciri oluşturmak önemlidir. Tarayıcı, listedeki ilk mevcut yazı tipini kullanacaktır.

  
  

  
  p {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
          

  softmush.com

  Genel yazı tipi aileleri (serif, sans-serif, monospace, cursive, fantasy) her zaman listenin sonunda yer almalıdır.

  
  

• font-size

  
  

  Yazı tipinin boyutunu belirler. Çeşitli birimler kullanılabilir:

  
  

  • Mutlak Boyutlar: xx-small, x-small, small, medium, large, x-large, xx-large. Kullanıcının varsayılan yazı tipi boyutuna göre değişir.

  • Göreceli Boyutlar: smaller, larger. Ebeveyn elementin yazı tipi boyutuna göre ayarlama yapar.

  • Uzunluk Birimleri: px (piksel), em (ebeveynin yazı tipi boyutuna göre), rem (kök elementin yazı tipi boyutuna göre), vw (viewport genişliğine göre), vh (viewport yüksekliğine göre). Esneklik ve erişilebilirlik için em ve rem tercih edilir.

  • Yüzde: %. Ebeveyn elementin yazı tipi boyutuna göre yüzde cinsinden belirtir.

  
  

  
  h1 {
      font-size: 2.5rem; /* Kök elementin font boyutunun 2.5 katı */
  }
  
  p {
      font-size: 16px; /* Sabit piksel boyutu */
  }
          

  softmush.com

• font-weight

  
  

  Yazı tipinin kalınlığını (ağırlığını) ayarlar. Kabul ettiği değerler şunlardır:

  
  

  • Anahtar Kelimeler: normal (genellikle 400), bold (genellikle 700).

  • Sayısal Değerler: 100'den 900'e kadar, 100'ün katları şeklinde. Tüm yazı tipleri bu aralıktaki her ağırlığı desteklemeyebilir.

  • Göreceli Değerler: lighter, bolder. Ebeveyn elementin ağırlığına göre.

  
  

  
  strong {
      font-weight: bold;
  }
  
  .heading-light {
      font-weight: 300;
  }
          

  softmush.com

• font-style

  
  

  Yazı tipinin stilini belirler. Yaygın değerler:

  
  

  • normal: Normal metin.

  • italic: İtalik metin. Yazı tipinin gerçek italik versiyonu varsa kullanılır.

  • oblique: Eğik metin. Yazı tipinin gerçek italik versiyonu yoksa, normal metin eğik bir şekilde taklit edilir.

  
  

  
  em {
      font-style: italic;
  }
          

  softmush.com

• line-height

  
  

  Metin satırları arasındaki dikey boşluğu ayarlar. Değerler:

  
  

  • Sayısal Değer: Örnek: 1.5. Elementin font-size değerinin 1.5 katı anlamına gelir. En çok tercih edilen yöntemdir.

  • Uzunluk Birimi: Örnek: 20px, 1.2em.

  • Yüzde: Örnek: 150%. Elementin font-size değerinin yüzdesi.

  • normal: Tarayıcının varsayılan değeri.

  
  

  
  p {
      line-height: 1.6; /* Font boyutunun 1.6 katı */
  }
          

  softmush.com

• font-variant

  
  

  Yazı tipinin küçük büyük harf (small-caps) gibi özel varyantlarını belirler. En yaygın değeri small-caps'dir.

  
  

  
  .caps-text {
      font-variant: small-caps;
  }
          

  softmush.com

Örnekler

Aşağıdaki örnekler, farklı yazı tipi özelliklerinin CSS'te nasıl kullanıldığını göstermektedir.

Örnek 1: Temel Yazı Tipi Tanımlaması

/* HTML */
Bu paragraf, temel yazı tipi özellikleriyle stilize edilmiştir.

/* CSS */
.basic-text {
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    line-height: 1.5;
    color: #333;
}

Örnek 2: Kısayol font Özelliği Kullanımı

/* HTML */
Kısayol ile Stilize Edilmiş Başlık

/* CSS */
.shorthand-heading {
    /* font-style | font-variant | font-weight | font-size/line-height | font-family */
    font: italic small-caps bold 2em/1.2 "Times New Roman", Times, serif;
    color: #0056b3;
}

Örnek 3: Web Fontu Entegrasyonu (Google Fonts)

Harici bir kaynaktan yazı tipi kullanmak için önce bu yazı tipini projenize dahil etmeniz gerekir. Aşağıdaki örnekte Google Fonts'tan 'Roboto' yazı tipinin nasıl kullanılacağı gösterilmiştir.

/* HTML (head bölümüne eklenir) */


Bu metin, harici bir web fontu olan Roboto ile stilize edilmiştir.

/* CSS */
.webfont-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.7;
    color: #555;
}

Önemli Notlar

• Yedekleme Yazı Tipleri: font-family özelliğinde her zaman genel bir yazı tipi ailesiyle (serif, sans-serif, monospace) biten bir yedekleme zinciri kullanın. Bu, kullanıcının sisteminde belirtilen ilk yazı tipi bulunamazsa, tarayıcının benzer bir alternatif bulmasını sağlar.

• Erişilebilirlik ve Esneklik: Yazı tipi boyutları için piksel (px) yerine em veya rem gibi göreceli birimler kullanmak, kullanıcının tarayıcı ayarlarını veya cihazının ekran boyutunu dikkate alarak daha iyi bir erişilebilirlik ve duyarlılık sağlar.

• Kısayol Özelliği Sırası: font kısayol özelliğini kullanırken, font-size ve line-height değerlerinin / ile ayrılması ve font-family'nin her zaman en sonda yer alması gerektiğini unutmayın. Diğer özellikler (font-style, font-variant, font-weight) herhangi bir sırayla belirtilebilir ancak genellikle yukarıda belirtilen sıra tercih edilir.

• Web Font Performansı: Harici web fontları kullanırken, web sitesinin yükleme süresini etkileyebilecekleri için font dosya boyutlarını optimize etmeye dikkat edin. Yalnızca ihtiyacınız olan ağırlıkları ve stilleri yükleyin.

• Desteklenmeyen Ağırlıklar/Stiller: Bir yazı tipi belirli bir ağırlığı (örneğin, 300 veya 900) veya stili (örneğin, italik) desteklemiyorsa, tarayıcı mevcut en yakın ağırlığı veya stili kullanır veya bir taklit (fake bold/italic) oluşturabilir. En iyi sonuçlar için, kullanmayı planladığınız tüm ağırlık ve stillerin yazı tipi dosyasında mevcut olduğundan emin olun.