Web Geliştirme CSS Fonts

Nizam-ı Alem · 28 Kas 2025

CSS yazı tipleri, bir web sayfasındaki metnin görünümünü şekillendirerek onu daha okunabilir ve görsel olarak çekici hale getirmek için kullanılır. Metnin nasıl görüneceğini ve genel tasarımla nasıl uyum sağlayacağını kontrol etmeye yardımcı olurlar.

Metnin boyutunu, ağırlığını, stilini ve rengini ayarlamak için kullanılırlar.
Web sitesinde tutarlı ve estetik bir görünüm oluşturmayı sağlarlar.
Okunabilirliği artırarak metnin site temasına uygun bir stil kazanmasına yardımcı olurlar.

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        .gfg {
            font-family: "Arial, Helvetica, sans-serif";
            font-size: 60px;
            color: #090;
            text-align: center;
        }
    </style>
<!--Driver Code Starts-->
</head>

<body>
    <div class="gfg">Turkmmo NoxVortex</div>
</body>

</html>

Kod, "Turkmmo NoxVortex" metnine yeşil renkte, 60 piksel boyutunda Arial yazı tipini uygular ve metni sayfa ortasına hizalar.
Bu biçimlendirme, HTML’de tanımlanan .gfg sınıfı üzerinden gerçekleştirilir.

CSS'de Yazı Tipleri Nasıl Uygulanır?

CSS’te yazı tipleri, metnin stilini ve görünümünü kontrol eden çeşitli özellikler kullanılarak uygulanır.

1. font-family

font-family özelliği, metin için kullanılacak yazı tiplerini belirler. Tercih edilen yazı tipi kullanıcının cihazında yüklü değilse, otomatik olarak listedeki diğer yazı tipleri devreye girer ve bir yedekleme mekanizması oluşturur.

Sözdizimi:

font-family: "Font Name", generic-font-name;

CSS:

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

Bu örnekte tarayıcı, metni önce Arial yazı tipiyle görüntülemeye çalışır. Eğer Arial kullanılamazsa, otomatik olarak sans-serif yazı tipi ailesine geçiş yapar.

2. font-size

font-size özelliği, metnin boyutunu kontrol eder. Boyut; piksel (px), em (em), yüzde (%) gibi farklı birimlerle ayarlanabilir.

Sözdizimi:

font-size: value;

CSS:

h1 {
    font-size: 32px; /* Pixels */
}

p {
    font-size: 1.2em; /* Relative to the parent element */
}

Piksel (px) birimi, sabit bir yazı tipi boyutu sağlar.
em birimi ise üst öğenin yazı tipi boyutuna göre ölçeklenir, bu nedenle duyarlı (responsive) tasarımlar için oldukça kullanışlıdır.

3. font-weight

font-weight özelliği, metnin kalınlığını kontrol eder. normal, bold gibi sözel değerlerin yanı sıra 100 ile 900 arasında sayısal değerler de kullanılabilir.

Sözdizimi:

font-weight: value;

CSS:

p {
    font-weight: bold; /* Bold text */
}

strong {
    font-weight: 700; /* Equivalent to bold */
}

Sayısal değerler, ağırlık üzerinde daha hassas kontrol sağlar (örneğin, hafif için 100, ekstra kalın için 900).

4. font-style
Font-style özelliği, yazı tipinin stilini (genellikle italik veya normal) tanımlar.

Sözdizimi:

font-style: value;

CSS:

em {
    font-style: italic; /* Italicized text */
}

p {
    font-style: normal; /* Normal text */
}

5. satır yüksekliği
Satır yüksekliği özelliği, metin satırları arasındaki boşluğu tanımlar. Satır yüksekliğini artırmak, özellikle uzun paragraflarda okunabilirliği artırır.

Sözdizimi:

line-height: value;

CSS:

p {
    line-height: 1.5; /* 1.5 times the font size */
}

Web Uyumlu Yazı Tipleri ve Özel Yazı Tipleri
Bu karşılaştırma, evrensel olarak desteklenen sistem yazı tipleri (web uyumlu) ile benzersiz web stili için kullanılan tasarımcı tarafından seçilmiş özel yazı tipleri arasındaki farkı vurgulamaktadır.

1. Web Uyumlu Yazı Tipleri
Web uyumlu yazı tipleri, tüm tarayıcılarda ve işletim sistemlerinde yaygın olarak desteklenir. Bu yazı tipleri çoğu bilgisayara önceden yüklenmiştir ve metninizin tüm cihazlarda aynı görünmesini sağlar.

Web Uyumlu Yazı Tipleri

Arial
Times New Roman
Courier New
Verdana
Georgia

CSS:

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

2. Özel Yazı Tipleri
Özel yazı tipleri, kullanıcının cihazına önceden yüklenmemiş yazı tiplerini kullanmanıza olanak tanır. Bunları web yazı tiplerini kullanarak yükleyebilirsiniz. Özel yazı tiplerini kullanmanın en popüler yöntemi Google Fonts'u kullanmak veya yazı tiplerini kendi sunucunuzda barındırmak.

CSS:

<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <h1 style="font-family: 'Roboto', sans-serif;">Hello, World!</h1>
</body>

Duyarlı Tipografi
Tipografiyi farklı ekran boyutlarına uyumlu hale getirmek için yazı tipi boyutlarında em, rem, % veya vw gibi duyarlı birimler kullanın. Ayrıca, farklı cihazlarda okunabilirliği sağlamak için CSS medya sorgularını tipografiyle birleştirebilirsiniz.

CSS:

body {
    font-size: 16px; /* Default font size */
}

@media (max-width: 600px) {
    body {
        font-size: 14px; /* Smaller font on smaller screens */
    }
}

em ve rem: Bu birimler, üst öğenin veya kök öğenin yazı tipi boyutuna göredir ve daha iyi ölçeklendirme sağlar.
vw (görüntü alanı genişliği): Bu birim, yazı tipi boyutunu görüntü alanının genişliğine göre ölçekler; bu da akışkan düzenler için harikadır.

CSS Yazı Tiplerinin Özellikleri
Web tasarımında yazı tiplerini etkili bir şekilde özelleştirmek için temel CSS yazı tipi özelliklerini anlamak çok önemlidir:

font-family: Yazı tipini belirtir.
font-size: Metnin boyutunu belirler.
font-weight: Metnin kalınlığını ayarlar.
font-style: Metnin eğimini (örneğin italik) kontrol eder.
line-height: Metin satırları arasındaki boşluğu ayarlar.
letter-spacing: Karakterler arasındaki boşluğu değiştirir.
text-transform: Metnin büyük/küçük harf kullanımını kontrol eder.