Свойство 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%;
}

Пример

<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";
}