CSS çok farklı yazı tiplerini farklı tip ve boyutlarda kullanmanıza olanak tanır.

Bir web sayfasında birden fazla font familyası kullanabilir ve istediğiniz yerde istediğiniz stili CSS ile tanımlayabilirsiniz. Font özellikleri ve font seçimi web tasarımda dikkat edilmesi gereken önemli unsurlardan biridir. uygun font kullanımı ve web site genel tipografisinin uyumlu olmasını sağlamak için bolca kurumsal web site incelemenizi ve tasarım vizyonunuzu geliştirmenizi öneririm. CSS Design Awarrds gibi UX/UI konusunda başarılı web tasarım projelerine  ödül veren sitelerde bolca vakit geçirmeniz tasarım vizyonunuzun gelişmesi konusunda size büyük katkı sağlayacaktır. 

CSS Font Özellikleri

• font-family : Font-family özelliği ile hangi font ailesini kullanmak istiyorsanız belirtmenizi sağlar.
• font-style : Yazı tipinini, italik, eğik(oblique) ve normal olarak ayarlamanızı sağlar.
• font-variant : font-variant özelliği yazı tipinin büyük harf ya da küçük harf görüneceğini belirler.
• font-weight : font-wight özeliği yazı tipinin kalınlığını belirler. bold/normal/light (300/400/500/600..)
• font-size/line-height : Bu özellik yazı tipinin hem boyutunu hem de satır yüksekliğini beraber ayaralamanızı sağlar.

font-family Özelliği

CSS'te font-family özelliği metnin yazı tipini belirtmek için kullanılır.
Yazı tipi ailesini ve jenerik yazı aile adlarının öncelikli listesini belirtmek için kullanılır.

font-family Sözdizimi

/* Font ailesi adı ve jenerik aile adı birlikte kullanımı*/
font-family: 'Open Sans', sans-serif;
font-family: 'Poppins', sans-serif;

/* Sadece jenerik aile adı kullanımı*/
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;

font-family: 'family-name', generic-name;

                

font-family özelliği birden çok font ailesi ile birlikte kullanılacak ise her aile isminden sonra virgül kullanılır.

Önemli : Eğer bir aile adı birden çok kelime içeriyorsa yani aralarında boşluk varsa o aile ismini aşağıdaki örenekte olduğu gibi tırnakla ayırmak gerekir."Times New Roman" da olduğu gibi.

font-family: "Times New Roman", Georgia, serif;                        
                    

Aşağıdaki Örnek geçerlidir. Ama önerilmez.

font-family: Open Sans, serif;                        
                                            

Birden çok kelime içeren font ailesi isimleri tırnak arasında belirtilerek yazılmalıdır.
serif, sans-serif, monospace gibi jenerik aile sisimleri de tırnak içerisine alınmadan en sona yazılması gerekir.

font-style Özelliği

font-style özelliği yazı tipinin italikmi normal mi görüneceğini belirtmek için kullanılır.
3 farklı değeri mevcuttur

• font-style:normal; : Burada yazı metni normal şekilde gösterilir.
• font-style:italic; : Metin italik stilde gösterilir.
• font-style:oblique; : Metin eğik şekilde gösterilir. İtalik stile çok benzer ama bazı tarayıcılar tarafından daha az desteklendiği için çok kullanımı önerilmez

font-weight Özelliği

font-weight özelliği yazı tipinin kalınlığını belirtmek için kullanılır.

p{font-wight:normal|bold|bolder|light|lighter|100...900|initial|inherit}
                

font-variant CSS Özelliği

font-variant CSS özellği ile küçük büyük harfe duyarlı bir yazı tipinde tüm küçük harflerin büyük harfe dönüştürülmesi için font-variant:small-caps; özelliği kullanılır.

Font Size Özelliği

font-family: özelliği HTML sayfadaki metin boyutlarının belirlenmesi için kullanılır.

Eğer bir yazı tipi boyutu belirtmezseniz p,span,ul gibi diğer metinler için standart boyut 16piksel olacaktır. 16piksel = 1em

Font-size px(Piksel) ile

h1{
    font-size:40px;
}
h2{
    font-size:30px;
}
h3{
    font-size:24px;
}
                

em ile metin Boyutu Ayarlama

Kullanıcıların metin boyutunu şekillendirmesine izin vermek için em değeri kullanılır.

Tarayıcalrın varsayılan yazı boyutu 16px'dir. Bundan dolayı 1em = 16piksel'dir

em ve pixel arasında basit bir formül olarak şunu belirtebiliriz; px/16=em

h1{
    font-size:2.5em; /* 2.5 x 16 = 40px; */
}
h2{
    font-size:1.875em; /* 1.875 x 16 = 30px; */
}
h3{
    font-size:1.5em; /* 1.5 x 16 = 24px; */
} 
                                    

Responsive (Duyarlı) font-size

Duyarlı metin boyutu ayarlamak için vw viewport ifadesi yani görüntü alanı genişliği ölçüsü kullanılır.
font-size:10vw; denildiğinde metin boyutu mobil, tablet ve desktop cihazlara göre kendini ayarlayacaktır.

Aşağıdaki örnekte bu durumu gözleyebilirsiniz.

<h1 class="font-size-vw">
    Duyarlı Başlık 5vw
</h1>
<h1 class="font-size-px">
    Normal Başlık 48px
</h1>           
                

h1.font-size-vw {
    font-size: 5vw;
}

h1.font-size-px {
    font-size: 48px;
}