CSS Yazı Tipleri (Fonts)
CSS Yazı Tipleri Nelerdir? Google Yazı Tipleri Nelerdir? CSS Yazı Tipleri Nasıl Kullanılır? CSS Yazı Tipi Özellikleri nelerdir? Tüm bu soruların cevaplarını bu makalemizce cevaplıyor olacağız.
CSS Yazı Tipleri (Fonts) Nelerdir?
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 oluşturabilir.
Okunması kolay bir yazı tipi kullanmak önemlidir. Yazı tipi, metninize değer katar. Aynı zamanda yazı tipi için doğru renk ve metin boyutunu seçmek de önemlidir.
Genel Yazı Tipi Çeşitleri
CSS'de beş genel yazı tipi çeşiti vardır bunlar;
- Serif yazı tiplerinde her harfin kenarlarında küçük bir çizgi bulunur. Bir formalite ve zarafet duygusu yaratırlar.
- Sans-serif yazı tiplerinde temiz çizgiler vardır. Modern ve minimalist bir görünüm yaratırlar.
- Monospace yazı tiplerinde tüm harfler aynı 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.
Serif ve Sans-serif Yazı Tipleri Arasındaki Fark
Not: Bilgisayar ekranlarında sans-serif yazı tiplerinin okunması, serif yazı tiplerinden daha kolay kabul edilir.
Bazı Yazı Tipi Örnekleri
| Genel Yazı Tipi Çeşiti | Yazı Tipi Çeşitlerine Örnekler |
|---|---|
| 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'de, bir metnin yazı tipini belirtmek için font-family özelliğini kullanılır.
Not: Yazı tipi adı birden fazla kelimeyse, "Times New Roman" gibi tırnak işaretleri içinde olmalıdır.
İpucu: Tarayıcılar/işletim sistemleri arasında maksimum uyumluluğu sağlamak için font-family özelliği, bir "yedek (fallback)" sistem olarak birkaç font adını içermelidir. Yazı tipi adları virgülle ayrılmalıdır. Sonraki yazılarımızda yedek yazı tipleri hakkında daha fazla bilgi edineceksiniz.
Örnek:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
CSS Web Güvenli Yazı Tipleri (CSS Web Safe Fonts)
Web Güvenli Yazı Tipleri nelerdir?
Web için güvenli yazı tipleri, tüm tarayıcılarda ve cihazlarda evrensel olarak kabul edilen yazı tipleridir.
Yedek Yazı Tipleri (Fallback)
Bir yazı tipinin bulunmama veya düzgün yüklenmeme olasılığı her zaman vardır. Bu nedenle, her zaman yedek yazı tiplerini kullanmak çok önemlidir.
Bu, font-family özelliğine benzer "yedek yazı tiplerinin" bir listesini eklemeniz gerektiği anlamına gelir. İlk yazı tipi çalışmazsa, tarayıcı bir sonrakini, sonrakini vb. deneyecektir. Listeyi her zaman genel bir yazı tipi çeşiti adıyla bitirin.
Aşağıdaki örneğimizde üç yazı tipi türü vardır bunlar: Tahoma, Verdana ve sans-serif. Birincinin bulunamaması durumunda ikinci ve üçüncü yazı tipleri yüklenecektir.
Örnek:
p {
font-family: Tahoma, Verdana, sans-serif;
}HTML ve CSS için En İyi Web Güvenli Yazı Tipleri
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Sık Kullanılan Yazı Tipi Yedekleri
- Serif
- Sans-serif
- Monospace
- Cursive
- Fantasy
Serif Yazı Tipleri
| font-family | Örnek |
|---|---|
| "Times New Roman", Times, serif |
This is a HeadingThis is a paragraph. |
| Georgia, serif |
This is a HeadingThis is a paragraph. |
| Garamond, serif |
This is a HeadingThis is a paragraph. |
Sans-Serif Yazı Tipleri
| font-family | Örnek |
|---|---|
| Arial, Helvetica, sans-serif |
This is a HeadingThis is a paragraph. |
| Tahoma, Verdana, sans-serif |
This is a HeadingThis is a paragraph. |
| "Trebuchet MS", Helvetica, sans-serif |
This is a HeadingThis is a paragraph. |
| Georgia, Verdana, sans-serif |
This is a HeadingThis is a paragraph. |
Monospace Yazı Tipleri
| font-family | Örnek |
|---|---|
| "Courier New", Courier, monospace |
This is a HeadingThis is a paragraph. |
Cursive Yazı Tipleri
| font-family | Örnek |
|---|---|
| "Brush Script MT", cursive |
This is a HeadingThis is a paragraph. |
Fantasy Yazı Tipleri
| font-family | Örnek |
|---|---|
| Copperplate, Papyrus, fantasy |
This is a HeadingThis is a paragraph. |
Yazı Tipi Stili (Font Style)
font-style özelliği çoğunlukla italik metni belirtmek için kullanılır.
Bu özelliğin üç kullanımı vardır:
- normal - Metin normal olarak gösterilir
- italic - Metin italik olarak gösterilir
- oblique - Metin "eğik" (eğik italiğe çok benzer, ancak tarayıcılar tarafından daha az desteklenir)
Örnek:
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Yazı Tipi Kalınlığı (Font Weight)
font-weight özelliği, bir yazı tipinin kalınlığını ayarlar.
Örnek:
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
Yazı Tipi Değişikliği
font-variant özelliği, bir metnin küçük harfli bir fontta görüntülenip görüntülenmeyeceğini belirtir.
Küçük büyük harfli bir yazı tipinde, tüm küçük harfler büyük harflere dönüştürülür. Ancak dönüştürülen büyük harfler, metindeki orijinal büyük harflerden daha küçük bir yazı tipi boyutunda görünür.
Örnek:
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
Yazı Tipi Boyutu (Font Size)
font-size özelliği metnin boyutunu ayarlar.
Web tasarımında metin boyutunu yönetebilmek önemlidir. Ancak, paragrafların başlıklar ya da başlıkların paragraflar gibi görünmesi için yazı tipi boyutu ayarlamalarını kullanmamalısınız.
Her zaman başlıklar için <h1> - <h6> kullanırken, paragraflar için <p> gibi uygun HTML etiketlerini kullanmalısınız.
Yazı tipi boyutu değeri, mutlak veya göreli bir boyut olabilir.
Absolute size:
- Metni belirtilen bir boyuta ayarlar.
- Bir kullanıcının tüm tarayıcılarda metin boyutunu değiştirmesine izin vermez.
- Mutlak boyut, çıktının fiziksel boyutu bilindiğinde yararlıdır.
Göreceli boyut:
- Çevredeki öğelere göre boyutu ayarlar.
- Bir kullanıcının tarayıcılarda metin boyutunu değiştirmesine izin verir.
Not: Bir yazı tipi boyutu belirtmezseniz, paragraflar gibi normal metin için varsayılan boyut 16 pikseldir (16 piksel=1em).
Yazı Tipi Boyutunu Piksellerle Ayarlama
Metin boyutunu piksellerle ayarlamak, metin boyutu üzerinde tam kontrol sahibi olmanızı sağlar.
Örnek:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}İpucu: Piksel kullanıyorsanız, tüm sayfayı yeniden boyutlandırmak için yakınlaştırma aracını kullanmaya devam edebilirsiniz.
Yazı Tipi Boyutunu "Em" ile Ayarlama
Kullanıcıların metni yeniden boyutlandırmasına izin vermek için, birçok geliştirici piksel yerine em kullanır.
1em, geçerli yazı tipi boyutuna eşittir. Tarayıcılarda varsayılan metin boyutu 16 pikseldir. Bu nedenle, varsayılan 1em boyutu 16 pikseldir.
Boyutu şu formülü kullanarak kolaylıkla piksel cinsinden hesaplayabilirsiniz: piksel/16=em
Örnek:
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
Yüzde ve Em Kombinasyonunu Kullanma
Tüm tarayıcılarda çalışan çözüm, <body> öğesi için yüzde olarak varsayılan bir yazı tipi boyutu ayarlamaktır.
Örnek:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Cihaz Duyarlı Yazı Tipi Boyutu (Responsive Font Size)
Metin boyutu, "görünüm alanı genişliği (viewport width)" anlamına gelen bir vw birimi ile ayarlanabilir.
Bu şekilde metin boyutu tarayıcı penceresinin boyutunu takip edecektir.
Örnek:
<h3 style="font-size:8vw">Merhaba Dünya!</h3>Merhaba Dünya!
Google Yazı Tipleri
HTML'de standart yazı tiplerinden herhangi birini kullanmak istemiyorsanız Google Yazı Tiplerini kullanabilirsiniz.
Google Yazı Tiplerinin kullanımı ücretsizdir ve aralarından seçim yapabileceğiniz 1000'den fazla yazı tipi vardır.
Google Yazı Tipleri Nasıl Kullanılır?
Sadece <head> bölümüne özel bir stil sayfası bağlantısı eklemelisiniz.
Örnek:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Birden Fazla Google Yazı Tipi Kullanma
Birden çok Google yazı tipi kullanmak için, yazı tipi adlarını aşağıdaki gibi bir dikey çizgi (|) ile ayırmanız yeterlidir.
Örnek:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Google Yazı Tiplerini Şekillendirme
Elbette Google Yazı Tiplerini CSS ile istediğiniz gibi şekillendirebilirsiniz!
Örnek:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Google Yazı Tipi Efektlerini Etkinleştirme
Aşağıdaki örnekte "Sofya" yazı tipine ateş efekti ekliyoruz.
Örnek:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on Fire</h1>
</body>Google Yazı Tipi Eşleştirme Kuralları
Yazı tipi eşleştirmeleri oluşturmak için bazı temel kurallar vardır:
- Tamamlayıcı (Complement)
- Birbirini tamamlayan yazı tipi eşleştirmeleri bulmak her zaman daha sağlıklıdır.
- Bir yazı tipi kombinasyonu, çok benzer veya çok farklı olmadan uyumlu olmalıdır.
- Yazı Tipi Süper Tür Kullanma (Superfamilies)
- Yazı tipi üst türü, birlikte iyi çalışacak şekilde tasarlanmış bir yazı tipi grubudur. Bu nedenle, aynı üst tür içinde farklı yazı tiplerini kullanmak güvenlidir.
- Örneğin, Lucida üst türü şu yazı tiplerini içerir: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif ve Lucida Math.
- Kontrast Kraldır (Contrast is King)
- Çok benzer iki yazı tipi genellikle çakışacaktır. Bununla birlikte, doğru şekilde yapılan kontrastlar, her yazı tipinde en iyisini ortaya çıkarmaktadır.
- Örnek: Serif ile sans serif'i birleştirmek iyi bilinen bir kombinasyondur.
- Güçlü bir üst tür, aynı yazı tipinin hem serif hem de sans serif varyasyonlarını içerir (örneğin, Lucida ve Lucida Sans).
- Sadece Bir Patron Seçin (Choose Only One Boss)
- Bir yazı tipi patron olmalıdır. Bu, sayfanızdaki yazı tipleri için bir hiyerarşi oluşturur. Bu, boyut, ağırlık ve renk değiştirilerek elde edilebilir.
Örnek:
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}
h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}CSS Yazı Tipi Özelliği
Kodu kısaltmak için, tüm bireysel yazı tipi özelliklerini tek bir özellikte belirtmek de mümkündür.
font özelliği, aşağıdakiler için bir kısaltma özelliktir:
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
Not: Yazı tipi boyutu ve yazı tipi türü değerleri gereklidir. Diğer değerlerden biri eksikse, varsayılan değerleri kullanılır.
Örnek:
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}Tepkiniz Nedir?
