В мире фронтенд-разработки стиль текста — это не только вопрос эстетики, но и важный элемент пользовательского восприятия. Одним из главных параметров типографики в CSS является свойство font-weight. Мы часто задаем font-weight: 400, font-weight: 700, или используем именованные значения вроде bold, но что кроется за этими цифрами и названиями? И как соотносятся привычные названия шрифтов вроде Medium, Black, Ultra Light с числовыми значениями?

Что такое font-weight?

Свойство font-weight в CSS определяет “толщину” начертания шрифта — проще говоря, насколько жирным будет текст. Значение может быть как числовым (от 100 до 900), так и ключевым (например, normal, bold).

Официально в CSS предусмотрено 9 ступеней веса:

Обратите внимание: не каждый шрифт поддерживает все веса. Если вы зададите font-weight: 500, но шрифт имеет только 400 и 700, браузер интерполирует (или заменит) вес.

Как названия шрифтов связаны с font-weight

Многие разработчики путаются, когда видят в Figma или Google Fonts названия вроде “Roboto Black” или “Open Sans SemiBold”. Кажется, что это стилистические названия, но на самом деле — это прямые указания на вес.

Примеры наиболее популярных шрифтов и их соответствия:

Некоторые производители шрифтов добавляют свои вариации, такие как Book (обычно около 300–400), Heavy (может быть 800–900) или Ultra (максимально жирный, иногда выше 900, если шрифт позволяет).

Важность знания веса шрифта.

Если вы не знаете точное значение веса шрифта, вы можете:

• получить неконсистентный внешний вид между браузерами и платформами;
• столкнуться с отсутствием нужного веса при загрузке через @font-face или Google Fonts;
• “сломать” визуальную иерархию дизайна.

Кроме того, использование точных чисел (font-weight: 600 вместо bold) позволяет вам более точно управлять типографикой и облегчает контроль в UI-библиотеках и дизайн-системах.

Влияние на производительность

Использование большого количества весов одного шрифта может заметно увеличить размер вашего сайта. Поэтому хорошей практикой считается ограничение количества загружаемых начертаний. Google Fonts, к примеру, позволяет выбрать только нужные веса, а не всю коллекцию.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

Здесь мы загружаем только Regular, Medium и Bold — наиболее используемые.

Самая подробная классификация font-weight

Интересную классификацию весов можно найти в исследовании Чарльза Бигелоу и Крис Холмс. Они предлагают рассматривать веса шрифта как аналог шкалы громкости в музыке: от «шепота» (сверх-тонкого шрифта) до «крика» (ультра-тяжелого). И чем больше весов предлагает шрифт, тем более выразительными могут быть ваши дизайнерские акценты.

Таблица, отображающая всю гамму весов на примере шрифта Roboto Flex:

Это может быть полезно для работы с переменными шрифтами (variable fonts), которые позволяют задавать вес с точностью до единицы.

Полезные советы по использованию font-weight

• Используйте переменные шрифты, если важна гибкость: они позволяют задавать любые значения между 100 и 900.
• Проверяйте наличие необходимых весов у шрифта перед применением — особенно если вы подключаете их вручную.
• Тестируйте визуально — один и тот же font-weight: 500 может выглядеть по-разному у разных шрифтов.
• Избегайте избыточной жирности на мобильных устройствах — слишком bold’овые тексты могут сливаться и ухудшать читаемость.

Таким образом, толщина шрифта — это не просто декоративный элемент, а важный инструмент визуального баланса и UX. Знание соответствий между именованными и числовыми значениями font-weight помогает создать аккуратный и понятный интерфейс, избежать типографических ошибок и повысить производительность сайта. Не забывайте, что хороший дизайн начинается с деталей, и font-weight — одна из них.