Исполняемые доки CSS: Размер шрифта

Q: Как изменить размер шрифта в CSS?

Задайте элементу свойство font-size: p { font-size: 18px; }. Оно принимает длины (px, rem, em), проценты и ключевые слова вроде large.

Q: Как изменить размер шрифта в HTML?

Через CSS, в таблице стилей или в атрибуте style: . Старый тег в HTML5 устарел, использовать его не стоит.

Q: Что использовать для размера шрифта: px, em или rem?

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

Q: Почему размер шрифта в em все время растет?

Потому что em считается от размера шрифта родителя, и у вложенных элементов значения перемножаются: 1.2em внутри 1.2em дает 1.44 от базового. Перейдите на rem, который всегда считается от корневого элемента.

Как задать размер шрифта в CSS

Свойство font-size задает размер текста. Задайте его любому элементу, и весь текст внутри унаследует размер, если дочерний элемент не задаст свой.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

Чтобы изменить размер шрифта в HTML, все равно используется CSS. Добавьте атрибут style () или правило в таблицу стилей. Тегу  из 1990-х не место на современной странице.

Какие единицы принимает font-size

Значение	Пример	От чего считается
`px`	`16px`	Ни от чего: фиксированный размер
`rem`	`1.25rem`	Размер шрифта корневого элемента `<html>` (по умолчанию 16px)
`em`	`1.2em`	Размер шрифта родителя
`%`	`120%`	Размер шрифта родителя, как `em` (`120%` это `1.2em`)
Ключевое слово	`large`	Готовая шкала вокруг `medium` по умолчанию
Относительное ключевое слово	`smaller`, `larger`	На шаг от размера родителя
Viewport	`4vw`	Ширина окна просмотра (4% от нее)
Функция	`clamp(1rem, 4vw, 2rem)`	Плавно между минимумом и максимумом

Введите значение и посмотрите, какой размер вычислит браузер:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Попробуйте 20px, 2em, 150%, x-large, smaller и 5vw. Невалидное значение, например big, игнорируется, и текст сохраняет последний валидный размер.

rem и em: разница, которая кусается

rem всегда смотрит на корневой элемент, поэтому 1.2rem одинаков, где бы он ни стоял. em смотрит на родителя, поэтому при вложении размеры перемножаются:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

Самый внутренний блок с em равен 16 × 1.2 × 1.2 × 1.2 = 27.648px. Самый внутренний блок с rem по-прежнему 19.2px. Такое перемножение полезно для компонента, части которого должны масштабироваться вместе, а во всех остальных случаях становится сюрпризом. Все единицы длины сравниваются на странице про единицы.

Ключевые слова: от xx-small до xx-large

Абсолютные ключевые слова соответствуют фиксированной шкале вокруг medium, который равен размеру пользователя по умолчанию (16px, если его не меняли):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

При стандартных 16px small это 13px, large 18px, x-large 24px, а xx-large 32px. Ключевые слова годятся для быстрой работы, но дизайн-системе обычно нужна своя шкала в rem.

Адаптивный размер шрифта через clamp()

Заголовок, который должен расти вместе с экраном, но не становиться слишком маленьким или слишком большим, это один вызов clamp(): минимум, предпочтительный размер, который масштабируется, и максимум.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

В превью шириной 800px 5vw равно 40px, это между 24px и 48px, поэтому побеждает оно. Адаптивная типографика подробно разобрана на странице про clamp.

Базовый размер для всей страницы

Задайте размер один раз на body (или html) и остальные размеры задавайте относительно него:

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

Избегайте трюков вроде html { font-size: 62.5%; }, если только все размеры на странице затем не заданы в rem, и никогда не задавайте фиксированный размер в px на html: он перебивает размер шрифта, выбранный читателем в браузере, а некоторые люди без этой настройки вообще не могут читать.

Замечания о доступности

Основной текст от 16px и больше это хороший минимум для чтения с экрана.
Размеры в rem и em следуют за настройкой шрифта пользователя по умолчанию. Размеры в px следуют за масштабом страницы, но не за этой настройкой.
На iPhone Safari увеличивает страницу при фокусе на поле ввода с размером шрифта меньше 16px. Задайте полям форм font-size: 1rem или больше, чтобы этого избежать.

Частые ошибки

Тег . Он устарел. Используйте свойство font-size.
Вложенные размеры в em, которые неуправляемо растут или уменьшаются. Используйте rem, если перемножение вам не нужно.
Фиксированный размер в px на html. Он перебивает собственную настройку шрифта читателя.
Забыли, что у заголовков уже есть размер. <h1> по умолчанию 2em, поэтому нужен h1 { font-size: 1em; }, если хотите размер основного текста.
Только единицы viewport. font-size: 3vw становится нечитаемым на телефоне и огромным на широком мониторе. Оберните его в clamp().

Часто задаваемые вопросы

Как изменить размер шрифта в CSS?

Задайте элементу свойство font-size: p { font-size: 18px; }. Оно принимает длины (px, rem, em), проценты и ключевые слова вроде large.

Как изменить размер шрифта в HTML?

Через CSS, в таблице стилей или в атрибуте style: . Старый тег  в HTML5 устарел, использовать его не стоит.

Какой размер шрифта в браузерах по умолчанию?

16px для основного текста, если пользователь не изменил его в настройках браузера. Именно этому значению по умолчанию равны 1rem и ключевое слово medium.

Что использовать для размера шрифта: px, em или rem?

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

Почему размер шрифта в em все время растет?

Потому что em считается от размера шрифта родителя, и у вложенных элементов значения перемножаются: 1.2em внутри 1.2em дает 1.44 от базового. Перейдите на rem, который всегда считается от корневого элемента.

Связанные концепции

Размер шрифта в CSS: font-size в px, rem, em