Właściwość font-size

Właściwość font-size ustawia rozmiar czcionki tekstu. Wartością właściwości są dowolne jednostki rozmiaru (zazwyczaj są to px, em lub rem) lub specjalne słowa kluczowe (używane bardzo rzadko).

Składnia

selektor {
	font-size: wartość;
}

Wartości w postaci słów kluczowych

Wartość	Opis
`xx-small`	Najmniejszy najmniejszy. Przykład: Lorem ipsum dolor sit amet.
`x-small`	Najmniejszy. Przykład: Lorem ipsum dolor sit amet.
`small`	Mały. Przykład: Lorem ipsum dolor sit amet.
`medium`	Średni. Przykład: Lorem ipsum dolor sit amet.
`large`	Duży. Przykład: Lorem ipsum dolor sit amet.
`x-large`	Bardzo duży. Przykład: Lorem ipsum dolor sit amet.
`xx-large`	Największy. Przykład: Lorem ipsum dolor sit amet.
`larger`	Większy od czcionki rodzica o pewną wartość.
`smaller`	Mniejszy od czcionki rodzica o pewną wartość.

Wartość domyślna: medium.

Przykład

Ustawmy akapitom rozmiar czcionki na 20px:

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

p {
	font-size: 20px;
}

Przykład

W tym przykładzie dla akapitu ustawiono rozmiar 16px, a dla span wewnątrz niego - 150%. W tym przypadku rozmiar czcionki dla span będzie wynosił 150% od swojego rodzica, czyli akapitu, a jego rzeczywisty rozmiar będzie 16px * 150% = 24px:

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

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

Przykład

W tym przykładzie dla akapitu ustawiono rozmiar 16px, a dla span wewnątrz niego - larger. W tym przypadku rozmiar czcionki dla span będzie większy niż u jego rodzica (akapitu):

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

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

Przykład

Zwróć uwagę, że czcionki z różnymi font-family i tym samym font-size wizualnie mogą być całkiem innego rozmiaru (aby rozwiązać ten problem, zobacz właściwość font-size-adjust).

W poniższym przykładzie obu akapitom ustawiono font-size na 16px, ale różne 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";
}