Svojstvo font-size

Svojstvo font-size postavlja veličinu fonta teksta. Vrednost svojstva mogu biti bilo koje jedinice za veličine (obično su to px, em ili rem) ili specijalne ključne reči (koriste se veoma retko).

Sintaksa

selektor {
	font-size: vrednost;
}

Vrednosti u vidu ključnih reči

Vrednost	Opis
`xx-small`	Najmanji najmanji. Primer: Lorem ipsum dolor sit amet.
`x-small`	Najmanji. Primer: Lorem ipsum dolor sit amet.
`small`	Mali. Primer: Lorem ipsum dolor sit amet.
`medium`	Srednji. Primer: Lorem ipsum dolor sit amet.
`large`	Veliki. Primer: Lorem ipsum dolor sit amet.
`x-large`	Veoma veliki. Primer: Lorem ipsum dolor sit amet.
`xx-large`	Najveći. Primer: Lorem ipsum dolor sit amet.
`larger`	Veće od fonta roditelja za određenu vrednost.
`smaller`	Manje od fonta roditelja za određenu vrednost.

Podrazumevana vrednost: medium.

Primer

Postavimo paragrafima veličinu fonta na 20px:

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

p {
	font-size: 20px;
}

Primer

U ovom primeru za paragraf je postavljena veličina na 16px, a za span unutar njega - 150%. U ovom slučaju veličina fonta za span će biti 150% od svog roditelja, odnosno paragrafa, i njegova stvarna veličina će biti 16px * 150% = 24px:

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

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

Primer

U ovom primeru za paragraf je postavljena veličina na 16px, a za span unutar njega - larger. U ovom slučaju veličina fonta za span će biti veća nego kod njegovog roditelja (paragrafa):

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

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

Primer

Obratite pažnju na to da fontovi sa različitim font-family i istim font-size vizuelno mogu biti potpuno različite veličine (za rešavanje ovog problema pogledajte svojstvo font-size-adjust).

U primeru ispod oba paragrafa imaju postavljen font-size na 16px, ali različite font-family:

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