Vlastnost font-size

Vlastnost font-size nastavuje velikost písma textu. Hodnotou vlastnosti jsou jakékoli jednotky pro velikosti (obvykle jsou to px, em nebo rem) nebo speciální klíčová slova (používají se velmi zřídka).

Syntaxe

selektor {
	font-size: hodnota;
}

Hodnoty ve formě klíčových slov

Hodnota	Popis
`xx-small`	Nejmenší nejmenší. Příklad: Lorem ipsum dolor sit amet.
`x-small`	Nejmenší. Příklad: Lorem ipsum dolor sit amet.
`small`	Malý. Příklad: Lorem ipsum dolor sit amet.
`medium`	Střední. Příklad: Lorem ipsum dolor sit amet.
`large`	Velký. Příklad: Lorem ipsum dolor sit amet.
`x-large`	Velmi velký. Příklad: Lorem ipsum dolor sit amet.
`xx-large`	Největší. Příklad: Lorem ipsum dolor sit amet.
`larger`	Větší než písmo rodiče o určitou hodnotu.
`smaller`	Menší než písmo rodiče o určitou hodnotu.

Výchozí hodnota: medium.

Příklad

Nastavme odstavcům velikost písma na 20px:

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

p {
	font-size: 20px;
}

Příklad

V tomto příkladu je pro odstavec nastavena velikost na 16px, a pro span uvnitř něj - 150%. V tomto případě bude velikost písma pro span 150% od svého rodiče, tedy odstavce, a jeho skutečná velikost bude 16px * 150% = 24px:

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

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

Příklad

V tomto příkladu je pro odstavec nastavena velikost na 16px, a pro span uvnitř něj - larger. V tomto případě bude velikost písma pro span větší, než u jeho rodiče (odstavce):

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

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

Příklad

Všimněte si, že písma s různým font-family a stejným font-size mohou vizuálně být zcela odlišné velikosti (pro řešení tohoto problému viz vlastnost font-size-adjust).

V následujícím příkladu mají oběma odstavcům nastaven font-size na 16px, ale různé 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";
}