Вес и наклон шрифта

d

Вес и наклон шрифта — два базовых параметра, которые новички часто воспринимают как «сделать жирным» и «сделать курсивом». На практике за этими CSS-свойствами (font-weight и font-style) скрываются десятки нюансов, влияющих на читаемость, производительность и соответствие дизайн-системе. В этом руководстве я разберу пять ключевых ошибок и малоизвестных приёмов, которые отличают опытного веб-разработчика от любителя. Вы узнаете, почему обычный font-weight: bold может испортить отображение на мобильных, как правильно имитировать наклон, когда нет Italic-начертания, и почему 500 — это не всегда то же самое, что 400. Все примеры — из реальной практики 2026 года.

1. Миф о «жирности»: font-weight — это не про толщину

Самое распространённое заблуждение: font-weight управляет только механическим утолщением штрихов. На самом деле каждое числовое значение (100–900) должно соответствовать отдельному начертанию шрифта. Если в гарнитуре нет, скажем, начертания Thin (100), браузер включит алгоритм синтетического утолщения — и результат на экране будет размытым, с неравномерными зазорами. Особенно это критично для экранов с Retina-плотностью 326 ppi и выше.

2. Скрытая ловушка font-weight: разница между 400 и 500

Многие шрифты имеют начертания Regular (400) и Medium (500). Визуально Medium чуть плотнее, но не такой жирный, как SemiBold (600). Если в системе нет Medium, а вы задали font-weight: 500, браузер может применить Regular или даже Light — в зависимости от порядка подключения. Это ломает иерархию заголовков. В 2026 году Google Fonts уже перестал «подтягивать» отсутствующие веса, но локальные шрифты всё ещё подвержены этой проблеме.

  1. Загружайте все необходимые начертания. Начните с 400, 500, 700 — этого хватает для 90% макетов. Для тонких заголовков добавьте 300.
  2. Используйте font-weight var. Если шрифт поддерживает вариативность (wght axis), задайте диапазон: font-weight: 400 900. Браузер сам подберёт ближайший вариант.
  3. Проверяйте на реальном устройстве. Симулятор в Chrome часто показывает жирность иначе, чем реальный iPhone 16 или Samsung Galaxy S25.

3. Наклон шрифта: когда italic ≠ oblique

Ошибка №1 среди дизайнеров-самоучек: думать, что font-style: italic и font-style: oblique — одно и то же. На самом деле italic — это отдельное начертание с изменённой формой букв (например, курсивная «а»). Oblique — просто наклон Regular без смены геометрии. Если у шрифта нет Italic-начертания, браузер применит синтетический наклон — буквы станут «грязными», особенно на нижних выносных элементах. В 2026 году WebKit для macOS 15 всё ещё выдаёт артефакты при синтетическом oblique (дрожание контуров на строчных «g» и «j»).

4. Производительность: как неправильный вес и наклон тормозят сайт

Каждое дополнительное начертание увеличивает вес шрифтового файла. Например, Roboto в четырёх весах (Regular, Italic, Bold, BoldItalic) весит около 120 кбайт. А если вы добавите ещё Medium и MediumItalic — уже 180 кбайт. На мобильных с медленным 3G (реальность многих регионов 2026 года) каждая лишняя секунда загрузки увеличивает отказы на 20%. Кроме того, браузер принудительно скачивает все вариации, даже если они не используются на странице.

  1. Правило трёх: Для текстового контента достаточно 400, 400italic, 700. Заголовки можно сделать через переменный шрифт с осью wght.
  2. Используйте font-display: swap — текст будет виден сразу, даже если шрифт ещё загружается. Но избегайте флипа стилей при смене начертания (flash of faux weight).
  3. Собирайте только нужные глифы: Инструменты вроде glyphhanger позволяют отрезать символы, которых нет в вашем контенте — экономия до 40% объёма.
  4. Тестируйте в WebPageTest с включённой эмуляцией 3G и CPU Throttling. Если время First Paint больше 2,5 с — оптимизируйте шрифты.

5. Неочевидная проблема: вес и наклон в разных браузерах

Firefox и Chrome по-разному округляют числовые значения font-weight, когда гарнитура не предоставляет точного соответствия. Например, для шрифта с весами 400 и 700 при font-weight: 500 Firefox покажет Regular, а Chrome — SemiBold (если есть). Это приводит к тому, что один и тот же код смотрится по-разному на разных устройствах. С наклоном похожая история: в Edge на Windows 11 синтетический oblique поворачивает буквы на 12 градусов, а в Safari на iOS — на 14. Разница в 2 градуса заметна на больших заголовках.