Как назначать font-weight для обычных и промежуточных начертаний

Чтобы назначить font-weight правильно, сначала определите реальные начертания, доступные в шрифте, а затем сопоставьте им числовые значения CSS. Обычное начертание обычно соответствует 400, полужирное — 600 или 700, а промежуточные варианты получают значения между ними. В статье разберём настройку статических и вариативных шрифтов, наследование и типичные ошибки.

Свойство font-weight задаёт насыщенность знаков: насколько толстыми выглядят основные штрихи букв. В CSS используются ключевые значения normal и bold, а также числа от 1 до 1000. На практике чаще применяют шкалу 100, 200, 300 и так далее до 900. Число является запросом к системе шрифтов, а конкретный результат зависит от доступных файлов и оси веса.

Значение normal обычно эквивалентно 400, а bold — 700. Это не универсальный закон о дизайне конкретной гарнитуры, а стандартное CSS-сопоставление ключевых слов. У шрифта может не быть отдельного файла именно для 400 или 700, поэтому браузер выбирает ближайшее доступное начертание по правилам сопоставления или синтезирует его, если подходящего варианта нет.

Числовая шкала помогает описать и обычные, и промежуточные начертания единообразно. Чем меньше значение, тем легче выглядит рисунок букв; чем больше значение, тем выше визуальная плотность текста. Названия вроде Light, Regular, Medium, Semibold и Bold не являются строгими числовыми стандартами, поэтому их нужно сопоставлять с конкретной гарнитурой, а не переносить механически из одного семейства в другое.

Эта шкала не означает, что каждая гарнитура обязана иметь девять отдельных файлов. Если подключены только Regular и Bold, значения 300, 500 или 600 не гарантируют появления промежуточного рисунка. Браузер может выбрать ближайший файл. Поэтому визуальная система должна опираться на проверенные начертания, а не только на привлекательные числа в CSS.

Начните с таблицы файлов гарнитуры. Зафиксируйте имя каждого файла, его внутреннее имя и заявленную насыщенность. Затем назначьте роли в интерфейсе: основной текст, вторичный текст, подписи, кнопки, подзаголовки и заголовки. Внутри одного проекта лучше использовать ограниченное число проверенных уровней, чтобы иерархия оставалась последовательной и не зависела от случайного поведения браузера.

Например, у гарнитуры могут быть файлы Font-Regular, Font-Medium и Font-Bold. Практичное сопоставление будет выглядеть так: Regular — 400, Medium — 500, Bold — 700. Если Medium визуально слишком близок к Regular, его не обязательно использовать только потому, что файл существует. Вес должен решать задачу иерархии, а не заполнять шкалу формально.

Для длинного текста чаще всего выбирают 400: он обеспечивает спокойный ритм и не конкурирует с содержанием. Значение 500 удобно для навигации, табличных заголовков и коротких элементов, где требуется немного усилить контраст. Для кнопок, подзаголовков и важных меток подходит 600 или 700. Чем меньше размер текста, тем осторожнее следует обращаться с высокой насыщенностью: плотные штрихи быстрее ухудшают разборчивость.

Рассмотрим карточку товара. Название можно набрать с weight 600, цену — с 700, описание — с 400, а вторичную характеристику — с 500. Такое распределение создаёт иерархию без изменения размера каждого элемента. Если все четыре строки сделать 700, визуальный контраст исчезнет: жирность перестанет быть средством навигации и превратится в общий шум.

Число 500 само по себе не добавляет шрифту новый рисунок. Если в объявлении @font-face нет файла или вариативного шрифта, который покрывает этот вес, браузер выбирает доступный вариант по алгоритму сопоставления. В результате font-weight: 500 может выглядеть так же, как 400, или оказаться ближе к 700. Для точного результата подключайте отдельное начертание Medium и объявляйте его с соответствующим weight.

Статический шрифт поставляется набором отдельных файлов: например, Regular, Medium, Semibold и Bold. В CSS каждому файлу задают собственный диапазон или точное значение font-weight. Такой подход прозрачен и удобен для небольших систем, но требует контролировать несколько файлов, их загрузку и совпадение начертаний с заявленными значениями.

Variable font хранит изменяемые параметры в одном файле или в меньшем наборе файлов. Если шрифт поддерживает ось wght, браузер может отобразить непрерывный диапазон насыщенности, например от 300 до 800. Это позволяет использовать 450, 525 или 675, но только в пределах реально объявленного диапазона и при наличии корректной оси. Промежуточное значение в таком случае является частью вариативного рисунка, а не имитацией.

