CSS font-family Kullanımı

CSS'in güçlü özelliklerinden biri olan font-family, bir web sayfasında kullanılan yazı tipini belirlememizi sağlar. Metinlerin yazı tipini değiştirmek, tasarımın görsel estetiğini doğrudan etkileyen önemli bir adımdır. Ancak yazı tiplerini değiştirmek, yalnızca bir özellik kullanmak kadar basit değildir; tarayıcılar ve kullanıcı sistemlerindeki fontların çeşitliliği nedeniyle bazı detayları bilmek önemlidir. Bu yazıda, font-family özelliğinin temel kullanımını, yazı tipi listelerini (font stack) ve en iyi uygulamaları öğrenebilirsiniz.

1. `font-family` Nedir ve Nasıl Çalışır?

font-family, bir HTML elemanına uygulanacak yazı tipini belirler. Tarayıcı, belirtilen fonta sistemde erişebiliyorsa o fontu uygular. Eğer font bulunamazsa, tanımlanan bir sonraki font kullanılır. Tanımlanan hiçbir fonta erişilemiyorsa, tarayıcı varsayılan bir yazı tipi seçer.

Örnek:

h1 {
  font-family: Arial;
}

Bu örnekte, h1 elemanında metin, Arial fontuyla görüntülenir.

2. Web Güvenli Yazı Tipleri (Web-Safe Fonts)

Her cihazda ve işletim sisteminde bulunan yazı tipleri sınırlıdır. Web güvenli yazı tipleri, neredeyse tüm cihazlarda varsayılan olarak bulunan fontları ifade eder. En yaygın web güvenli yazı tipleri şunlardır:

Sans-serif: Arial, Helvetica, Verdana
Serif: Times New Roman, Georgia
Monospace: Courier New, Consolas
Fantasy: Papyrus
Cursive: Comic Sans MS

Yazı tiplerini kullanırken, seçtiğiniz fontun hem Windows hem de MacOS gibi farklı platformlarda desteklenip desteklenmediğini göz önünde bulundurmanız gerekir.

3. Font Listeleri (Font Stack)

Tarayıcı, belirttiğiniz ilk fontu bulamazsa alternatif olarak bir sonraki fontu dener. Bu, font listesi (font stack) oluşturmayı gerektirir. Font listesi, tercihen şu sırayla yazılır:

İlk tercih edilen yazı tipi.
Yedek bir yazı tipi.
Genel bir yazı tipi ailesi (ör. sans-serif, serif).

Örnek:

p {
  font-family: "Segoe UI", Futura, Arial, sans-serif;
}

Bu listede:

Eğer cihazda Segoe UI fontu varsa, bu font kullanılır.
Eğer Segoe UI bulunmazsa, tarayıcı Futura fontuna geçer.
Futura da yoksa, Arial kullanılır.
Hiçbiri bulunamazsa, genel sans-serif font ailesinden bir font seçilir.

4. Yazı Tipi Aileleri

Belirli bir yazı tipini desteklemeyen cihazlar için font-family, genel bir yazı tipi ailesi tanımlamanıza olanak tanır. Tarayıcı, belirttiğiniz ailenin bir üyesini seçer.

Yaygın Yazı Tipi Aileleri:

Serif: Her harfin uçlarında süslemeler bulunan yazı tipleri (ör. Times New Roman).
Sans-serif: Süslemeleri olmayan, daha modern yazı tipleri (ör. Arial).
Monospace: Tüm karakterlerin aynı genişliğe sahip olduğu yazı tipleri (ör. Courier New).
Fantasy ve Cursive: Daha dekoratif ve el yazısı stilinde yazı tipleri.

Örnek:

h2 {
  font-family: Georgia, serif; /* Serif ailesinden bir yazı tipi seçilir */
}

code {
  font-family: Consolas, monospace; /* Monospace ailesinden bir yazı tipi seçilir */
}

5. Font Listesi Kullanımında En İyi Uygulamalar

İlk Seçim: Tasarımınıza en uygun fontu seçin.
Yedek Fontlar Ekleyin: Kullanıcı cihazlarında ilk font bulunamazsa kullanılacak yedekleri tanımlayın.
Genel Aileyi Ekleyin: Son çare olarak bir yazı tipi ailesi belirtin (sans-serif, serif gibi).

6. Yazı Tiplerini Belirlerken Örnekler

Aşağıdaki örnekte, hem belirli yazı tipleri hem de genel yazı tipi ailesi kullanımı gösterilmiştir:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font-Family Örneği</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif; /* Modern sans-serif fontlar */
    }

    h1 {
      font-family: "Times New Roman", Georgia, serif; /* Klasik serif fontlar */
    }

    code {
      font-family: Consolas, "Courier New", monospace; /* Kod blokları için monospace */
    }
  </style>
</head>
<body>
  <h1>Başlık</h1>
  <p>Bu paragraf Arial veya Helvetica ile görüntülenir.</p>
  <code>console.log("Kod bloğu");</code>
</body>
</html>

7. Özel Yazı Tipleri Eklemek

Varsayılan fontlar yeterli olmadığında, özel yazı tipleri kullanmak isteyebilirsiniz. Özel yazı tiplerini CSS ile eklemek için Google Fonts veya @font-face gibi yöntemler kullanılabilir. Ancak bu, ayrı bir konudur ve burada yalnızca yerleşik fontlara odaklanılmıştır.

Sonuç

font-family özelliği, metinlerin görünümünü özelleştirmek için CSS’in sunduğu temel araçlardan biridir. Web güvenli yazı tiplerini ve yedek fontları kullanarak tasarımınızın farklı cihazlarda tutarlı görünmesini sağlayabilirsiniz. Daha fazla kontrol ve çeşitlilik için özel yazı tiplerini eklemeyi öğrenmek, bir sonraki adım olacaktır.