Својство font-size

Својство font-size поставља величину фонта текста. Вредношћу својства служе било које јединице за величине (углавном, то су px, em или rem) или посебне кључне речи (користе се изузетно ретко).

Синтакса

селектор {
	font-size: вредност;
}

Вредности у облику кључних речи

Вредност	Опис
`xx-small`	Нај-најмањи. Пример: Lorem ipsum dolor sit amet.
`x-small`	Најмањи. Пример: Lorem ipsum dolor sit amet.
`small`	Мален. Пример: Lorem ipsum dolor sit amet.
`medium`	Средњи. Пример: Lorem ipsum dolor sit amet.
`large`	Велик. Пример: Lorem ipsum dolor sit amet.
`x-large`	Веома велик. Пример: Lorem ipsum dolor sit amet.
`xx-large`	Највећи. Пример: Lorem ipsum dolor sit amet.
`larger`	Веће од фонта родитеља за одређену вредност.
`smaller`	Мање од фонта родитеља за одређену вредност.

Подразумевана вредност: medium.

Пример

Поставићемо величину фонта за пасусе на 20px:

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

p {
	font-size: 20px;
}

Пример

У овом примеру за пасус је постављена величина од 16px, а за span унутар њега - 150%. У овом случају величина фонта за span ће бити 150% од свог родитеља, односно пасуса, и његова стварна величина ће бити 16px * 150% = 24px:

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

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

Пример

У овом примеру за пасус је постављена величина од 16px, а за span унутар њега - larger. У овом случају величина фонта за span ће бити већа него код његовог родитеља (пасуса):

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

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

Пример

Обратите пажњу на то да фонтови са различитим font-family а истим font-size визуелно могу бити сасвим различите величине (за решавање овог погледајте својство font-size-adjust).

У примеру испод оба пасуса имају постављен font-size од 16px, али различите 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";
}