Исполняемые доки CSS: Font-weight

Q: Как сделать текст жирным в CSS?

Задайте элементу font-weight: bold; или равнозначное число font-weight: 700;. Чтобы убрать жирность у заголовка или , задайте font-weight: normal; (400).

Q: font-weight bold и 700 это одно и то же?

Да. bold вычисляется в 700, а normal в 400, поэтому обе формы выглядят одинаково.

Q: Что использовать: CSS font-weight или тег ?

, когда слова важны, для текста, который просто оформлен иначе, и font-weight для визуального дизайна: кнопок, подписей и заголовков. Теги несут смысл, а свойство отвечает только за внешний вид.

Жирный шрифт в CSS: font-weight от 100 до 900

Свойство font-weight делает текст жирным, тонким или чем-то между. Разберем числовую шкалу от 100 до 900, normal и bold, относительные bolder и lighter и почему иногда насыщенность шрифта ничего не меняет.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Как сделать текст жирным в CSS

font-weight задает толщину букв. bold (то же, что 700) делает текст жирным, а normal (то же, что 400) обычным.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font weight</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 6px 0; }
    .normal { font-weight: normal; }
    .bold { font-weight: bold; }
    .heavy { font-weight: 900; }
    h2.plain { font-weight: normal; }
  </style>
</head>
<body>
  <p class="normal">font-weight: normal (400)</p>
  <p class="bold">font-weight: bold (700)</p>
  <p class="heavy">font-weight: 900</p>
  <h2 class="plain">A heading with font-weight: normal</h2>
</body>
</html>

Заголовки, <th>,  и  жирные по умолчанию из-за встроенной таблицы стилей браузера, поэтому жирность убирают через font-weight: normal. Когда использовать  или  в самом HTML, рассказано на странице жирный текст в HTML.

Числовая шкала: от 100 до 900

У чисел есть стандартные названия, которым следуют семейства шрифтов:

Значение	Общепринятое название
`100`	Thin (тонкий)
`200`	Extra Light
`300`	Light (светлый)
`400`	Normal (Regular, обычный)
`500`	Medium (средний)
`600`	Semi Bold (полужирный)
`700`	Bold (жирный)
`800`	Extra Bold
`900`	Black (Heavy)

Допустимо любое число от 1 до 1000, поэтому 450 и 650 тоже разрешены. Увидите ли вы разницу, зависит от шрифта: браузер может нарисовать только те начертания, которые в шрифте есть.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weight scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-weight: 100;">100 Thin</p>
  <p style="font-weight: 200;">200 Extra Light</p>
  <p style="font-weight: 300;">300 Light</p>
  <p style="font-weight: 400;">400 Normal</p>
  <p style="font-weight: 500;">500 Medium</p>
  <p style="font-weight: 600;">600 Semi Bold</p>
  <p style="font-weight: 700;">700 Bold</p>
  <p style="font-weight: 800;">800 Extra Bold</p>
  <p style="font-weight: 900;">900 Black</p>
</body>
</html>

system-ui это шрифт интерфейса операционной системы, у которого обычно много начертаний. Если каждая строка выше похожа на одно из двух начертаний, в вашем системном шрифте есть только обычное и жирное.

Почему насыщенность ничего не меняет

Шрифт это набор файлов, часто по одному на начертание. Когда точной насыщенности нет, браузер берет ближайшую из имеющихся:

Для 500 он пробует 500, затем более светлые, затем более жирные.
Для 600 и выше он сначала пробует более жирные, затем более светлые.
Если жирного файла нет вовсе, большинство браузеров подделывают его, утолщая обычные буквы (синтетический жирный).

