# Свойство 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 внутри него - `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"; }`

:

→
↑