Типографика в вебе всё ещё страдает, когда дело доходит до буквиц. В production — будь то лонгриды, премиальные лендинги или медиа-сайты — верстальщики часто мучаются с float, магическими font-size и line-height, чтобы буква не вылезла за границы. Решение есть в спецификации CSS Inline Layout Level 3: свойство
initial-letter.Как это работает
Свойство задаёт, на сколько строк должна растянуться первая буква. Браузер автоматически вычисляет размер шрифта и позицию, без float и подгонок. Пример:
p::first-letter {
initial-letter: 3;
}Если нужно смещение вниз, добавляется второй параметр:
p::first-letter {
initial-letter: 3 1;
}Первая цифра — высота в строках, вторая (опционально) — смещение. Буква не вылезает за границы абзаца.
Практический совет
Используйте
initial-letter в лонгридах, книжной вёрстке или премиальных лендингах. Оно идеально сочетается с font-family и color, а если браузер не поддерживает (Safari — да, Firefox и Chrome — пока нет), работает graceful degradation: остаётся обычная первая буква. Это избавляет от сложных кастомных решений в дизайн-системах.Типичная ошибка
Пытаться эмулировать буквицу через
float и line-height с магическими числами. Это ломается при изменении шрифта, размера или межстрочного интервала, а доступность страдает, так как трудно предсказать переполнение. initial-letter решает проблему предсказуемости layout и визуальной стабильности без костылей.Вывод:
initial-letter — это инженерно чистый инструмент для типографики, который упрощает поддержку и избавляет от визуальной регрессии в адаптивных интерфейсах.