Довідник CSS

Вага шрифту: від Thin до Black

Практична таблиця значень font-weight, назв накреслень і рекомендацій для звичайних та variable fonts.

Таблиця ваг шрифту

Число в CSS визначає бажану насиченість. Назви є типовими, але конкретне сімейство може використовувати інші назви або мати не всі ваги.

Текст для порівняння

CSS-вага	Типова назва	Інші назви	Приклад
100	Thin	Hairline	Їжак ґречно п’є чай біля фонтану
200	Extra Light	Ultra Light	Їжак ґречно п’є чай біля фонтану
300	Light	—	Їжак ґречно п’є чай біля фонтану
400	Regular	Normal, Book	Їжак ґречно п’є чай біля фонтану
500	Medium	—	Їжак ґречно п’є чай біля фонтану
600	Semi Bold	Demi Bold	Їжак ґречно п’є чай біля фонтану
700	Bold	—	Їжак ґречно п’є чай біля фонтану
800	Extra Bold	Ultra Bold	Їжак ґречно п’є чай біля фонтану
900	Black	Heavy	Їжак ґречно п’є чай біля фонтану
950	Extra Black	Ultra Black	Їжак ґречно п’є чай біля фонтану

Як використовувати font-weight у CSS

Якщо файл відповідної ваги підключений через font face declaration, браузер використає його для елемента з таким самим font-weight.

.body { font-weight: 400; }
.button { font-weight: 600; }
.heading { font-weight: 700; }

Ваги у variable font

Variable font може містити безперервний діапазон, наприклад від 100 до 900. У font face declaration цей діапазон задають двома числами, після чого можна використовувати проміжні значення.

@font-face {
  font-family: 'Example Variable';
  src: url('/fonts/example.woff2') format('woff2');
  font-weight: 100 900;
}

Справжня вага чи синтетичний Bold?

Коли потрібного накреслення немає, браузер може штучно потовщити найближче доступне. Такий результат часто гірший за файл, намальований автором. Підключайте потрібні ваги явно, а за необхідності вимикайте синтез через font-synthesis: none.

font-synthesis: none;

Які ваги обрати для сайту?

— 400 — основний текст
— 500 або 600 — елементи інтерфейсу й помірні акценти
— 700 — заголовки та сильний акцент

Не завантажуйте всі накреслення автоматично. Кожен окремий файл збільшує обсяг ресурсів сторінки. Почніть із 400 і 700, а інші додавайте лише тоді, коли вони справді використовуються.

Переглянути шрифти в каталозі