Proprietatea font-size

Proprietatea font-size stabilește dimensiunea fontului textului. Valoarea proprietății poate fi orice unitate pentru dimensiuni (de obicei, px, em sau rem) sau cuvinte cheie speciale (folosite foarte rar).

Sintaxă

selector {
	font-size: valoare;
}

Valori sub formă de cuvinte cheie

Valoare	Descriere
`xx-small`	Cea mai mai mică. Exemplu: Lorem ipsum dolor sit amet.
`x-small`	Cea mai mică. Exemplu: Lorem ipsum dolor sit amet.
`small`	Mică. Exemplu: Lorem ipsum dolor sit amet.
`medium`	Medie. Exemplu: Lorem ipsum dolor sit amet.
`large`	Mare. Exemplu: Lorem ipsum dolor sit amet.
`x-large`	Foarte mare. Exemplu: Lorem ipsum dolor sit amet.
`xx-large`	Cea mai mare. Exemplu: Lorem ipsum dolor sit amet.
`larger`	Mai mare decât fontul părintelui cu o anumită valoare.
`smaller`	Mai mic decât fontul părintelui cu o anumită valoare.

Valoarea implicită: medium.

Exemplu

Să stabilim pentru paragrafe dimensiunea fontului la 20px:

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

p {
	font-size: 20px;
}

Exemplu

În acest exemplu pentru paragraf este stabilită dimensiunea la 16px, iar pentru span în interiorul lui - 150%. În acest caz dimensiunea fontului pentru span va fi 150% din părintele său, adică din paragraf, iar dimensiunea sa reală va fi 16px * 150% = 24px:

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

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

Exemplu

În acest exemplu pentru paragraf este stabilită dimensiunea la 16px, iar pentru span în interiorul lui - larger. În acest caz dimensiunea fontului pentru span va fi mai mare decât a părintelui său (paragrafului):

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

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

Exemplu

Atenție la faptul că fonturile cu font-family diferit și același font-size vizual pot fi cu totul de dimensiuni diferite (pentru rezolvarea acestei probleme vezi proprietatea font-size-adjust).

În exemplul de mai jos ambelor paragrafe le este stabilit font-size la 16px, dar font-family diferite:

<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";
}