CSS Yazı

Web siteniz için doğru yazı tipi seçimi önemlidir!

Yazı tipi seçimi önemlidir

Doğru yazı tipi seçimi, web sitesinin kullanıcı deneyimine büyük bir etki yapar.

Doğru yazı tipi, markanız için güçlü bir imaj yaratır.

Okunabilir yazı tipleri kullanmak önemlidir. Yazı tipi, metninize değer katır.

Genel yazı tipi aileleri

CSS'te beş genel yazı tipi ailesi vardır:

  • Çizgili yazı tipi (Serif) - Her harfin kenarında küçük bir vuruş vardır. Bir biçim ve zarafet hissi yaratır.
  • Yassız yazı tipi (Sans-serif) - Yazı çizgileri basit (küçük çizgilerle yoktur). Modern ve minimalist bir görünüm yaratır.
  • Geniş yazı tipi (Monospace) - Buradaki tüm harfler aynı sabit genişliğe sahiptir. Mekanik bir görünüm yaratır.
  • Çizgi yazısı yazı tipi (Cursive) - İnsan kalemini taklit eder.
  • Hayal fontu (Fantasy) - Dekoratif/şakacı yazı tipidir.

Tüm farklı yazı tipi adları bu beş genel yazı tipi serisinden birine aittir.

Serif ve Sans-serif yazı tipleri arasındaki fark

Serif vs. Sans-serif

İpucu:Bilgisayar ekranında, yassız yazı tipleri, çizgili yazı tiplerinden daha kolay okunur olarak düşünülür.

Bazı yazı tipleri örneği

Genel yazı tipi aileleri Yazı tipi adı örneği
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

CSS font-family özelliği

CSS'te, metni belirlemek için font-family özelliğini kullanırız.

font-family özelliği, tarayıcı/operasyon sistemi arasındaki en yüksek uyumluluk için birden fazla yazı tipi adını 'yedek' sistemi olarak içermelidir. Gerekli yazı tipinizi başlatarak ve geniş bir seride sonlandırın (diğer yazı tipleri yoksa, tarayıcıya geniş bir seride benzer yazı tipleri seçmesini sağlayın). Yazı tipi adları virgülle ayrılmalıdır.

Açıklama:Eğer font adı birden fazla kelime içeriyorsa, tırnak içinde olmalıdır, örneğin: "Times New Roman".

Örnek

Üç paragrafa farklı fontlar tanımlayın:

.p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Kişisel olarak deneyin