Сочетание serif bold italic — это текст с засечками, жирным начертанием и курсивом одновременно, и в CSS оно задаётся тремя свойствами: font-family со шрифтом категории serif, font-weight: bold и font-style: italic. Проблема возникает тогда, когда браузер не находит в подключённом шрифте настоящего жирного курсива и синтезирует его искусственно: буквы просто наклоняются алгоритмом, а засечки «плывут» и выглядят грубо. Проверить это легко — достаточно сравнить начертание в браузере с образцом на сайте разработчика шрифта.
В этой статье разберём, как правильно задать serif bold italic в CSS и HTML, чем настоящий курсив отличается от синтезированного, какие шрифты с засечками имеют полноценные жирные курсивные начертания и какие ошибки встречаются чаще всего при вёрстке.
Что означает сочетание serif, bold и italic
Каждое из трёх слов описывает отдельную характеристику шрифта. Serif — это гарнитура с засечками: короткими штрихами на концах основных линий букв. Классические примеры — Times New Roman, Georgia, PT Serif. Такие шрифты традиционно используются для длинных текстов, книг и официальных документов.
Bold — жирное начертание, в CSS соответствует значению font-weight: 700. Italic — курсив, то есть наклонное начертание, задаётся через font-style: italic. Важный нюанс: у качественных шрифтов курсив — это не просто наклонённые буквы, а отдельно отрисованные знаки с изменёнными формами (например, курсивная «а» часто пишется иначе, чем прямая).
Когда все три свойства применяются одновременно, браузер ищет в файлах шрифта начертание Bold Italic. Если оно есть — отображается настоящий жирный курсив. Если его нет, включается синтез: браузер утолщает штрихи и наклоняет глифы самостоятельно, и результат заметно отличается от задумки дизайнера.
💡Serif bold italic — это три независимых свойства шрифта. Качество результата зависит от того, есть ли в гарнитуре настоящее начертание Bold Italic.