Свойство CSS font-size

Свойство CSS font-size определяет размер текста. Это одно из наиболее используемых типографских свойств, и поскольку такие единицы, как em, ex и %, вычисляются относительно него, выбранное значение также влияет на размер других элементов, которые от него зависят.

На этой странице рассмотрены все способы задать размер шрифта — ключевые слова, длины и проценты, — объясняется, как вычисляются относительные единицы (em, rem, ex, vw/vh), и показано, какой подход выбрать в том или ином случае.

Способы задать размер шрифта

Существует четыре основных способа задать font-size:

absolute-size — фиксированное ключевое слово из встроенной шкалы.
relative-size — ключевое слово, которое увеличивает или уменьшает унаследованный размер.
length — конкретное число с единицей измерения.
percentage — значение относительно размера шрифта родительского элемента.

Ключевые слова absolute-size соответствуют фиксированной шкале, определённой браузером:

xx-small
x-small
small
medium (начальное значение)
large
x-large
xx-large

Ключевые слова relative-size увеличивают или уменьшают размер относительно унаследованного значения:

smaller
larger

Длины могут быть относительными (em, ex, rem, ch, vw, vh, px) или абсолютными (in, cm, mm, pt, pc). Процент задаёт размер шрифта относительно размера шрифта родительского элемента — 150% означает полтора размера родителя.

Что выбрать?

Используйте rem для большинства текстов. Это значение масштабируется вместе с настройкой размера шрифта в браузере пользователя (хорошо для доступности) и остаётся предсказуемым, поскольку всегда привязано к корневому элементу, а не к родителю.
Используйте em, если хотите, чтобы отступы компонента или дочерний текст масштабировались вместе с собственным размером шрифта компонента.
Избегайте пиксельных (px) значений для текста тела, если важна доступность: фиксированные пиксели игнорируют предпочтительный размер по умолчанию, заданный пользователем.

Начальное значение	medium
Применяется к	Всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Да.
Анимируется	Да.
Версия	CSS1
DOM Синтаксис	object.style.fontSize = "15px";

Синтаксис

Синтаксис свойства CSS font-size

font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit;

Пример свойства font-size:

Пример свойства CSS font-size со значениями px, em, pt, x-small и % (проценты)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-size: 24pt;
      }
      h3 {
        font-size: 26px;
      }
      p {
        font-size: 1em;
      }
      a {
        font-size: 100%;
      }
      span {
        font-size: x-small;
      }
    </style>
  </head>
  <body>
    <span>This span is written with x-small value.</span>
    <p>This paragraph is written with 1em font-size.</p>
    <a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
    <h3>We used x-small font size for this heading.</h3>
    <h1>We set the font size 24pt  for this heading.</h1>
  </body>
</html>

Попробуйте сами »

Результат

Использование процентных значений

Процентные значения задаются относительно font-size родительского элемента. В примере ниже заголовок составляет 125%, то есть отображается с размером в одну четверть больше унаследованного размера шрифта тела:

Пример свойства font-size, заданного в процентах:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3 {
        font-size: 125%;
      }
    </style>
  </head>
  <body>
    <h3>This heading is 125% of the body font size.</h3>
    <span>This span uses the default (inherited) size.</span>
    <p>This paragraph uses the default (inherited) size.</p>
  </body>
</html>

Использование единицы em

Единица em считается относительной. Она основывается на вычисленном значении font-size родительского элемента. В коде ниже абзац будет иметь размер 32px, поскольку 2×16=32, а заголовок — 48px, поскольку 3×16=48px. Этот метод очень удобен, так как позволяет быть уверенным, что все дочерние элементы всегда будут масштабироваться относительно друг друга.

