skip to main content

font-weight

css

Кратко 🔗

Свойство font-weight задаёт насыщенность шрифта: от самого тонкого до самого жирного начертания.

Примеры 🔗

/* Основные значения */
font-weight: normal;
font-weight: bold;

/* Значения относительно родительского элемента */
font-weight: lighter;
font-weight: bolder;

/* Значения в цифрах */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/* Общие значения */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

Как это понять 🔗

Большинство шрифтов имеют два варианта начертания: обычное normal и жирное bold. Их в основном и используют.

Но браузер может отобразить и более тонкие или толстые варианты, если шрифт их поддерживает. Такие варианты задаются с помощью слов lighter и bolder или в условных единицах от сверхсветлого начертания 100 до сверхжирного или «чёрного» 900 с шагом 100 единиц.

Как пишется 🔗

Толщину текста можно задать с помощью ключевых слов или числовым значением:

  • normal — стандартная толщина шрифта. Соответствует значению 400. Значение по умолчанию.
  • bold — жирный набор текста. Соответствует 700.
  • lighter — более тонкий вариант, чем в родительском элементе. Например, светлое начертание Light.
  • bolder — более насыщенный вариант, чем в родительском элементе. Например, сверхжирное начертание Extra Bold.
  • 100, 200, 300, 400, 500, 600, 700, 800, 900 — условные единицы насыщенности, где 400 — это стандартная насыщенность текста. Используются редко, так как большинство шрифтов имеют только обычное и жирное написание.

Подсказки 🔗

💡 Если всё же решишь использовать цифры, но у выбранного шрифта нет такого варианта насыщенности, то для значений от 100 до 500 браузер выберет стандартный вариант normal, а от 600 до 900 — жирный шрифт bold.

Ещё примеры 🔗

Попробуем задать насыщенность сразу разными способами к разным элементам кода. Чтобы увидеть разницу, мы выбрали любимый шрифт Apple — Helvetica Neue, потому что у него много вариантов жирности:

HTML

<body>
<h1>Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold.
В цифровом значении он равен 700 единицам.</h1>

<p> Это текст стандартной толщины внутри контейнера <p>.
Он эквивалентен 400 единицам толщины.</p>

<div>
Это текст внутри контейнера <div> — и он чуть толще, чем стандартный normal,
но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500.<br />
<span>В контейнере <span> шрифт тоньше, чем в <div>, внутри которого он находится.
Его мы задали с помощью значения lighter.</span>
</div>
</body>

CSS

body {
font-family: "Roboto", sans-serif;
}
/* Зададим толщину заголовка с помощью слова bold. */
h1 {
font-weight: bold;
}

/* Обычный текст в абзаце <p> сделаем стандартным normal */
p {
font-weight: normal;
}

/* В контейнере <div> текст будет средним по жирности между normal и bold */
div {
font-weight: 500;
}

/* В элементе <span> текст будет на один уровень меньше по жирности,
чем у родительского элемента, внутри которого он находится */

span {
font-weight: lighter;
}

В работе 🔗

Алёна,

🛠 Большинство современных шрифтов имеет полный набор начертаний. Для более тонкого управления отображением шрифта используются как раз таки цифровые значения для свойства font-weight.

🛠 Относительные значения bolder и lighter не используются почти никогда. Причина в том, что они относительные. Как итог если меняется вес шрифта родительского элемента — меняется вес шрифта ребёнка. Но это, чаще всего, не то что нужно. Совет: используй всегда абсолютный вес шрифта.

Владимир 👨‍🔧

🛠 Как-то исторически сложилось, что мне проще указывать font-weight в цифрах, а не использовать названия а-ля semi-bold. Поэтому по умолчанию — 400, для жирных — 700, для тонких — 300 или 100. Я призываю всех так писать: цифры всегда понятнее слов.


Автор: Макс 👨‍🔧