Свойство font-size устанавливает размер шрифта текста. Размер может задаваться в различных единицах: в pt, px, em, процентах или ключевыми словами.

Синтаксис

селектор {
	font-size: CSS единицы для размера | проценты | абсолютный размер | относительный размер | inherit;
}

Значения

Значение Описание
CSS единицы Значение в любых CSS единицах.
Проценты Размер в процентах от размера шрифта родительского элемента
Абсолютные значения Возможные значения: xx-small, x-small, small, medium, large, x-large, xx-large.
Относительные значения Возможные значения: larger и smaller - они увеличивают или уменьшают шрифт относительного родительского элемента.
inherit Наследует значение родителя.

Значение по умолчанию: medium.

Абсолютные значения

Размер варьируется от xx-small до xx-large и берется относительно размера medium в данном браузере.

Значение Описание
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.

Примеры

Пример

p {
	font-size: 13px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

В данном примере для абзаца задан размер в 16px, а для span внутри него - 150%. В этом случае размер шрифта для span будет составлять 150% от своего родителя, то есть абзаца, и его реальный размер будет 16px * 150% = 24px:

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

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

В данном примере для абзаца задан размер в 16px, а для span внутри него - larger. В этом случае размер шрифта для span будет больше, чем у его родителя (абзаца):

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

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Обратите внимание на то, что шрифты с разным font-family и одинаковым font-size визуально могут быть совсем не одного размера. (Для решения данной проблемы смотрите свойство font-size-adjust) В примере ниже обоим абзацам задан font-size в 16px, но разные font-family:

font-family: Arial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

font-family: 'Times New Roman'
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.