Для вариативного шрифта в @font-face указывают диапазон font-weight: 300 800. После этого в стилях можно назначать конкретные значения внутри диапазона. Однако не стоит создавать десятки почти незаметных уровней: интерфейсу нужна понятная типографическая иерархия. Обычно достаточно нескольких ролей, а точные промежуточные значения полезны тогда, когда они заметно улучшают плотность, контраст или соответствие фирменному стилю.

Font-weight отвечает за насыщенность, а font-style — за начертательный характер: normal, italic или oblique. Курсив не является промежуточным весом. Если нужно подключить отдельный файл курсивного начертания, его объявляют через font-style: italic и отдельно указывают его диапазон или значение font-weight. Например, у гарнитуры могут существовать Regular Italic 400 и Bold Italic 700.

Font-stretch также не следует заменять font-weight. Он описывает ширину знаков, а не толщину штрихов. В полноценной системе могут одновременно меняться вес, стиль и ширина, но каждое свойство должно соответствовать своей характеристике файла. Такое разделение особенно важно при подключении variable fonts с несколькими осями.

Для статических файлов удобно создать отдельное объявление @font-face для каждого веса. Файл Regular связывают с 400, Medium — с 500, а Bold — с 700. В проекте после этого используют не названия файлов, а одну общую font-family и числовое значение font-weight. Так компоненты остаются независимыми от конкретного формата хранения гарнитуры.

Если файл Semibold подключён как 700, а в стилях используется 600, браузер может не найти точное соответствие и выбрать ближайший вариант. Поэтому число в CSS должно согласовываться с объявлением @font-face. Выбор 600 вместо 700 имеет смысл тогда, когда Semibold действительно зарегистрирован как 600 или когда вариативный шрифт поддерживает это значение.

Отдельная ошибка — оценивать вес только по названию файла. Два шрифта с названием Medium могут выглядеть по-разному из-за контраста штрихов, апертур, пропорций и размера кегля. Сравнивайте начертания в реальном интерфейсе: в абзаце, кнопке, заголовке, таблице и на разных экранах. Типографическое решение должно быть визуально устойчивым, а не только технически корректным.

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

В доступности важен не только font-weight. Разборчивость зависит от размера текста, межстрочного интервала, контраста, длины строки и качества самого рисунка. Не используйте жирность как единственный способ передать состояние элемента: для ошибок, ссылок или выбранных пунктов добавляйте другие понятные признаки, например цвет, границу, положение или текстовую подпись.

Обычному начертанию обычно соответствует font-weight: 400 или ключевое значение normal. Это стандартное CSS-сопоставление, но итоговый вид зависит от того, какой файл зарегистрирован в @font-face. Если Regular подключён с другим значением, ориентироваться нужно на корректное объявление конкретной гарнитуры.

Оба значения обозначают насыщенность между обычным и жирным начертанием, но 600 визуально обычно плотнее 500. Реальная разница появится только при наличии соответствующих файлов или вариативной оси веса. Если шрифт содержит только Regular и Bold, браузер может показать одинаковый или почти одинаковый результат для обоих значений.

Да, значение 450 допустимо в современной шкале CSS, но его результат зависит от шрифта. Вариативная гарнитура с осью wght сможет построить промежуточное начертание внутри поддерживаемого диапазона. Статический шрифт без такого веса выберет ближайшее доступное начертание, поэтому 450 не гарантирует отдельную толщину.

Чаще всего CSS запрашивает вес, для которого нет подключённого файла, либо файл объявлен с неправильным значением. В таком случае браузер выбирает ближайшее начертание или синтезирует жирность. Проверьте вкладку со шрифтами в инструментах разработчика, объявления @font-face, диапазоны weight и запрет синтеза, если точность рисунка критична.

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

Да, 700 обычно соответствует ключевому значению bold. Но в проекте должен быть подключён файл, зарегистрированный как 700, либо variable font, покрывающий это значение. Если Bold объявлен ошибочно как 400 или вовсе не подключён, браузер не сможет применить ожидаемое жирное начертание корректно.

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

Правильное назначение font-weight начинается не с выбора красивого числа, а с проверки реальных файлов, их диапазонов и роли каждого начертания. 400 обычно используют для текста, 500–600 — для промежуточной иерархии, 700 — для сильного акцента, но окончательное решение всегда зависит от конкретной гарнитуры и сценария.

Создайте собственную гарнитуру с нужными обычными и промежуточными начертаниями на fontgenerator.ru, а затем проверьте её в реальном интерфейсе: от длинного текста до кнопок и заголовков.