Справочник 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, а остальные добавляйте только тогда, когда они действительно используются.

Посмотреть шрифты в каталоге