font-size Özelliği

font-size özelliği, metnin yazı tipi boyutunu ayarlar. Özelliğin değeri olarak herhangi bir boyut birimi (genellikle px, em veya rem) veya özel anahtar kelimeler (çok nadiren kullanılır) kullanılır.

Sözdizimi

seçici {
	font-size: değer;
}

Anahtar Kelime Olarak Değerler

Değer	Açıklama
`xx-small`	En en küçük. Örnek: Lorem ipsum dolor sit amet.
`x-small`	En küçük. Örnek: Lorem ipsum dolor sit amet.
`small`	Küçük. Örnek: Lorem ipsum dolor sit amet.
`medium`	Orta. Örnek: Lorem ipsum dolor sit amet.
`large`	Büyük. Örnek: Lorem ipsum dolor sit amet.
`x-large`	Çok büyük. Örnek: Lorem ipsum dolor sit amet.
`xx-large`	En büyük. Örnek: Lorem ipsum dolor sit amet.
`larger`	Ebeveynin yazı tipinden belirli bir değer kadar daha büyük.
`smaller`	Ebeveynin yazı tipinden belirli bir değer kadar daha küçük.

Varsayılan değer: medium.

Örnek

Paragrafların yazı tipi boyutunu 20px olarak ayarlayalım:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-size: 20px;
}

Örnek

Bu örnekte paragrafın boyutu 16px, içindeki span'in boyutu ise 150% olarak ayarlanmıştır. Bu durumda span'in yazı tipi boyutu kendi ebeveyninin (yani paragrafın) 150%'si kadar olacak ve gerçek boyutu 16px * 150% = 24px olacaktır:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: 150%;
}

Örnek

Bu örnekte paragrafın boyutu 16px, içindeki span'in boyutu ise larger olarak ayarlanmıştır. Bu durumda span'in yazı tipi boyutu eşdeğerinden (paragraftan) daha büyük olacaktır:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: larger;
}

Örnek

Farklı font-family'ye sahip yazı tiplerinin aynı font-size ile bile görsel olarak tamamen aynı boyutta olmayabileceğine dikkat edin (bu sorunu çözmek için font-size-adjust özelliğine bakın).

Aşağıdaki örnekte her iki paragrafa da font-size 16px olarak ayarlanmış, ancak farklı font-family verilmiştir:

<p id="elem1">
	Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
	Lorem ipsum dolor sit amet.
</p>

#elem1 {
	font-size: 16px;
	font-family: Arial;
}
#elem2 {
	font-size: 16px;
	font-family: "Times New Roman";
}