Сравните шрифт с множеством начертаний и serif, у которого в большинстве систем есть только обычное и жирное:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Missing weights</title>
  <style>
    body { font-size: 22px; color: #111827; }
    .col { display: inline-block; vertical-align: top; margin-inline-end: 32px; }
    .sans { font-family: system-ui, sans-serif; }
    .serif { font-family: Georgia, serif; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="col sans">
    <p style="font-weight: 300;">300 sans</p>
    <p style="font-weight: 500;">500 sans</p>
    <p style="font-weight: 600;">600 sans</p>
  </div>
  <div class="col serif">
    <p style="font-weight: 300;">300 serif</p>
    <p style="font-weight: 500;">500 serif</p>
    <p style="font-weight: 600;">600 serif</p>
  </div>
</body>
</html>

В столбце serif 300 и 500 обычно откатываются к обычному начертанию, а 600 к жирному. Это ответ на большинство вопросов «font-weight не работает»: CSS в порядке, в шрифте нет нужного начертания. Вариативный шрифт (один файл с осью насыщенности) плавно рисует любое значение в своем диапазоне.

bolder и lighter

bolder и lighter считаются относительно насыщенности, которую элемент наследует. Они переходят к следующей группе насыщенности, а не прибавляют фиксированную величину:

Насыщенность родителя	`bolder` дает	`lighter` дает
от 100 до 349	400	100
от 350 до 549	700	100
от 550 до 749	900	400
от 750 до 900	900	700

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bolder and lighter</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    .bolder { font-weight: bolder; }
    .lighter { font-weight: lighter; }
  </style>
</head>
<body>
  <p style="font-weight: 400;">400 with <span class="bolder" id="a">bolder</span> and <span class="lighter" id="b">lighter</span></p>
  <p style="font-weight: 700;">700 with <span class="bolder" id="c">bolder</span> and <span class="lighter" id="d">lighter</span></p>
  <p id="out"></p>
  <script>
    const w = (id) => getComputedStyle(document.getElementById(id)).fontWeight;
    document.getElementById('out').textContent =
      'computed: ' + w('a') + ', ' + w('b') + ', ' + w('c') + ', ' + w('d');
  </script>
</body>
</html>

Прием из практики: шкала насыщенности в переменных

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

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}
body   { font-weight: var(--weight-regular); }
button { font-weight: var(--weight-medium); }
h1, h2 { font-weight: var(--weight-bold); }

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

Ожидание, что каждое число будет выглядеть по-разному. Различаются только начертания, которые есть в шрифте.
 для подписи кнопки. Оформляйте кнопку через font-weight;  и  оставьте для текста.
Число в кавычках. font-weight: "700" невалидно и игнорируется. Пишите font-weight: 700.
Жирный для выделения везде. Когда жирное все, ничего не выделяется. Оставьте основной текст в 400.
Тонкие начертания для мелкого текста. От 100 до 300 в мелком размере трудно читать, особенно на фоне с низкой контрастностью.

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

Как сделать текст жирным в CSS?

Задайте элементу font-weight: bold; или равнозначное число font-weight: 700;. Чтобы убрать жирность у заголовка или , задайте font-weight: normal; (400).

Какие значения у font-weight?

Числа от 1 до 1000, обычно записываемые сотнями: 100 thin, 200 extra light, 300 light, 400 normal, 500 medium, 600 semibold, 700 bold, 800 extra bold, 900 black. Ключевые слова normal и bold равны 400 и 700, а bolder и lighter считаются относительно родителя.

font-weight bold и 700 это одно и то же?

Да. bold вычисляется в 700, а normal в 400, поэтому обе формы выглядят одинаково.

Почему font-weight 500 или 600 выглядит как normal или bold?

У шрифта нет такой насыщенности. Если шрифт поставляется только в 400 и 700, браузер берет ближайший доступный файл, поэтому 500 выглядит как 400, а 600 как 700. Подключите шрифт с большим числом начертаний или вариативный шрифт.

Что использовать: CSS font-weight или тег ?

, когда слова важны,  для текста, который просто оформлен иначе, и font-weight для визуального дизайна: кнопок, подписей и заголовков. Теги несут смысл, а свойство отвечает только за внешний вид.

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