Пример свойства font-size со значением "em":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        font-size: 16px;
      }
      p {
        font-size: 2em;
      }
      h2 {
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>

Попробуйте сами »

Использование единицы rem

При использовании единицы rem размер шрифта всегда задаётся относительно корневого элемента <html>, независимо от глубины вложенности элемента. В примере ниже корневой элемент имеет размер 16px, поэтому заголовок составляет 1.5rem = 1,5 × 16 = 24px. Поскольку каждый rem привязан к одному и тому же корневому значению, вы избегаете проблемы накопления, которую могут вызывать единицы em внутри вложенных элементов.

Пример свойства font-size со значением "rem":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        font-size: 16px;
      }
      h2 {
        font-size: 1.5rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>

Попробуйте сами »

Использование единицы ex

При использовании единицы ex значение 1ex равно x-height — высоте строчной буквы «x» — текущего шрифта элемента. Поскольку x-height различается от шрифта к шрифту, размер на основе ex зависит от используемого шрифта, что делает его менее предсказуемым, чем em или rem. В примере ниже размер текста задан в 15 раз больше x-height.

Свойство CSS font-size

.exunit {
  font-size: 15ex;
}

Использование единиц viewport

Единицы viewport (vw и vh) используются для задания размера шрифта элемента относительно размера viewport.

1vw = 1% ширины viewport
1vh = 1% высоты viewport

Свойство CSS font-size

.viewport {
  font-size: 120vh;
}

Пример свойства font-size со значением "length":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        color: green;
        font-size: 2vh;
      }
      p {
        color: red;
        font-size: 1em;
      }
      .length {
        color: orange;
        font-size: 30px;
      }
      h3 {
        color: lightblue;
        font-size: 3ex;
      }
      h1 {
        color: purple;
        font-size: 24pt;
      }
      a {
        color: blue;
        font-size: 120%;
      }
    </style>
  </head>
  <body>
    <h2>Font-size property</h2>
    <span>This text is written with 2vh font-size.</span>
    <p>This paragraph is written with 1em font-size.</p>
    <div class="length">Example with 30px font-size length </div>
    <h3>Example with 3ex font-size length.</h3>
    <h1>We set the font size 24pt  for this heading.</h1>
    <a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
  </body>
</html>

Попробуйте сами »

Пример свойства font-size с абсолютными значениями:

Пример свойства font-size (absolute-size):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .font-xxsmall {
        color: grey;
        font-size: xx-small;
      }
      .font-xsmall {
        color: grey;
        font-size: x-small;
      }
      .font-small {
        color: grey;
        font-size: small;
      }
      .font-medium {
        color: grey;
        font-size: medium;
      }
      .font-large {
        color: grey;
        font-size: large;
      }
      .font-xlarge {
        color: grey;
        font-size: x-large;
      }
      .font-xxlarge {
        color: grey;
        font-size: xx-large;
      }
    </style>
  </head>
  <body>
    <h1>Font-size property</h1>
    <div class="font-xxsmall">Example with font-size xx-small property</div>
    <div class="font-xsmall">Example with font-size x-small property</div>
    <div class="font-small">Example with font-size small property</div>
    <div class="font-medium">Example with font-size medium property</div>
    <div class="font-large">Example with font-size large property</div>
    <div class="font-xlarge">Example with font-size x-large property</div>
    <div class="font-xxlarge">Example with font-size xx-large property</div>
  </body>
</html>

Попробуйте сами »

Пример свойства font-size со значениями "smaller" и "larger":

Пример свойства font-size со значениями "smaller" и "larger":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .smaller {
        color: red;
        font-size: smaller;
      }
      .larger {
        color: red;
        font-size: larger;
      }
    </style>
  </head>
  <body>
    <h1>font-size property</h1>
    <div class="smaller">Example with font-size smaller property</div>
    <div class="larger">Example with font-size larger property</div>
  </body>
</html>

Попробуйте сами »

Значения

Значение	Описание	Попробуйте
medium	Устанавливает font-size в medium. Это значение по умолчанию.	Попробуйте »
xx-small	Устанавливает font-size в xx-small.	Попробуйте »
x-small	Устанавливает font-size в x-small.	Попробуйте »
small	Устанавливает font-size в small.	Попробуйте »
large	Устанавливает font-size в large.	Попробуйте »
x-large	Устанавливает font-size в x-large.	Попробуйте »
xx-large	Устанавливает font-size в xx-large.	Попробуйте »
smaller	Уменьшает font-size.	Попробуйте »
larger	Увеличивает font-size.	Попробуйте »
length	Задаёт font-size в px, em и т.д.	Попробуйте »
%	Устанавливает font-size в процентах от размера шрифта родительского элемента.	Попробуйте »
initial	Устанавливает свойство в значение по умолчанию.	Попробуйте »
inherit	Наследует свойство от родительского элемента.

Связанные свойства

Для управления остальной типографикой элемента сочетайте font-size со следующими свойствами:

font-family — выбор гарнитуры шрифта.
font-weight — насыщенность (жирность) текста.
font-style — курсивное или наклонное начертание.
line-height — управление вертикальным расстоянием между строками.
font — сокращённое свойство, задающее сразу несколько из них.

Практика

Какие единицы можно использовать для задания свойства 'font-size' в CSS?