Vlastnosť font-size

Vlastnosť font-size nastavuje veľkosť písma textu. Hodnotou vlastnosti sú ľubovoľné jednotky pre veľkosti (spravidla sú to px, em alebo rem) alebo špeciálne kľúčové slová (používajú sa veľmi zriedkavo).

Syntax

selektor {
	font-size: hodnota;
}

Hodnoty vo forme kľúčových slov

Hodnota	Popis
`xx-small`	Najmenšia najmenšia. Príklad: Lorem ipsum dolor sit amet.
`x-small`	Najmenšia. Príklad: Lorem ipsum dolor sit amet.
`small`	Malá. Príklad: Lorem ipsum dolor sit amet.
`medium`	Stredná. Príklad: Lorem ipsum dolor sit amet.
`large`	Veľká. Príklad: Lorem ipsum dolor sit amet.
`x-large`	Veľmi veľká. Príklad: Lorem ipsum dolor sit amet.
`xx-large`	Najväčšia. Príklad: Lorem ipsum dolor sit amet.
`larger`	Väčšia ako písmo rodiča o určitú hodnotu.
`smaller`	Menšia ako písmo rodiča o určitú hodnotu.

Predvolená hodnota: medium.

Príklad

Nastavme odsekom veľkosť písma na 20px:

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

p {
	font-size: 20px;
}

Príklad

V tomto príklade je pre odsek nastavená veľkosť na 16px, a pre span vnútri neho - 150%. V tomto prípade bude veľkosť písma pre span predstavovať 150% od svojho rodiča, teda odseku, a jeho skutočná veľkosť bude 16px * 150% = 24px:

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

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

Príklad

V tomto príklade je pre odsek nastavená veľkosť na 16px, a pre span vnútri neho - larger. V tomto prípade bude veľkosť písma pre span väčšia ako u jeho rodiča (odseku):

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

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

Príklad

Všimnite si, že písma s rôznymi font-family a rovnakým font-size môžu byť vizuálne úplne inej veľkosti (pre riešenie tohto problému pozri vlastnosť font-size-adjust).

V príklade nižšie majú obom odsekom nastavený font-size na 16px, ale rôzne 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";
}