Lastnost font-size

Lastnost font-size določa velikost pisave besedila. Vrednost lastnosti so poljubne enote za velikosti (običajno so to px, em ali rem) ali posebne ključne besede (uporabljajo se zelo redko).

Sintaksa

selektor {
	font-size: vrednost;
}

Vrednosti v obliki ključnih besed

Vrednost	Opis
`xx-small`	Najmanjša možna. Primer: Lorem ipsum dolor sit amet.
`x-small`	Zelo majhna. Primer: Lorem ipsum dolor sit amet.
`small`	Majhna. Primer: Lorem ipsum dolor sit amet.
`medium`	Srednja. Primer: Lorem ipsum dolor sit amet.
`large`	Velika. Primer: Lorem ipsum dolor sit amet.
`x-large`	Zelo velika. Primer: Lorem ipsum dolor sit amet.
`xx-large`	Največja možna. Primer: Lorem ipsum dolor sit amet.
`larger`	Večja od pisave starša za določeno vrednost.
`smaller`	Manjša od pisave starša za določeno vrednost.

Privzeta vrednost: medium.

Primer

Nastavimo velikost pisave odstavkov na 20px:

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

p {
	font-size: 20px;
}

Primer

V tem primeru je za odstavek nastavljena velikost 16px, za span znotraj njega pa 150%. V tem primeru bo velikost pisave za span 150% od svojega starša, to je odstavka, in njegova dejanska velikost bo 16px * 150% = 24px:

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

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

Primer

V tem primeru je za odstavek nastavljena velikost 16px, za span znotraj njega pa larger. V tem primeru bo velikost pisave za span večja kot pri njegovem staršu (odstavku):

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

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

Primer

Bodite pozorni na to, da so pisave z različnimi font-family in enakim font-size lahko vizualno povsem drugačne velikosti (za rešitev te težave glejte lastnost font-size-adjust).

V spodnjem primeru imata oba odstavka nastavljen font-size na 16px, vendar različni 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";
}