Web siteniz için doğru yazı tipini seçmek önemlidir.
Yazı Tipi Seçimi Önemlidir
Doğru yazı tipini seçmenin okuyucuların bir web sitesini nasıl deneyimlediği üzerinde büyük etkisi vardır.
Doğru yazı tipi markanız için güçlü bir kimlik yaratabilir.
Okunması kolay bir yazı tipi kullanmak önemlidir. Yazı tipi metninize değer katar. Yazı tipi için doğru rengi ve metin boyutunu seçmek de önemlidir.
Genel Yazı Tipi Aileleri
CSS’de beş genel yazı tipi ailesi vardır:
- Serif yazı tiplerinde her harfin kenarlarında küçük bir kontur bulunur. Bir formalite ve zarafet duygusu yaratırlar.
- Sans-serif yazı tiplerinin temiz çizgileri vardır (küçük konturlar eklenmemiştir). Modern ve minimalist bir görünüm yaratırlar.
- Monospace yazı tipleri – burada tüm harfler aynı sabit genişliğe sahiptir. Mekanik bir görünüm yaratırlar.
- Cursive Fontlar insan el yazısını taklit eder.
- Fantasy yazı tipleri dekoratif/eğlenceli yazı tipleridir.
Farklı yazı tipi adlarının tümü genel yazı tipi ailelerinden birine aittir.
Serif ve Sans-serif Yazı Tipleri Arasındaki Fark
Not: Bilgisayar ekranlarında sans-serif yazı tiplerinin serif yazı tiplerine göre daha kolay okunduğu kabul edilir.
Yazı Tipi Örnekleri
| Yazı Tipi Ailesi | Örnek Font İsimleri |
| 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 Özellikleri
CSS’de bir metnin yazı tipini belirtmek için font-family özelliği kullanılır.
Not: Yazı tipi adı birden fazla kelimeden oluşuyorsa “Times New Roman” gibi tırnak işaretleri içinde olmalıdır.
İpucu: Font-family özelliği, tarayıcılar/işletim sistemleri arasında maksimum uyumluluğu sağlamak için bir “geri dönüş” sistemi olarak birkaç yazı tipi adını tutmalıdır. İstediğiniz yazı tipiyle başlayın ve genel bir aileyle bitirin (başka yazı tipi yoksa, tarayıcının genel ailede benzer bir yazı tipini seçmesine izin vermek için). Yazı tipi adları virgülle ayrılmalıdır.
Üç paragraf için farklı yazı tipleri belirleyebiliriz;
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<p class="p1">Times New Roman font.</p>
<p class="p2">Arial font.</p>
<p class="p3">Lucida Console font.</p>
</body>
</html>
